vue中使用WX-JSSDK的兩種方法(推薦)

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

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

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)
 }
})

import Vue from 'vue'
export default {
 appid: process.env.VUE_APP_WECHAT_APPID, // 可以在根據(jù)不同環(huán)境配置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)
 })
 }
 }

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 自己定義各個環(huán)境下域名變量
 url = location.origin + process.env.BASE_URL + path
 }
 store.commit('page/setInitLink', url)
})

const state = {
 initLink: ''
}
const mutations = {
 setInitLink (state, initLink) {
 state.initLink = initLink
 }
}

export default {
 namespaced: true,
 state,
 mutations
}

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準(zhǔn)備就緒后執(zhí)行的回調(diào)。
  resolve(wx, res)
  })
 } else {
  reject(res)
 }
 })
 })
 }
}

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