小程序5——navigator
1. url
- pages文件夹下新建目录newPage
- newPage下再新建Page模板(包含了wxml、wxss、js、json初始化文件)
此时 app.json 文件中 pages 数组自动添加了一条路由路径,不带文件后缀名(wxml)。
所以,当用 navigator 进行链接跳转时,url必须是不带后缀名的,否则会找不到该文件。或者两边同时加上后缀名(不建议,开发者工具会自动在目录中新建四个带.wxml的模板文件),因为最终指向的还是 .wxml文件。
2. open-type
home.wxml
<!-- navigator -->
<navigator url="../pageA/pageA" open-type="navigator">
<button type="default">跳转到新页面</button>
</navigator>
<!-- redirect -->
<navigator url="../pageB/pageB">
<button type="default" open-type="redirect">在当前页打开</button>
<!-- <button type="default" redirect>在当前页打开</button>
可以直接写redirect/navigator/switchTab...
由于是在当前页面跳转,所以左上角不会有返回按钮。
-->
</navigator>
<!-- switchTab -->
<navigator url="../pageC/pageC" switchTab>
<button type="default">切换Tab页面</button>
</navigator>
<!-- reLaunch -->
<navigator url="../home/home" reLaunch> <!-- url不能缺少 -->
<button type="default">重新加载页面</button>
</navigator>
open-type 为 switchTab时,需要先在 app.json 文件中设置 tabBar页面。然后再在 index.wxml 中进行跳转。https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html
tabBar 中除了 list,还可以设置 tab 的颜色,选择颜色、背景色。
tabBar 的 list 中,必须要是 navigator 所在的页面的路径及要跳转的页面,否则不会显示底部 tab标签。