uniApp页面传值的三种方式

5,185 阅读1分钟

1、通过URL进行传参,把要传递的信息拼接在URL后面

<navigator url="/pages/user/order?activityId=10000" class="flex br pr" hover-class="op9">
	<view class="cover">
		<view>抢购订单</view>
		<view class="fz12 main">十拼三订单</view>
	</view>
	<view class="iconWH">
		<image class="w100p h100p" src="../../static/userCenter/rushBuy.png" mode="widthFix">
		</image>
	</view>
</navigator>

以上示例是静态传参,动态传参使用反斜杠结合${}传参

<view class="flex lt">
	<navigator :url="`/pages/goodsInfo/goodsInfo?id=${item.prdId}`" 
	class="pr" v-for="(item,index) in newGoodsList" :key="index">
		<oss-img type="aspectFill" :width="300" :height="300" :file="item.facePhoto" 
		 mode="widthFix" class="w120 h120 bd rds8 hidden shadow whiteBg"></oss-img>
	</navigator>
</view>

注:动态传参时在js模板中没有双引号,url前也没有:符号

goGoodsInfo({stock,product}){
	if(stock==0){
		uni.showToast({
			title:"该商品已售罄",
			icon:"none"
		})
		return
	}
	uni.navigateTo({
		url:`/pages/goodsInfo/goodsInfo?id=${product.prdId}`
	})
},

url传参的优点是:取值方便可以跨域,缺点是:取值长度有限制,长度过大时会被截取掉

2、将数据存储在本地缓存中,可以在一个页面中使用另一个页面的存储的数据.

uni.setStorageSync("goodsData", item.products);

在对应页面中从本地缓存中取出该数据

uni.getStorageSync("goodsData");

3、通过eventChannel向被打开页面传送数据

success: function(res) { 
   res.eventChannel.emit('acceptDataFromOpenerPage', { data}) 
}

为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据

events: {
    acceptDataFromOpenedPage: (data) => {
    console.log("data: ",data);	
    this.address = data ;
   }
 }