uni-app navigateTo的url地址在H5和APP端会自动反序列化，微信小程序中不会

uni-app navigateTo的url地址在H5和APP端会自动反序列化，微信小程序中不会

开发环境 版本号 项目创建方式
Windows HBuilderX
3.2.16 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

浏览器平台：Chrome

浏览器版本：96.0.4664.110（正式版本） （64 位）

---

### 示例代码：

```javascript
let options = {
"id": "834",
"spaceId": "244",
"title": "ttt",
"pic": "/uploadimg/2021/06/07/20210607115700_3687.png",
"options": "%7B%22type%22:%220%22,%22pagetype%22:%220%22,%22pagename%22:%220%22,%22isLogin%22:%220%22,%22outlink%22:%22http://www.1000good.com%22,%22istitle%22:%220%22,%22title%22:%22%E5%8D%83%E5%A5%BD%E7%BD%91%22,%22finsh%22:%7B%22isshow%22:%220%22,%22text%22:%22%E9%80%80%E5%87%BA%22,%22tcolor%22:%22#ffffff%22,%22size%22:%2280%22,%22radius%22:%2220%22,%22bgcolor%22:%22#ff0000%22,%22x%22:%22left%22,%22Y%22:%22bottom%22,%22marginx%22:%2210%22,%22marginy%22:%2210%22%7D%7D",
"clicktype": "1",
"addtime": "18小时前",
"advName": "start_banner",
"Sort": "1",
"ncode": ""
}
let param = encodeURIComponent(JSON.stringify(options))
console.log('param', param)
uni.navigateTo({
url: `/pages/news/blank/blank?isTitle=true&options=${param}`
})

操作步骤：

复制示例代码，跳转到另一个页面，即可看到看到结果

预期结果：

uni.navigateTo参数原样传送

实际结果：

uni.navigateTo参数在H5和安卓app中都会自动反序列化

bug描述：

在调用uni.navigateTo之前，把url 序列化，

let param=encodeURIComponent (JSON.stringify(options))
console.log('param',param)
uni.navigateTo({
url:`/pages/news/blank/blank?isTitle=true&options=${param}`
})

收到参数后，反序列化：

onLoad(e) {
console.log('e.options',e.options)
console.log('this.clicktype',e.options.clicktype)
this.options=JSON.parse(decodeURIComponent(e.options)) ;
console.log('this.options',this.options)
this.clicktype=this.options.clicktype;
console.log('this.clicktype',this.clicktype)
this.fragment=e.options;
this.isTitle= e.istitle=='true'?true:false;
},

在h5中和app中，不经过反序列化，会自动的反序列化，如果属性里边包含有序列化的，也都会自动反序列化，会造成json转object错误。在微信小程序中是正常的。


更多关于uni-app navigateTo的url地址在H5和APP端会自动反序列化，微信小程序中不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

尝试用全局变量承接一下试试

更多关于uni-app navigateTo的url地址在H5和APP端会自动反序列化，微信小程序中不会的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决方法是有很多种，但还是希望官方能够修复一下

这是一个跨端差异问题，uni-app 在 H5 和 App 端会自动对 URL 参数进行 decodeURIComponent 解码，而微信小程序不会。

原因分析：

  1. H5/App 端：底层使用 window.location 或原生导航，浏览器和 App 容器会自动解码 URL 参数。
  2. 小程序端：使用微信小程序原生导航，参数保持原始编码状态。

解决方案： 统一使用 encodeURIComponent 编码参数，在接收页面统一使用 decodeURIComponent 解码：

// 发送页面
let param = encodeURIComponent(JSON.stringify(options))
uni.navigateTo({
  url: `/pages/news/blank/blank?options=${param}`
})

// 接收页面
onLoad(e) {
  let optionsStr = e.options
  // 统一解码处理
  try {
    if (typeof optionsStr === 'string') {
      optionsStr = decodeURIComponent(optionsStr)
    }
    this.options = JSON.parse(optionsStr)
  } catch(err) {
    console.error('参数解析错误', err)
  }
}
回到顶部