浅谈 uni-app 页面传值问题

目录

• 目录
  • 前言
  • 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));
}

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