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]

posted @ 2019-03-28 19:01 一二时间阅读(972) 评论(0) 编辑收藏举报

刷新页面返回顶部

一二时间

一二小事儿

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

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

步骤详解

踩坑记录

公告