我们有时候需要将json字符串转为json对象,我们通常用eval或new Function或JSON.parse或parseJSON或这四种方案都可以达到目标,如下所示:
// JSON字符串:
const str = '{ "name": "xiaoming", "sex": "man" }';
// JSON对象:
const obj = {
"name": "xiaoming", "sex": "man" };
//要使用上面的str,必须使用下面的方法先转化为JSON对象:
// 由JSON字符串转换为JSON对象
const obj1 = eval('(' + str + ')');
或者
const obj1 = (new Function("return " + str))();;
或者
const obj1 = str.parseJSON();
或者
const obj1 = JSON.parse(str);
如果我们做web端项目,上面的方法都没问题,由于JSON.parse无法识别某些url或者消息内容中的特殊字符,所以特别容易报错,在JSON.stringify()之后将变量使用encodeURIComponent函数处理,encodeURIComponent()
函数可把字符串作为 URI 组件进行编码。在目标页面接收时用decodeURIComponent对URI
组件进行解码,后通过JSON.parse()将变量还原。如下所示,请求拿到后端数据后需要将其缓存到本地,这里有个坑就是 wx.setStorageSync和wx.setStorage单个key存储的数据最大1mb,如果你拿到后端的数据大于1mb,你直接存本地就会导致真机上报错,而微信开发者工具上可能不会报错,所以你看到了我这里用了try catch , 除此之外,我还把数据通过路由wx.reLaunch携带传递给下一页
let obj = res.data.result[0]
wx.setStorageSync('oldFormDetailTitle', obj.title)
//wx.setStorageSync单个key最大存储为1MB
try {
wx.setStorageSync('oldFormJson', obj.formJson)
} catch (e) {
}
wx.setStorageSync('taskItemResultId', obj.taskItemResultId)
wx.reLaunch({
url:
'/pages/check/check_detail_old?oldFormJson=' +
encodeURIComponent(JSON.stringify(obj.formJson)),
})
,如果是我们做微信小程序那就不能用上面的方法来进行字符串解析,用了也可能会报各种错,基于安全考虑,小程序中不支持动态执行 JS 代码,如下官网所述:
那这个时候我们就需要自定义一种方法去解析字符串:
//util.js
//关于JSON.parse解析报错处理方案
function strToJson(jsonStr) {
let obj = {
}
if (
jsonStr &&
Object.prototype.toString.call(jsonStr) == '[object String]' &&
jsonStr != 'null'
) {
jsonStr = jsonStr.replace(/\r/g, '\\r')
jsonStr = jsonStr.replace(/\n/g, '\\n')
jsonStr = jsonStr.replace(/\t/g, '\\t')
jsonStr = jsonStr.replace(/\\/g, '\\\\')
jsonStr = jsonStr.replace(/\'/g, ''')
jsonStr = jsonStr.replace(/ /g, ' ')
jsonStr = jsonStr.replace(/</g, '$lt;')
jsonStr = jsonStr.replace(/>/g, '$gt;')
obj = JSON.parse(jsonStr)
}
return obj
}
module.exports = {
strToJson,
}
然后使用的话需要先引入这个util.js
//my.js
var util = require('../../utils/util.js')
接着刚刚的业务需求,我们在上级页面通过路由传递过来,在新页面需要在onload里接收处理得到的数据,如下图: