当前位置：网站首页>小程序路由传参技能升级

小程序路由传参技能升级

2022-08-05 17:54:00 【51CTO】

方案一:

//A页面 实现跳转

      jump: function () {

         let a = 1;

         let b = 2;

      wx.navigateTo({

            url: '/page/b/b?data1=' + a + '&data2=' + b

       })

  }

　　//B页面 接收参数
         onLoad: function (options) {
                //此时A页面传递的参数由options接收，A页面传递参数时的参数名分别叫data1和data2,所以B页面想拿到A页面传递的参数拿对应的参数名即可
                  let data1 = options.data1;
                  let data2 = options.data2;
 
              console.log(data1);//输出的结果是 1
              console.log(data2);//输出的结果是 2
 
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

方案二:

a页面
 godeposit(e) {
      // console.log(e.currentTarget.dataset)
      let aa =JSON.stringify(e.currentTarget.dataset);
      app.navigateTo("pages/my/deposit/deposit?data1="+ aa)
    }
b页面
onLoad: function (options) {
    let a =JSON.parse(options.data1);
     console.log(a)
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

方案三:最新方案,解决大数据传输问题:
参考文档: https://developers.weixin.qq.com/miniprogram/dev/api/route/EventChannel.html

传参模式:

let obj = {
  disease_ids: strIds,
  disease_name: strNames,
}
uni.navigateTo({
 // url:`/packageA/pages/estimateQuestion/estimateQuestion?disease_ids=${strIds}&disease_name=${strNames}`,
  url:`/packageA/pages/estimateQuestion/estimateQuestion`,
  success: function (res) {
    res.eventChannel.emit('getData', obj)  //触发事件
  }
})

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

接收模式:

onLoad: function(options) { //接收页面
	const eventChannel = this.getOpenerEventChannel();
	eventChannel.on("getData",data => {
	 	console.log(data)
	});
}

     1.
2.
3.
4.
5.
6.