vue中使用WX-JSSDK的兩種方法

公司最近有微信公衆號的需求，那麼微信登錄授權和如何使用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微信下，分享簽名不成功的問題,將第一次的進入的url緩存起來。
    sessionStorage.setItem('initLink', 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',
          'onMenuShareTimeline',
          'updateTimelineShareData'
        ])
        .then((wx, res) => {
         	// 這裏寫微信的接口
        })

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