公司最近有微信公众号的需求，那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号，在网上看了很多篇博客，最终选定了两种方法，并且亲测有效。

一、通过全局，在router.afterEach中定义

1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk
2.将微信jsdk挂载到全局上
在utils目录下新建WechatPlugin.js
WechatPlugin.js

import wx from 'weixin-js-sdk'const plugin = {install(Vue) {Vue.prototype.$wechat = wxVue.wechat = wx},$wechat: wx
}export default plugin
export const install = plugin.install

main.js中

import WechatPlugin from './utils/WechatPlugin'
// 全局注册微信jsdk
Vue.use(WechatPlugin)

3.router.afterEach中

import wechatUtil from '@/utils/wechatUtil' // 在此文件中定义微信的一些方法
router.afterEach((to, from) => {let path = to.fullPath.slice(1) // 去除'/'let urlconst jsApiList = ['onMenuShareAppMessage','onMenuShareTimeline','chooseWXPay','showOptionMenu',"updateAppMessageShareData","hideMenuItems","showMenuItems"]if (!sessionStorage.getItem('initLink')) {// 解决ios微信下，分享签名不成功的问题,将第一次的进入的url缓存起来。sessionStorage.setItem('initLink', document.URL)}if (!!window.__wxjs_is_wkwebview) {// iosurl = sessionStorage.getItem('initLink')wechatUtil.setWeChatConfig(url, jsApiList)} else {// 安卓url = location.origin + process.env.BASE_URL + path// setTimeout(() => {wechatUtil.setWeChatConfig(url, jsApiList)// }, 0)}
})

3.wechatUtil.js中

import Vue from 'vue'
export default {appid: process.env.VUE_APP_WECHAT_APPID, // 可以在根据不同环境配置appidsetWeChatConfig(url, jsApiList) {getSignature(decodeURIComponent(url)) // getSignature需要你自己跟后端约定请求签名时的接口.then(data => {Vue.wechat.config({debug: false,signature: data.signature,nonceStr: data.nonceStr,timestamp: data.timestamp,appId: data.appId,jsApiList})}).catch(err => {console.log(err)})}}

上面方法虽然全局可以使用，但是会遇到一个问题，在单个页面调用微信jsddk中的updateAppMessageShareData方法或者其他方法时，有时成功有时失败，这可能是微信jsdk异步的问题，因此，需要你在单个页面中使用的时候加上setTimeout(()=>{ “这里调取微信的接口” },500)。

下面的第二种方法我觉得是最方便也是最自定义能力最好的，在需要的页面的调取。

二、方法二通过new promise封装成统一的入口，在单个页面中调用

我们还是要在router.afterEach中将进入的url记录下来，我是放在vuex上的（这里要特别注意苹果手机和安卓手机的区别，这里我就不多做讲解，原因是苹果浏览器中的url是第一次进来的url）
1.在router.afterEach中

import store from '@/store'
router.afterEach((to, from) => {let path = to.fullPath.slice(1) // 去除'/'if (!sessionStorage.getItem('initLink')) {// 解决ios微信下，分享签名不成功的问题,将第一次的进入的url缓存起来。sessionStorage.setItem('initLink', document.URL)}let urlif (!!window.__wxjs_is_wkwebview) {// iosurl = sessionStorage.getItem('initLink')} else {// 安卓 process.env.BASE_URL 自己定义各个环境下域名变量url = location.origin + process.env.BASE_URL + path}store.commit('page/setInitLink', url)
})

2.在store/page.js中

const state = {initLink: ''
}
const mutations = {setInitLink (state, initLink) {state.initLink = initLink}
}export default {namespaced: true,state,mutations
}

3.在utils/wechatUtil.js定义初始化方法

import wx from 'weixin-js-sdk'
import store from '@/store'export default {/* 初始化wxjsdk各种接口 */init(apiList = [], url) {//需要使用的api列表return new Promise((resolve, reject) => {getSignature(store.state.page.initLink).then(res => {if (res.appId) {wx.config({// debug: true, appId: res.appId,timestamp: res.timestamp, nonceStr: res.nonceStr, signature: res.signature,jsApiList: apiList})wx.ready(res => {// 微信SDK准备就绪后执行的回调。resolve(wx, res)})} else {reject(res)}})})}
}

4.在页面中的使用

import wechatUtil from '@/utils/wechatUtil'wechatUtil.init(['updateAppMessageShareData','onMenuShareAppMessage','onMenuShareTimeline','updateTimelineShareData']).then((wx, res) => {// 这里写微信的接口})

总结：最后我个人推荐第二种方法，第一种方法虽然很方便，但是每次路由跳转都调取了微信获取签名初始化的方法，而且自定义的扩展性不是很强，而且还会有微信接口异步的问题，需要用到微信中的debu：true调试。第二种方法使用和定义起来比较简单。