微信小程序在界面中传递URL时,传递的url里有‘?’的处理办法
我有一个obejct,需要在微信小程序的页面之间传递,object中有?
,description: "青山隐隐泛中流,洞天云霄何处生?"
,如下:
var object = {
name: "小明"
artistavatar: "https://daotechio.oss-cn-beijing.aliyuncs.com/xinyang/artist/xianyuying.png"
artistid: "2435dd65-1f6b-4f63-b0f8-83ac30f3fde2"
description: "青山隐隐泛中流,洞天云霄何处生?"
masterpiece: null
name: "云巅"
number: "XYY18A009-12572"
paintingid: "5e782193-a538-41b1-95db-cd5afc5a5329"
picurl: "https://daotechio.oss-cn-beijing.aliyuncs.com/xinyang/XYY18A009-12572.jpg"
position: "人民艺术家、功勋艺术家"
size: "125cm*72cm"
thumbs: 1
}
在微信小程序的页面之间传值的时候,会把?分解出来,导致传递的值不全。
解决办法
通过encodeURIComponent(URIstring)
编码,decodeURIComponent(URIstring)
解码。
核心代码:
传递值的页面:
var encodeObject = JSON.stringify(object);
encodeObject = encodeURIComponent(encodeObject);
wx.navigateTo({
url: '/pages/paintDetails/paintDetails?data=' + encodeObject
})
接收值得页面:
onLoad: function (options) {
var data = decodeURIComponent(options.data);
data = JSON.parse(data);
this.setData({
paintDetail: data
})
}
}
详细分解
1. 将object 转化为字符串
var newObject = JSON.stringify(object);
2. 确定object 中确实存在‘?’
因为我用的是同一个组件,这个组件会重复使用,所以先确定传的值是否存在‘?’,避免无用的编码解码。
var index = newObject.indexOf('?');
//通过if判断执行不同的代码,如果有,就多传一个encode参数,在传递的页面,通过这个值,判断需不需要解码。
if(index != -1){
var encodeObject = encodeURIComponent(newObject);
wx.navigateTo({
url: '/pages/paintDetails/paintDetails?data=' + encodeObject + '&encode=true'
})
}else {
wx.navigateTo({
url: '/pages/paintDetails/paintDetails?data=' + newObject
})
}
3. 在接收值的页面
onLoad: function (options) {
if (options.data){
if (options.encode){ //如果有这个值,就是需要解码
var data = decodeURIComponent(options.data);
data = JSON.parse(data);
}else { // 没有就不用解码
var data = JSON.parse(options.data);
}
this.setData({
paintDetail: data
})
}
},