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

时间:2021-12-08 16:57:50

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