＜web-view＞跳转url参数丢失

原创已于 2024-04-30 11:55:14 修改 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #uni-app #微信小程序

于 2024-04-29 15:16:43 首次发布

文章讲述了小程序中web-view跳转外部链接时，如何避免因参数传递导致的丢失问题，通过在A页面使用encodeURIComponent编码URL，在B页面decodeURIComponent解码，确保参数完整传递。

我们都知道小程序在跳转外链时只能通过web-view跳转

<web-view src="https://www.example.com"></web-view>

如果链接是在A页面请求到，传递到B页面中赋值给src,就容易出现参数丢失的现象

//A页面
src = 'https://www.example.com?id=3'
uni.uni.navigateTo({
		url: `/home/B?url=${src}`
})
//B页面
onLoad(e){
    this.url = e.url
}
//此时的url = 'https://www.example.com'  ?后边的参数丢失

一直跳转出错，后来才发现地址中参数丢失，？后面的参数丢失

解决方法：

传递地址时使用encodeURIComponent()编码，decodeURIComponent()解码

//A页面
src = 'https://www.example.com?id=3'
uni.uni.navigateTo({
		url: `/home/B?url=${encodeURIComponent(src)}`
})
//B页面
onLoad(e){
    this.url = decodeURIComponent(e.url)
}

这样传递过来的地址参数不会丢失