Vue.js接入wx-js-sdk

在网上翻了很多vue.js怎么接入js-wx-sdk的教程，真的是五花八门、层出不穷，反正就是copy下来没一个能正常使用的，无奈之下，只有自己爬坑了。

关于微信相关配置以及后端生成签名，请自行去看文档，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。

这里设定后端已经写好了生成签名的接口了，用axios写好请求接口：

 getWXSDKConfig (url) {  // 该url参数必传
    return http({
      url: 'wx/getJsapiSignature',
      method: 'get',
      params: {
        url
      }
    })
  },

先安装插件：

yarn add weixin-js-sdk

or

npm i weixin-js-sdk -D

然后在src/utils/wechat.js文件编辑：
import wx from 'weixin-js-sdk'

export default {
  init (apiList = []) {
    const url = window.location.href.split('#')[0]  // 网上很多教程说这个url要判断ios和安卓，实测直接这样传就可以了，用他们的方法签名失败
    return new Promise((resolve, reject) => {
      getWXSDKConfig(url).then(res => {
        if (res.appId) {
          wx.config({
            debug: false,
            ...res,
            jsApiList: apiList
          })

          wx.ready(() => {
            resolve(wx)
          })
          wx.error(function (err) {
            reject(err)
          })
        }
      })
    })
  }
}

在页面中使用。 注意：不同的页面都必须重新配置才能使用，且放在mounted生命周期里。用到那个方法必须传入配置才能使用，方法列表：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#64
index.vue:

<template>
   <div></div>
</template>

<script>
import wechat from '../../utils/wechat'
export default {
  mounted () {
    utilWechat.init(['getLocation', 'scanQRCode']).then(wx => {
        wx.getLocation({...})
    })
  }
}
</script>

最后，重要的事情：
一定要把你的vue.js代码放在微信配置的js白名单域名下的根目录下，这样才能成功，本地开发测试可以先申请个测试账号，然后用内网穿透把你本地服务器映射到一个域名下，在测试好哪里把这个域名加入白名单，就OK了，正式公众号绑定的域名需要备案。
这里就结束啦。