VUE使用微信JDK（附踩坑记录）

VUE使用微信分享SDK（附踩坑记录）

微信分享官方文档

• 安装JS-SDK

  npm i -S weixin-jsapi

• 引入包

  ES5 写法

  const wx = require('weixin-jsapi')

  ES6 写法

  import wx from 'weixin-jsapi'

• 使用

  • 完整版

      $.ajax({
        url: 'https://*******/auth/jsapisignature',
        type: 'Get',
        async: false,
        dataType: 'jsonp',
        jsonp: 'callback', // 值可变，名称随意，但一般设为callback就可以了
        jsonpCallback: 'gdd',
        success: function (data) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.AppId, // 必填，公众号的唯一标识
            timestamp: data.Timestamp, // 必填，生成签名的时间戳
            nonceStr: data.NonceString, // 必填，生成签名的随机串
            signature: data.Signature.toLowerCase(), // 必填，签名，见附录1
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
          wx.ready(function () {
            // var IMG_SRC = ***
            var LINK = location.href.split('#')[0]
            // 微信分享
            document.title = title
            let TITLE = document.title
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.onMenuShareTimeline({
              title: TITLE, // 分享标题
              link: LINK, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: Logo, // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            })
            wx.onMenuShareAppMessage({
              title: TITLE, // 分享标题
              desc: Description, // 分享描述
              link: LINK, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: Logo, // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            })
          })
          wx.error(function (err) {
            console.log(err)
            // alert(err.errMsg)
          })
        }
      })

步骤详解

1、 调用后台返回微信签名的接口（为下面的config）

```JavaScript
  $.ajax({
    url: 'https://*******/auth/jsapisignature',
    type: 'Get',
    async: false,
    dataType: 'jsonp',
    jsonp: 'callback', // 值可变，名称随意，但一般设为callback就可以了
    jsonpCallback: 'gdd',
    success: function (data) {
    }
```

2、 通过config接口注入权限验证配置

```JavaScript
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
  });
```

3、 在微信JS-SDK准备好了就调用所需的方法

```JavaScript
  wx.ready(function () {
        // var IMG_SRC = ***
        var LINK = location.href.split('#')[0]
        // 微信分享
        document.title = title
        let TITLE = document.title
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.onMenuShareTimeline({
          title: TITLE, // 分享标题
          link: LINK, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: Logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        wx.onMenuShareAppMessage({
          title: TITLE, // 分享标题
          desc: Description, // 分享描述
          link: LINK, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: Logo, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      })
      wx.error(function (err) {
        console.log(err)
        // alert(err.errMsg)
      })
    }
```

踩坑记录

---

1、 在微信里面刷新一下才出来分享图片

原因是本人在项目中 初始的进入域名为 www.aa.com/ID, 然后通过接口判断是什么模版的页面，直接跳向 一个新的路由 www.aa.com/模版/ID。 导致第一步获取签名失败
微信默认规则：
通过分享链接进去页面之后先获取document.location.href,跟你当时获取签名时的document.location.href做对比，不一致，就签名失败，分享失效，图片不出来
刷新一下出来：是当前的域名（www.aa.com/模版/ID 跳转或处理完毕的）是现在第一步获取签名时候微信获取当前的document.location.href

出现问题的机型是IOS

vue-router用的history模式，在微信签名验证的时候iOS验证URL竟然是第一次进来的URL 参考

结论：保证 微信 进入当前页面时获取的 document.location.href 与 个人 获取微信签名时的 document.location.href 时一致。例如：我上面的前后路由地址都为 www.aa.com/ID 就不存在这样的问题了

2、 VUE 安装的微信JS-SDK后台报错 wx is undefined

之前安装的是这个包weixin-js-sdk，在项目中报错，目前测试是不支持，应该用上面提到的 weixin-jsapi

3、 对于vue单页面history模式应用多路由跳转导致签名失败 参考

1、原因是使用了vue-router里面的history模式,这种模式下的url是不断变化的,而JS-SDK的在每一次url变化的时候都需要重新config,导致每一个跳转一个页面都需要重新去进行config,
2、而使用vue-router的默认模式,只是hash部分(#后面的内容)变化,这种变化是不需要重新进行config的
3、使用默认的vue-router的hash mode就可以,在根组件(一般是app.vue)里面配置config信息即可,代码如下

4、 Ts包安装微信JS-SDK问题

npm install @type/weixin-js-sdk

5、 ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有 参考

本质上的错误是;当浏览者从分享窗口进入后，他从分享页按着正常路由跳转到其他页面，其他页面的逻辑中如果有需要获取当前页面url的需要，会发现这个url和正常路由跳转的不一样,导致签名不一致,所以获取不到正确的文案。

应使用下面方法获取分享地址(上面例子里的方式就是正确的)

var LINK = location.href.split('#')[0]