之前有個微信小程式群友提出一個問題，就是在使用跳轉時，在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>