微信小程序使用navigator实现页面跳转功能

网友投稿 454 2023-11-10

−目录前言1 navigator 默认方式打开新的页面2 redirect 替换当前页面3 reLaunch 重新加载当前页面4 navigateBack 关闭当前页面5 navigateBack 关闭当前页面 并携带参数补充：解决微信小程序navigator点击无法跳转的问题总结

前言

在微信小程序开发中，navigator 用来实现页面路由功能，比如 A页面 中点击页面打开B页面

1 navigator 默认方式打开新的页面

?
1
2
3
<navigator url="/pages/code1/navigator/bPage">
<text>打开B页面</text>
</navigator>

微信小程序使用navigator实现页面跳转功能

等效于

open-type 是指定了页面跳转的方式，默认是 navigate ，页面层叠方式如下

对应的有点击事件，在JS中打开页面

?
1
<view bindtap="openNavigatorBPage" data-index=1><text>打开B页面</text></view>

在这里 data-index 是我页面绑定的参数，在对应的方法中通过 currentTarget.dataset.index 方式获取

如果我写的是 data-id ，那么点击事件中获取方式为 currentTarget.dataset.id

?
1
2
3
4
5
6
7
openNavigatorBPage:function (options) {
//获取绑定的参数
let id = options.currentTarget.dataset.index;
wx.navigateTo({
url: /pages/code1/navigator/bPage?id=+id,
})
},

然后 在目标页面中的 onLoad 方法中可以获取这个参数

?
1
2
3
onLoad: function (options) {
let id = options.id;
},

2 redirect 替换当前页面

open-type 可取值为 redirect ，就是直接替换当前页面

?
1
2
3
4
<!--类似a标签  open-type 跳转方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
<text>打开B页面</text>
</navigator>

对应的 js 方法为

?
1
2
3
wx.redirectTo({
url: /pages/code1/navigator/bPage?id=+id,
})

3 reLaunch 重新加载当前页面

open-type 可取值为 reLaunch ，就是相当于是重新加载了一下当前页面

?
1
2
3
<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
<text>打开B页面</text>
</navigator>

对应的 js 方法为

?
1
2
3
wx.reLaunch({
url: /pages/code1/navigator/bPage?id=+id,
})

4 navigateBack 关闭当前页面

可以直接在页面中 使用 navigator 标签嵌套

?
1
2
3
<navigator open-type="navigateBack">
<text>关闭页面</text>
</navigator>

等效于

?
1
2
3
<view bindtap="closeBPage" data-index=1>
<text>关闭B页面</text>
</view>
?
1
2
3
closeBPage: function () {
wx.navigateBack()
},

5 navigateBack 关闭当前页面 并携带参数

A页面通过wx.navigateTo跳入到B页面，然后B页面执行wx.navigateBack返回到A页面时候传给A页面参数

A页面中定义接收

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Page({
/**
* 页面的初始数据
*/
data: {
param: undefined,
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let param = this.data.param;
if (param) {
//有回传参数 处理页面业务逻辑
}
},
）；
//打开B页面
openNavigatorBPage: function (options) {
//获取绑定的参数
let id = options.currentTarget.dataset.index;
wx.re({
url: /pages/code1/navigator/bPage?id= + id,
})
},

在B页面中，关闭B页面的时候，设置回传参数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
closeBPage: function () {
//getCurrentPages()函数是用来获取当前页面栈的实例，
//返回的是一个按栈的顺序排列的数组pages_arr,且数组中的第一项为首页，最后一项为当前页。
//获取当前页面js里面的pages里的所有信息。
let pages = getCurrentPages();
//pages[pages.length - 2]是指的上一页，然后获取到上一个页的page对象后直接执行修改param的操作，这样就实现了在B页面修改A页面数据的功能
let prevPage = pages[pages.length - 2];
prevPage.setData({
param: 111, // 设置需要传递的参数
})
wx.navigateBack({
delta: 1
})
},

完毕

补充：解决微信小程序navigator点击无法跳转的问题

最近在搞微信小程序时发现页面跳转不成功，也没有报错，最后查了很多资料终于解决了问题，浪费了很多时间,现将可能的原因和我的解决方案列出来供各位参考：

1、app.json里面是否配置了页面，如果未配置,请在pages中添加。

2、跳转路径是否正确，尽量不要用相对路径,使用绝对路径’/pages/…’。

3、分清几种跳转的方式，特别是TabBar中要使用wx.switchTab。

4、（最坑的问题,我遇到的问题就是这个）如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用，使用不报错,但是也无效,不会发生跳转。例如我在TabBar中的list中设置了一个pages/shoplist/shoplist路径，而我想在index页面中通过点击一个navigator跳转到/pages/shoplist/shoplist这个页面,就不能进行跳转.

发现无法跳转,并且也不报错,就很奇怪

后来发现微信小程序开发中如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用，使用不报错,但是也无效,不会发生跳转。

将tabbar下的pages/shoplist/shoplist路径对应的对象删除之后,再在index页面中点击navigator,就可以跳转到想要的页面了

总结

到此这篇关于微信小程序使用navigator实现页面跳转功

您可能感兴趣的文章:微信小程序 navigator 跳转url传递参数微信小程序间使用navigator跳转传值问题实例分析

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 方法
上一篇:微信小程序转化为uni-app项目的方法示例
下一篇:微信小程序 选项卡的简单实例
相关文章

 发表评论

暂时没有评论，来抢沙发吧~