Error in onLoad hook: “URIError: URI malformed“ found in…报错处理以及完善uniapp针对对象传参

使用uniapp传参的过程中遇到这么一个问题,当我们需要传整个对象作为参数时,我会先将这个对象先编码,然后再解码,从而获取到怎么参数,平常实操的时候也没有遇到过问题,但是今天测试的时候,刚好一个数据碰巧,就报错了,报错内容就是:

复制代码
//跳转前页面的方法
toDeviceDetail(deviceInfo) {
    //传参对象,使用encodeURIComponent编码
    let query = encodeURIComponent(JSON.stringify(deviceInfo))
	uni.navigateTo({
		url:'/pages/....../deviceDetail?deviceQuery='+ query
	})
},
 
 
// 跳转后页面获取的参数的方法
onLoad(options) {
    let obg ={}
    // 获取传递的对象参数,使用decodeURIComponent解码,并转为对象
    obj = JSON.parse(decodeURIComponent(options.deviceQuery));
}

bug原因是,如果编码的对象中的参数有"%",那么就会对编码跟解码造成问题,从而报错

解决方案:正常解码,编码时对所有"%"进行单独处理,手动转换为"%25",代码如下:

复制代码
toDeviceDetail(deviceInfo) {
    //传参对象,使用encodeURIComponent编码
    let str = JSON.stringify(deviceInfo)
    //注意这里------------------------------------------------------------------
    str = str.replace(/%/g, '%25')
    //这里---------------------------------------------------------------------------------
    let query = encodeURIComponent(str)
	uni.navigateTo({
		url:'/pages/....../deviceDetail?deviceQuery='+ query
	})
},

最终实现在uni-app中跳转页面并传递对象参数的需求 解决这个问题的关键就是需要手动转换为"%25"

相关推荐
程序猿阿伟1 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
尘觉1 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge2 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
sean3 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636023 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii3 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够3 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
学会煎墙4 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
太过平凡的小蚂蚁5 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
淡淡蓝蓝5 小时前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书