vue单页应用（history模式）获取微信签名

2017-08-11

摘要：在网上搜了很多关于spa单页应用获取微信签名的资料，大部分解决ios和安卓机的兼容方法都是在hash模式下的，有人使用history的解决方法是将需要自定义分享的页面单独做一个页面。但是，我想使用history模式，又不想单独写一个页面该怎么办？

问题

hash模式下，项目路径中带有#号的部分，微信可能会在其前面加一个？号，而且分享后的链接微信会添加一些参数。
history模式下，从主页进入和从分享页进入相同的页面当路径有时候不一样。即相同的路径在进入页面方式不同的情况下，微信中显示的页面有时是路由的url，有时是页面的url。比如，我的单页页面叫route.html，但我访问的url是xxx/article/xx时，路径有时候（从分享链接进入）是xxx/article/xx，还有时候（网站首页进入）是xxx/route.html，这时微信的签名就会出错。当然进入分享的页面链接时微信也会添加一些参数。

解决方法

hash模式下的参考：
在单页应用(SPA)上调微信支付接口，地图接口，分享接口等。都是坑啊！
Vue单页式应用(Hash模式下)实现微信分享

history模式下：
获取签名的路径出错，无非是两种情况：匹配路由的路径和页面资源路径。当其中一个签名出错，直接换另一个路径即可。大部分情况下没有问题，少数情况下还会发生错误，并不是100%没问题。但进入首页后刷新一下，问题就莫名其妙消失了……
1.将额外的参数截取保存后刷新
2.在App.vue中监听路由，可以将不同的自定义分享页面分开定义
3.先向后台发送包含路径的请求，返回签名等信息，如果失败（wx.error）则换另一个路径再次请求

export default {
  name: 'app',
  data () {
    return {
      data: {
        title: 'XXX',
        link: 'http://xxx/home/index',
        imgUrl: 'http://xxx/logo.png'
      },
      getSignature: false
    }
  },
  methods: {
    shareData() {
      let url = ''
      if (this.getSignature) {
        url = 'http://xxx/index.html'
      } else {
        url = location.href
      }
      this.$http.post(`${this.allurl}home/signature`, { // 获取当前页面签名等信息
        url: url
      })
        .then((res) => {
          let config = res.data;
          config.jsApiList = ['onMenuShareTimeline'];
          wx.config(config);
          wx.error((err) => {
            this.getSignature = !this.getSignature
            this.shareData()
          })
    },
    shareAll() { // 调用微信接口
      wx.onMenuShareTimeline({
        title: this.data.title,
        link: this.data.link,
        imgUrl: this.data.imgUrl
      })
    }
  },
  watch: {
    '$route' (to, from) {
      if (!(/article/.test(to.path)) { // 将不同的自定义分享页面分开
        this.shareData();
        wx.ready(() => {
          this.shareAll();
        })
      }
    }
  }
}