uniapp微信小程序路由url参数报错(encodeURIComponent)

当在uniapp中遇到由于URL参数过多过长引发的Error in onLoad hook错误时,可以使用encodeURIComponent来编码参数。在跳转页面时,将对象转化为JSON字符串并编码,然后在接收页面解码并解析。注意JSON.stringify可能存在缺陷,应当谨慎使用。这种方法有效避免了因参数长度限制而产生的问题。

uniapp 开发这个 Error in onLoad hook: “SyntaxError: Unexpected end of JSON input“

 这个问题是因为JSON.parse无法识别某些url中的特殊字符造成的

在我们开发微信小程序的时候。

很多时候,都是要去传参,如果传参一个,两个还好,但是多了怎么办

路由跳转url传参长度过长导致页面接收参数报错

怎么解决这个问题呢,我选择使用encodeURIComponent

跳转传参页面跳转的时候

			let URLcoursePay = encodeURIComponent(JSON.stringify(e))
			let url = `/pagesA/course/course?item=${URLcoursePay}`
			uni.navigateTo({
				url
			})

接收页面接收到参数处理数据

			let optionItem = decodeURIComponent(option.item)
			let Obj=JSON.parse(optionItem)
			console.log(Obj);

注意  我这里把对象转换成字符串用的是   JSON.stringify

JSON.stringify 是存在缺陷的,具体存在的问题,大家可以去搜一下

### UniApp 微信小程序中的路由实现 在UniApp框架下开发微信小程序时,页面之间的跳转以及参数传递主要依赖于`<navigator>`组件和API函数来完成。对于简单的页面切换操作可以直接利用内置标签,在HTML结构内指定目标地址;而更复杂的场景则推荐采用编程式的导航方法。 #### 页面间的基础跳转 当仅需执行基本的页面转换而不涉及数据交换的情况下: - **使用 `<navigator>` 组件** 可以直接嵌入到页面布局中定义链接指向其他页面,语法如下所示[^1]: ```html <!-- HTML --> <navigator url="/pages/targetPage/targetPage">前往目标页</navigator> ``` - **调用 `uni.navigateTo()` 方法** 如果希望从JavaScript逻辑层发起请求,则可以借助此API来进行无刷新加载新视图的操作: ```javascript // JavaScript uni.navigateTo({ url: '/pages/targetPage/targetPage' }); ``` #### 带有参数的高级跳转 为了满足实际应用需求,经常会在不同界面之间共享某些特定的信息作为查询条件或是初始化配置项等用途。此时可以通过URL附加键值对的方式携带额外的数据给下一个访问对象处理。 - **发送端设置参数** 当前页面准备向另一页面传输变量时,只需按照标准格式拼接字符串即可。 ```html <!-- HTML --> <navigator url="/pages/mine/mine?id=1&name=uniapp">带参跳转</navigator> ``` 或者是在脚本里动态构建路径并触发过渡效果: ```javascript // JavaScript let id = 1; let name = "uniapp"; uni.navigateTo({ url: `/pages/mine/mine?id=${id}&name=${encodeURIComponent(name)}` }); ``` - **接收端获取参数** 到达目的地之后,可通过全局事件监听器监听页面初次渲染完毕后的回调函数`onLoad(options)`捕获这些临时存储起来待解析的内容。 ```javascript export default { onLoad:function(option){ console.log('收到参数:', option); this.id = options.id || ''; this.name = decodeURIComponent(options.name || ''); } }; ``` 以上就是关于如何运用UniApp技术栈搭建高效灵活的小程序内部导航体系的关键知识点介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值