微信小程序带参传递的界面跳转的两种方式
之前有个微信小程序群友提出一个问题，就是在使用跳转时，在js代码里写带参数界面跳转会出问题，一直搞不定，因为年尾工作忙和事情多的原因，一直没有时间弄，这两天闲下来了，就试了试两种，发现没有问题，于是把它分享出来！
第一种:使用xwml文件里面在要跳转的views外面加<navigator></navigator>标签, 这里包括一个或者多个view,navigator标签里面有一个url属性，在url属性后面加上key-value参数就可以传参了,示例代码如下:
<navigatorurl="component-pages/wx-Go-bring-params/index?val=i am bright789!!!&showBtn=true" class="widget">
<textclass="widget__name">跳转传参</text>
<imageclass="widget__arrow" src="resources/arrow.png"background-size="cover" />
</navigator>
这里的参数val和showBtn在下个界面的js文件的onLoad()函数里面接收保存使用，示例代码如下 :
onLoad:function(options){
// 生命周期函数--监听页面加载
var that=this;
console.log('onLoad is invoked');
console.log(options);
that.setData({
lastval:options.val,
oldval:options.oldval,
showBtn:(options.showBtn=="true"?true:false),
})
},
这里要特别说明的是我们在传key-values参数时,即使我们做的是bool值，它也会当作是字符串，所以要做转换处理，不然会产生意想不到的结果。
第二种：使用bindtap事件绑定view，再在js文件里的tap回调函数使用代码wx. navigateTo()函数实现，其中wx. navigateTo()函数要传一个object参数，而object里面就可以带url，这里的url与方法1的差不多，都是后面跟key-value参,不同的是它的变量要使用that.data.lastval这里方式,而方法1的就使用{{lastval}}这里方式，示例代码如下:
Wxml文件:
<button type="default"bindtap="onBtnClick">跳转到新页面</button>
Js文件:
onBtnClick:function(){
var that=this;
console.log('onBtnClick');
wx.navigateTo({
url:'index?oldval='+that.data.lastval+'&val=hello,bright789!!!&showBtn=false',
success: function(res){
// success
console.log('onBtnClick success() res:');
},
fail: function() {
// fail
console.log('onBtnClick fail() !!!');
},
complete: function() {
console.log('onBtnClick complete() !!!');
// complete
}
})
}
此外附上官方文档说明:
效果如下图：
最后附上完整的js和wxml文件:
Js文件:
Page({
data:{
lastval:{},
showBtn:false,
},
onLoad:function(options){
// 生命周期函数--监听页面加载
var that=this;
console.log('onLoad is invoked');
console.log(options);
that.setData({
lastval:options.val,
oldval:options.oldval,
showBtn:(options.showBtn=="true"?true:false),
})
},
onBtnClick:function(){
var that=this;
console.log('onBtnClick');
wx.navigateTo({
url: 'index?oldval='+that.data.lastval+'&val=hello,bright789!!!&showBtn=false',
success: function(res){
// success
console.log('onBtnClick success() res:');
},
fail: function() {
// fail
console.log('onBtnClick fail() !!!');
},
complete: function() {
console.log('onBtnClick complete() !!!');
// complete
}
})
}
})
Wxml文件:
<view class="page">
<text class="page__title">新数据:{{lastval}}</text>
<view class=" {{oldval ?'bright789_widgets_show':'bright789_widgets_hide'}}"></view>
<text class="page__title">旧数据:{{oldval}}</text>
<view class="bright789_widgets_hide {{showBtn ?'bright789_widgets_show':''}}">
<button type="default" bindtap="onBtnClick">跳转到新页面</button>
</view>
</view>