浅谈uni-app页面传值问题

前言

• 作为一个前端开发者，现在大前端的概念比较深入人心，比如小程序、Android和iOS跨端，前端H5等。而最近在使用uni-app跨端开发App，遇到些问题分享一下。

uni-app页面传值

传递基础类型数据

// A页面-传递参数
let value = "参数值";
uni.navigateTo({
  url:`/pages/home/index?data=${value}`
});
// B页面-接收参数
onLoad(options) {
  let value = options.data;
}

传递接引类型数据

// A页面-传递参数
let obj = {
	value:"参数值"
};
uni.navigateTo({
  url:`/pages/home/index?data=${JSON.stringify(obj)}`
});
// B页面-接收参数
onLoad(options) {
  let obj = JSON.parse(options.data);
}

传递数据过长或者数据包含特殊字符

• 当你的数据过长传递数据（比如：base64的图片数据）或者特殊数据（比如：?），如果用以上两种方法时会发现接收到的值不完整。
• 所以这个时候我们可以加上encodeURIComponent和decodeURIComponent方法

// A页面-传递参数
let obj = {
	value:"???"
};
uni.navigateTo({
  url:`/pages/home/index?data=${encodeURIComponent(JSON.stringify(obj))}`
});
// B页面-接收参数
onLoad(options) {
  let obj = JSON.parse(decodeURIComponent(options.data));
}

• 嗯，暂时就这些，继续踩坑中…