JSON.parse解析json出错的替代方案：小程序上解析json出bug，而在微信开发者工具上解析json正常。

我们有时候需要将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里接收处理得到的数据，如下图：

尤其是图片等数据不建议缓存base64到本地，因为数据量太大了，很容易就超过1MB,因为我们用的wx.setStorage和wx.setStorageSync存储数据有限，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。如果图片用base64很容易造成数据超出1MB，到时候就会出现手机小程序上解析json出bug，而在微信开发者工具上解析json正常。