公司最近有微信公眾號的需求，那麼微信登入授權和如何使用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 = wx
 Vue.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 url
 const jsApiList = [
 'onMenuShareAppMessage','onMenuShareTimeline','chooseWXPay','showOptionMenu',"updateAppMessageShareData","hideMenuItems","showMenuItems"
 ]

 if (!sessionStorage.getItem('initLink')) {
 // 解決ios微信下，分享簽名不成功的問題,將第一次的進入的url快取起來。
 sessionStorage.setItem('initLink',document.URL)
 }
 if (!!window.__wxjs_is_wkwebview) {
 // ios
 url = 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,// 可以在根據不同環境配置appid
 setWeChatConfig(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微信下，分享簽名不成功的問題,document.URL)
 }
 let url
 if (!!window.__wxjs_is_wkwebview) {
 // ios
 url = 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','updateTimelineShareData'
 ])
 .then((wx,res) => {
  // 這裡寫微信的介面
 })

總結：最後我個人推薦第二種方法，第一種方法雖然很方便，但是每次路由跳轉都調取了微信獲取簽名初始化的方法，而且自定義的擴充套件性不是很強，而且還會有微信介面非同步的問題，需要用到微信中的debu：true除錯。第二種方法使用和定義起來比較簡單。

以上所述是小編給大家介紹的vue中使用WX-JSSDK的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！