解决微信小程序页面间传递JSON数据导致的问题
问题背景:笔者要在微信小程序的a页面传递a页面的json数据给b页面,但是却在传递数据的过程中出了问题
a页面的dataList存的json数据,数据如下
{
"nb":"ok:=ok",
"detail":[
{
"age":18
},
{
"age":19
},
{
"age":20
}
]
}
笔者采用的页面间的传值方式是传统的wx.navigateTo,并且在url后带上相关参数,传递给b页面,然后在b页面的onLoad函数里通过options.参数名称获取传过来的值。
上面是一般参数的传递方法,但是要在页面间传递json对象的话,先得在a页面用json.stringify()方法将json对象转化成字符串,然后通过url后面带参数的方式传递,之后在b页面通过options.参数名称获取数据,拿到数据后用json.parse()方法将json格式的字符串转化成json对象,然后才能够通过对应的key来获取value。
但是,对于页面间json数据的传递,还要特别注意一点,因为在我们的json数据可能会有一些特殊的字符比如说( ;/ ? : @ & = + $ ),所以我们在用json.stringify和json.parse之要使用这两个方法encodeURIComponent和decodeURIComponent。具体解释见下方:
//a页面的json数据为dataList
var that = this;
//首先将json对象转化为json格式的字符串
var it = JSON.stringfiy(that.data.dataList);
//然后将字符串编码为URI组件,因为json字符串里会有特殊字符会干扰页面对uri的解析
var item = encodeURIComponent(it);
wx.navigateTo({
url:'pages/b/b?dataList='+item
});
//前提b页面的data里有一个叫做myData变量
//在b页面的onLoad方法里
onLoad:function(options){
var that = this;
//通过options获取json格式的字符串
var dataStr = options.dataList;
//将字符串解码
dataStr = decodeURIComponent(dataStr);
//将json格式的字符串转化成json对象
var dataJson = JSON.parse(dataStr);
//将获取到的数据给页面data
that.setData({
myData:dataJson
});
}