微信小程序分享页面，decodeURIComponent（）解码的参数的坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序分享页面，decodeURIComponent（）解码的参数的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

但是最近却出现一个问题，小程序二次分享页面竟然打不开了，查其原因发现是二次分享时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))}`;

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

仅仅用来记录开发时所遇到的坑～文章来源地址https://www.toymoban.com/news/detail-495336.html

到了这里，关于微信小程序分享页面，decodeURIComponent（）解码的参数的坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！