vue单页面微信公众号的分享踩坑记录

场景

vue开发的spa项目需要做微信的分享以及二次分享

问题

iOS和Android的差异以及官方文档不明确，分享一直失败。

官方文档地址

developers.weixin.qq.com/doc/offiacc…

解决方案

在 main.js记录项目落地页，并用导航守卫区别处理。

代码

// main.js
let initUrl = window.location.href // 记录落地页，为iOS的分享作准备
router.afterEach((to, from) => {
  if (window.__wxjs_is_wkwebview !== true) { // Android环境，仅真机可见
    request({
      url: '开发者后台，获取签名等一系列东西',
      data: qs.stringify({
        href: encodeURIComponent(window.location.href)   //需要encodeURIComponent
      }),
      method: 'post'
    }).then(res => {
      wx.config(res) // 验证配置
      wx.ready(() => { // 在页面一加载就需要可以分享的时候需要放在这里
        wx.onMenuShareAppMessage({
          title: 'title',
          desc: 'desc',
          link: window.location.href
        })
        wx.onMenuShareTimeline({
          title: 'title',
          desc: 'desc',
          link: window.location.href
        })
      })
    })
  } else if (window.__wxjs_is_wkwebview === true) { // ios环境，仅真机可见
    request({
      url: '开发者后台，获取签名等一系列东西',
      data: qs.stringify({
        href: encodeURIComponent(initUrl) // 同上
      }),
      method: 'post'
    }).then(res => {
      wx.config(res) // 同上
      wx.ready(() => { // 同上
        wx.onMenuShareAppMessage({
          title: 'title',
          desc: 'desc',
          link: window.location.href
        })
        wx.onMenuShareTimeline({
          title: 'title',
          desc: 'desc',
          link: window.location.href
        })
      })
    })
  }
})

总结

1. hash模式和history模式到底用哪个？

我建议用history，因为微信分享的时候会截掉#后面的内容。

2. 二次分享失败？

需要对签名的url进行编码，这也是官网中要求的。

3.ios的区别对待

ios获取签名需要进入项目的第一个页面，即落地页，所以需要在main.js记录落地页，后面在导航守卫中每次获取签名的地址都需要是落地页，其他相同。

开发测试

开发测试可以在微信开发者工具完成。本地开发需要的账号域名一些配置可用官方文档的测试号。域名可配置本机IP。