uniapp页面传值

﹏ヽ暗。殇╰゛Y 2022-11-17 13:56 264阅读 0赞

## 一、传递单个或者多个参数 ##

**商品列表页：**

// 商品列表页传递id 跳转到相应的商品详情页面
    getGoodsDetails(id){ 
    	uni.navigateTo({ 
    		url: `getGoodsDetails?id=${ id}`
    	});
    }
    // 注：如果需要传递多个参数使用&符号连接即可，示例：
    getGoodsDetails(id, item){ 
    	uni.navigateTo({ 
    		url: `getGoodsDetails?id=${ id}&item=${ item}`
    	});
    }

**商品详情页面：**

// 商品详情页通过 onLoad 生命周期中接传递过来的参数 id
    onLoad(option){ 
    	console.log('上一个页面传递过来的参数', option)
    	console.log('id', option.id)
    	console.log('item', option.item)
    	// 接下来就是你需要该id做些什么，比如通过id查询到该详情等
    }

## 二、传递数组或者对象 ##

如需要传递的参数有很多时，由uniapp 跳转页面api 的 url 有长度限制，需使用以下方式进行数据传递：

**商品列表页面：**

// item 为该列表的每一项的数据对象；encodeURIComponent 为uniapp 提供的api
    getGoodsDetails(item) { 
    	uni.navigateTo({ 
    		 url: `getGoodsDetails?item=${ encodeURIComponent(JSON.stringify(item))}`,
    	});
    }

**商品详情页面：**

// 同样onLoad 生命周期中进行接收， decodeURIComponent 为uniapp 提供的api
    onLoad(option) { 
    	const item = JSON.parse(decodeURIComponent(option.item));
    	console.log('上一个页面传递过来的参数对象'，item );
    	// 接下来就是你需要该对象数据做些什么，当然这里你可以直接赋值给data绑定的数据
    	this.objData = item;
    }

注意：传递数据的时候必须使用 **JSON.stringify** 将其转为 JSON 字符串，然后接收的时候也必须使用 **JSON.parse** 来进行解析！  
操作数组也是一样的，因为数组也是对象