微信小程序页面数据传递的两种方法

最新推荐文章于 2024-07-03 19:53:02 发布

肚子饿啊

最新推荐文章于 2024-07-03 19:53:02 发布

阅读量930

点赞数 1

分类专栏：前端文章标签：小程序开发页面间数据传递

本文链接：https://blog.csdn.net/qq_34192032/article/details/102694615

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.通过url传数据

//页面A
<navigator class="goodsItem" :url="'/pages/detailpage/detailpage？data='
+encodeURIComponent(JSON.stringify(item))" v-for="(item,index) in detaiDataList" :key="index">

//页面B
onLoad(option) {
			const data = JSON.parse(decodeURIComponent(option.data));
			console.log('data:',data)
		},

在这里插入图片描述

2.页面通讯

eventchannel是微信小程序2.7.3之后加入的新功能，可以实现页面之间双向通信
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

//页面A
wx.navigateTo({
	url:'/pages/detailpage/detailpage',
		events:{
			getdatafrompageB:function(data){
				console.log('getdatafrompageB:',data)
			}
		},
		success: function(res) { 
			res.eventChannel.emit('senddatatopageB',{data:'我是pageA发送给pageB的数据'})
		  }
	})

//页面B
onLoad(option) {
    let eventChannel = this.$scope.getOpenerEventChannel();
	eventChannel.emit('getdatafrompageB',{data:'我是pageB发送给pageA的数据'})
    eventChannel.on('senddatatopageB', function(data) {
      console.log(data)
    })
},