微信小程序分享页面,decodeURIComponent()解码的参数的坑 您所在的位置:网站首页 encodeurlcomponent在线 微信小程序分享页面,decodeURIComponent()解码的参数的坑

微信小程序分享页面,decodeURIComponent()解码的参数的坑

2024-02-17 09:54| 来源: 网络整理| 查看: 265

相信不少同学在开发微信小程序的开发中,有不少同学涉及到分享的功能,分享api我们可以通过查阅微信官方文档知道onShareAppMessage方法

其中这个方法接受一个path参数,也就是我们要分享的页面,当path带参数时,我们知道 ?后面的参数会被浏览器忽略掉,所以我们一般会对其进行encodeURIComponent,使用时进行相应的decodeURIComponent便可

但是最近却出现一个问题,小程序二次分享页面竟然打不开了,查其原因发现是二次分享时decodeURIComponent不起作用

可是明明拿到参数后decodeURIComponent了呀,为何decodeURIComponent后的参数还是未解码的

诡异的是,第一次分享的时候没有问题,这问题仅出现在二次分享时

于是,开始一顿排查,终于找到原因 

原来浏览器对链接带的参数又编码了一次,解码的时候需要解两次码才能得到原先的数据 

于是我三下五除二又加了一层解码,立马进行验证,

const { url = "" } = this.$router.params; const webUrl = `${HOST}${decodeURIComponent(decodeURIComponent(url))}`;

惊喜,二次分享成功打开页面,打印出来的参数也是正常解码后的参数

但是我立马又联想到,三次四次五次等以上分享呢,果断测试了一下,上面的代码果然不顶用,这就要求我们进行一个判断了

我这边用到了递归来解决,具体实现如下

getUrl (url) { if (url.indexOf('%') < 0) { return url } else { const newUrl = decodeURIComponent(url) return this.getUrl(newUrl) } } Ï const { url = "" } = this.$router.params; const webUrl = `${HOST}${getUrl(url))}`;

当然,小伙伴们还可以通过循环去解决,道理是一样的,我这里就不做展示了

仅仅用来记录开发时所遇到的坑~



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有