浅谈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));
}
  • 嗯,暂时就这些,继续踩坑中…
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页