用法: 用于页面跳转, 相当于 html 里面的 <a></a > 标签
API 教程: https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html
四种跳转的方法, 在 index 里面写下一段代码进行测试
1: 从首页跳转到日志页面 (可以返回)
- (注意, 在没有设置底部导航的情况下, 没有 tab 也可使用这个属性, 有 tab 页则需更换 switchTab 属性)
- <view>
- <navigator url="/pages/logs/logs" hover-class="changestyle"> 页面跳转, 可以返回 </navigator>
- </view>
图片. png
图片. png
2: 从首页跳转到日志页面 (不可以返回)
- (注意, 在没有设置底部导航的情况下, 没有 tab 也可使用这个属性, 有 tab 页则需更换 switchTab 属性)
- <view>
- <navigator url="/pages/logs/logs" hover-class="changestyle" redirect > 页面跳转, 无法返回 </navigator>
- </view>
图片. png
3: 在当前页面打开
新建一个文件夹, 命名为 no, 完善里面的 wxml 测试信息, 为了方便测试随意填充内容
- <view class="btn-area">
- <navigator url="/pages/test/test" hover-class="navigator-hover"> 我是一个自由分散的页面哦 </navigator>
- </view>
图片. png
打开全局 app.json 文件, 将刚刚新建文件夹 no 的路径写入
图片. png
我们现在要测试从首页的链接上打开, 点击链接, 即可在当前的首页页面打开 no 页面
图片. png
4: 切换到 ta 页:
代码
- <view>
- <navigator url="/pages/logs/logs" open-type="switchTab" hover-class="other-navigator-hover"> 切换 Tab</navigator>
- </view>
注意: 我这里用的跳转是 switchTab 跳转, 而不是 navigator
原因: 所有的页面路径都需配置在 pages 下面 tabBar 里一般就是四个主页面, 这些主页面之间的跳转就像 tab 切换, 这几个页面需要在 tabBar 里另外配置, 普通页面向这四个主页面跳转的时候, 不能使用 navigator, 需用 switchTab
经验总结: TabBar 中的 list 项的配置 pagePath, 尽量不要作为其他页面的跳转链接
图片. png
文末福利:
福利一: 前端, Java, 产品经理, 微信小程序, Python 等资源合集大放送: https://www.jianshu.com/p/e8197d4d9880
福利二: 微信小程序入门与实战全套详细视频教程
image
来源: http://www.jianshu.com/p/01a5a6a0fdb9