1. 官方文档指南
1.navigator(导航): https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
2. 功能描述
页面链接。
- navigator 在 Skyline 下视为文本节点,只能嵌套文本节点(如 text),
不能嵌套 view、button
等普通节点- 新增 span 组件用于内联文本和图片
3. 通用属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
target | string | self | 否 | 在哪个目标上发生跳转,默认当前小程序 | 2.0.7 |
url | string | - | 否 | 当前小程序内的跳转链接 | 1.0.0 |
open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
delta | number | 1 | 否 | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 | 1.0.0 |
app-id | string | - | 否 | 当 target=“miniProgram” 且 open-type=“navigate” 时有效,要打开的小程序 appId | 2.0.7 |
path | string | - | 否 | 当 target=“miniProgram” 且 open-type=“navigate/navigateBack” 时有效,打开的页面路径,如果为空则打开首页 | 2.0.7 |
extra-data | object | - | 否 | 当 target=“miniProgram” 且 open-type=“navigate” 时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(), App.onShow() 中获取到这份数据 | 2.0.7 |
version | string | release | 否 | 当 target=“miniProgram” 且 open-type=“navigate” 时有效,要打开的小程序版本 | 2.0.7 |
short-link | string | - | 否 | 当 target=“miniProgram” 时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】>【复制链接】获取。 | 2.18.1 |
更多详情,请阅读官方文档
open-type 合法值
合法值 | 说明 | 最低版本 |
---|---|---|
navigate | 对应wx.navigateTo 或 wx.navigateToMiniProgram的功能 | - |
redirect | 对应wx.redirectTo 的功能 | - |
switchTab | 对应wx.switchTab 的功能 | - |
reLaunch | 对应wx.reLaunch 的功能 | 1.1.0 |
navigateBack | 对应wx.navigateBack 或 wx.navigateBackMiniProgram(基础库 2.24.4 版本支持)的功能 | 1.1.0 |
exit | 退出小程序,target=“miniProgram” 时生效 | 2.1.0 |
温馨提示:
- 当
open-type
取值为navigate
时 :保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面- 当
open-type
取值为redirect
时 :关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。- 当
open-type
取值为switchTab
时 :跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面- 当
open-type
取值为reLaunch
时 : 关闭所有页面,打开到应用内的某个页面- 当
open-type
取值为navigateBack
时 : 关闭当前页面,返回上一页面或多级页面
4. 代码实现过程
index.wxml布局
<view class="good-nav">
<navigator url="/pages/list/list">
<view>
<image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
<text>鲜花玫瑰</text>
</view>
</navigator>
<navigator url="/pages/list/list">
<view>
<image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
<text>鲜花玫瑰</text>
</view>
</navigator>
<navigator url="/pages/list/list">
<view>
<image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
<text>鲜花玫瑰</text>
</view>
</navigator>
<navigator url="/pages/list/list">
<view>
<image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
<text>鲜花玫瑰</text>
</view>
</navigator>
<navigator url="/pages/list/list">
<view>
<image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
<text>鲜花玫瑰</text>
</view>
</navigator>
</view>
index.wxss 样式
.good-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx;
}
.good-nav view {
display: flex;
flex-direction: column;
align-items: center;
}
.good-nav image {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
}
.good-nav text {
font-size: 24rpx;
margin-top: 12rpx;
}
5. 运行效果图
6 运行可能存在的问题
- 在模拟上,可能会出现点击不跳转,但运行在真机上面没问题
解决方案:
修改【调试基础库版本】,如下图所示:
2. 跳转的地址url格式不规范,一定要以/
反斜杠打头
正确示例:
<navigator url="/pages/list/list"> </navigator>
错误示例:
<navigator url="pages/list/list"> </navigator>