1.关于页面的跳转，微信小程序提供了3种方法：
方法一：使用API wx.navigateTo()函数
wx.navigateTo({
url:'../test/test?id=1&page=4',//跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
success:function(){} //成功后的回调；
fail：function(){} //失败后的回调；
complete：function(){} //结束后的回调(成功，失败都会执行)
})
传递的参数在接收页面onLoad()函数中得到值：option.id就可以得到了
onLoad: function (option) {
console.log(option)//可以打印一下option看查看参数
this.setData({
id:option.id,
});
实例：
index.wxml:
在index.wxml新建一个button组件，并使用bindtap事件绑定一个函数
<!--index.wxml-->
<button bindtap="changeToTest">点击</button>
index.js:
在index.js中的Page函数内部，添加changeToTest 函数，函数里面使用wx.navigateTo，写上需要跳转的页面，里面传入的是一个对象，对象内使用url属性，对应的就是需要跳转的页面的路径（注意：这是接收的是一个相对路径，并且页面不需要使用.wxml后缀）
//index.js
var app = getApp()
Page({
data: {
...
},
changeToTest:function(){
wx.navigateTo({
url: '../test/test'
})
},
onLoad:function(){
...
}
})注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
wx.navigateTo({
url: 'page/home/home?user_id=111' // 页面 A
})
wx.navigateTo({
url: 'page/detail/detail?product_id=222' // 页面 B
})
// 跳转到页面 A
wx.navigateBack({ //通过wx.navigateBack返回上一级（关闭当前页面。返回上一页面或多级页面）。
delta: 2 //返回的页面数，delta(默认为1),如果delta大于当前的页面数，则返回到首页。
})
方法二：使用API wx.redirectTo()函数
实例：
index.wxml:
在index.wxml新建一个button组件，并使用bindtap事件绑定一个函数
<!--index.wxml-->
<button bindtap="changeToTest">点击</button>
index.js:
wx.navigateTo()和wx.redirectTo()的区别：
wx.navigateTo()是保留当前页面，跳转到某个页面，跳转页面后可以返回上一页。
wx.redirectTo()是关闭当前页面，跳转到某个页面，跳转页面后不能返回上一页。
方法三：使用导航组件 <navigator>
//不带参数
<navigator url="/page/person/person">
......
</navigator>
//带参数
<navigator url="/page/person/person?title=1&time=1234">
......
</navigator>
（提示：发现点击时有背景，可以通过设置hover-class为none去除）
wxml 页面组件跳转（可以通过设置open-type属性指明页面跳转方式）： // navigator 组件默认的 open-type 为 navigate <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> // redirect 对应 API 中的 wx.redirect 方法 <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator> // switchTab 对应 API 中的 wx.switchTab 方法 <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator> // reLanch 对应 API 中的 wx.reLanch 方法 <navigator url="../../redirect/reLanch/reLanch?title=reLanch" open-type="reLanch" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator> // navigateBack 对应 API 中的 wx.navigateBack 方法 <navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</navigator>
实例：
index.wxml:
在index.wxml新建一个<navigator>元素，并在元素里面添加属性url就可以
<!--index.wxml-->
<navigator url="../test/test">点击跳转</navigator>
补充：
// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})
// 关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
url: 'page/home/home?user_id=111'
})
2.跳转的数据传递
以wx.navigateTo为例：
上面讲述,wx.navigateTo传入的url是跳转的页面（使用相对路径）
wx.navigateTo({
url:"pages/home/home"
});
那么参数传递至下一页面，则只需要在路径后面，添加？问号，？后面接的是参数，以key－value的方式。
这里传了个value为2的参数:
wx.navigateTo({
url:"pages/home/home?type=2"
});
然后在home.js中的onLoad()函数中得到值：option.type就可以得到了，如下：
onLoad: function (option) {
this.setData({
type:option.type,
});
console.log(option.type);
}
实例：
1、当前页面的参数，传到下一个页面。当前视图中view里要写入传递值。如下，通过bindtap绑定detail事件，并且把要传递的参数（title、time），以 “data-” 的格式传递。
<view wx:for="{{list}}" wx:key="id">
<view bindtap="detail" data-title="{{item.title}}" data-time="{{item.time}}">
<label>标题：{{item.title}}</label>
<label>时间：{{item.time}}</label>
</view>
</view>2、当前页面的js如下：e.currentTarget.dataset.XX 即获取视图中 “data-” 格式的数据。并在navigateTo中传入参数进行跳转。
detail:function(e){
var title = e.currentTarget.dataset.title;
var time = e.currentTarget.dataset.time;
wx.navigateTo({
url: "/pages/person/goldcoin_detail/index?detail=" + title + "|" + time
})
}3、在跳转到的页面接收数据：数据存在options中，直接以 “options.参数名”的形式获取。
data: {
title:'',
time:''
},
onLoad: function (options) {
var str = options.detail;
var detail = str.split("|");
this.setData({
title:detail[0],
time:detail[1]
})
},3.实战：
//category.wxml
<view wx:for="{{item.categories}}" wx:for-item="categoriesitem" wx:key="id">
<view class="sub_nav">
<text class="strong" bindtap="catlink" data-alias="{{categoriesitem.alias}}" data-name="{{categoriesitem.name}}">{{categoriesitem.name}}</text>
</view>
</view>//category.js
catlink:function(e){
var alias = e.currentTarget.dataset.alias;
var name = e.currentTarget.dataset.name;
//console.log(name);
wx.navigateTo({
url: '../articles/articles?alias='+alias+'&name='+name,
success: function(res) {
},
fail: function(res) {
},
complete: function(res) {
},
})
},//article.js
onLoad: function (options) {
var alias = options.alias;
var name = options.name;
this.setData({
alias:alias,
name:name,
})
var page = this;
var articlesData = [];
wx.request({
url: 'https://ittxx.cn/api/articles?cat='+alias, //api调用地址
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'GET',
data: [],
success: function (res) {
var data = res.data;
console.log(data);
page.setData({ articlesData: data })
},
fail: function (res) {
// fail
},
complete: function (res) {
// complete
}
})
},参考文档：
https://www.jianshu.com/p/e0b9525ecd7a
https://www.jianshu.com/p/0ca3cd8f3c6a
转载请注明： ITTXX.CN--分享互联网 » 小程序页面跳转以及带参数跳转总结
最后更新：2020-05-20 14:18:35
