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"

相关推荐
知识分享小能手8 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate16 分钟前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛16 分钟前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒1 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
2501_916008891 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
袁煦丞2 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧2 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____2 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �2 小时前
前端转Java,从0到1学习教程
java·前端·学习