微信小程序双引号字符串加密后传值 encodeURIComponent和decodeURIComponent

var str = '<p><img src="https://*****.oss-cn-beijing.aliyuncs.com/2021012216344225e5c4833.png"/></p>'

//父组件加密
var encodeUrlParameter = encodeURIComponent(str) 
console.log(encodeUrlParameter);


//子组件解密
var urlParameter = decodeURIComponent(encodeUrlParameter);
console.log(urlParameter);

 

### 解决微信小程序开发中的 JSON 错误问题 在微信小程序开发中,JSON 数据的处理可能会遇到一些常见错误,例如解析失败、数据格式不正确或对象访问错误。以下是针对这些错误的详细解决方案。 --- #### 1. **wx.uploadFile wx.request 的区别** `wx.uploadFile` 不会对返回的 JSON 字符串进行自动解析,因此 `res.data` 实际上是一个 JSON 字符串,而不是 JavaScript 对象[^1]。这意味着不能直接使用点操作符(`.`)访问其属性,例如 `res.data.error_code`。 相比之下,`wx.request` 会自动将返回的 JSON 字符串转换为 JavaScript 对象,因此可以直接访问 `res.data.error_code`。 **解决方法:** 对于 `wx.uploadFile`,需要手动调用 `JSON.parse()` 将字符串解析为对象: ```javascript wx.uploadFile({ url: 'https://example.com/upload', filePath: tempFilePath, name: 'file', success(res) { try { const data = JSON.parse(res.data); // 手动解析 JSON 字符串 if (data.error_code === 0) { wx.showToast({ title: '上成功' }); } } catch (e) { console.error('JSON 解析失败', e); } }, fail(err) { console.error('上失败', err); } }); ``` --- #### 2. **页面跳转时 JSON 数据的编码与解码** 在页面跳转时递复杂数据(如 JSON 对象),可能会遇到解析失败的问题,例如 `SyntaxError: Unexpected end of JSON input`[^3]。这是因为 URL 参数中的特殊字符未被正确编码。 **解决方法:** 在递 JSON 数据时,需要先将其转换为字符串并进行 URL 编码,接收方则需要解码后再解析为对象: ```javascript // 发送方 const param = { name: "&我是特殊字符&" }; const json = encodeURIComponent(JSON.stringify(param)); // 转码 wx.navigateTo({ url: `/pages/detail/detail?row=${json}` }); // 接收方 Page({ onLoad(options) { const data = decodeURIComponent(options.row); // 解码 try { const result = JSON.parse(data); // 解析为对象 console.log(result); } catch (e) { console.error('JSON 解析失败', e); } } }); ``` --- #### 3. **JSON.parse() 报错的常见原因及解决方法** `JSON.parse()` 报错通常是因为输入的字符串不是有效的 JSON 格式。以下是一些常见原因及解决方法: - **字符串未正确闭合**:JSON 字符串必须以 `{}` 或 `[]` 开头结尾,并且键对需要用双引号包裹。 - **特殊字符未转义**:JSON 字符串中的特殊字符(如换行符 `\n` 或双引号 `"`)需要转义。 - **多余的逗号**:JSON 格式中不允许出现多余的逗号。 **示例代码:** ```javascript try { const jsonString = '{"key":"value"}'; // 正确的 JSON 字符串 const obj = JSON.parse(jsonString); console.log(obj); } catch (e) { console.error('JSON 解析失败', e.message); // 捕获解析错误 } ``` --- #### 4. **后台返回数据的校验** 如果后台返回的数据格式不正确,也可能导致前端解析失败。例如,后台可能返回了非 JSON 格式的字符串或 HTML 内容。此时需要在前端增加校验逻辑。 **解决方法:** 在解析前检查数据是否为合法的 JSON 字符串: ```javascript function isValidJSON(str) { try { JSON.parse(str); return true; } catch (e) { return false; } } wx.request({ url: 'https://example.com/api', success(res) { if (isValidJSON(res.data)) { const data = JSON.parse(res.data); console.log(data); } else { console.error('返回的数据不是合法的 JSON 格式'); } } }); ``` --- ### 总结 通过以上方法可以有效解决微信小程序开发中常见的 JSON 错误问题。关键在于理解 `wx.uploadFile` `wx.request` 的差异、正确处理页面跳转时的 JSON 数据编码与解码,以及增加必要的校验逻辑以避免解析失败。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值