微信小程序带参传递的界面跳转的两种方式

之前有个微信小程序群友提出一个问题，就是在使用跳转时，在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>