踩坑：基于vue的webapp项目中遇到的微信分享问题

问题描述：最近在做一个基于vue的webapp项目，vue-router采用默认的hash模式。项目通过微信公众号的链接打开，但是在微信分享页面的时候，出现了问题：链接只保留“#”前面的内容，默认跳转到首页，而“#”后面的URL直接被截断了，导致不能分享子页面。

网上看了很多解决方法，最后采用了一种重定向的方式：将当前页面的URL放在分享链接的请求参数中，再通过重定向跳转

link: window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href),

只要在 /static/html 目录下新建一个 redirect.html，附上如下代码即可

// redirect.html
<script>
  let url = location.href.split('?')
  let params = url[1].split('&') // 截取URL参数部分
  let data = {}
  params.forEach((item) => {
      let p = item.split('=')
      data[p[0]] = p[1]
  })
  if (!!data.app3Redirect) {
      self.location = decodeURIComponent(data.app3Redirect)
  }
</script>

参考：https://blog.youkuaiyun.com/u013301742/article/details/81179137

https://blog.youkuaiyun.com/qq_37462176/article/details/81357964

 

在此之前，对微信分享也是一无所知，借此机会也好好研究了一把，就不写详细的教程了，只罗列一些我用到的

官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

后端代码参考：https://blog.youkuaiyun.com/u013713832/article/details/73649750

前端代码参考：https://github.com/symenywong/vue-wxShare

没采用，但是可以看看：https://blog.youkuaiyun.com/qq_33744228/article/details/82887872​​​​​​​

这个基本是我看到的最详细的教程了，可惜与vue项目不搭，但是值得参考：

http://www.cnblogs.com/backtozero/p/7064247.html