公司最近有微信公众号的需求,那么微信登录授权和如何使用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或者pinia上的(这里要特别注意苹果手机和安卓手机的区别,这里我就不多做讲解,原因是苹果浏览器中的url是第一次进来的url)
1.在router.afterEach中

import store from '@/store'
router.afterEach((to, from) => {
 	const url = window.location.href
 	  // ios手机环境 并且是非开发者工具
	  if (isIOS() && !isWechaTool()) {
	    if (!store.state.page.initLink)  store.commit('page/setInitLink', url)
	  } else {
	     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 {
  // 判断是否是微信
  isWechat() {
    const ua: any = window.navigator.userAgent.toLowerCase()
    const matchStr = ua.match(/micromessenger/i)
    if (matchStr && matchStr.includes('micromessenger')) return true
    return false
  },
  /* 初始化wxjsdk各种接口 */
  init(apiList = [], url) {
 	apiList = apiList ?? [
      'checkJsApi',
      'updateAppMessageShareData',
      // 'onMenuShareAppMessage',
      // 'onMenuShareTimeline',
      'updateTimelineShareData',
    ]
    //需要使用的api列表
    return new Promise((resolve, reject) => {
      getSignature(store.state.page.initLink).then(res => {
        if (res.appId) {
          wx.config({
             debug: route.query.debug === '1' ? true : false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
            appId: res.appId,
            timestamp: res.timestamp, 
            nonceStr: res.nonceStr, 
            signature: res.signature,
            jsApiList: apiList
          })
          wx.ready(res => {
            // 微信SDK准备就绪后执行的回调。
            resolve(wx, res)
          })
        } else {
          reject(res)
        }
      })
    })
  },
  // 分享方法
  async share(params: IShare) {
    if (!this.isWechat()) return
    await this.init()
    console.log('======进来了updateAppMessageShareData=====')
    //分享给朋友及分享到QQ
    wx.updateAppMessageShareData(params)
    //分享到朋友圈及分享到QQ空间
    wx.updateTimelineShareData(params)
  },
   // 微信支付
  wxPay() {
    if (!this.isWechat()) return
    return new Promise(async (resolve, reject) => {
      let payParams: any
      try {
        await this.init(['checkJsApi', 'chooseWXPay'])
        payParams = await getWxpay()
      } catch (error) {
        reject(error)
      }
      wx.chooseWXPay({
        timestamp: payParams.timestamp, // 支付签名时间戳,注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
        nonceStr: payParams.timestamp, // 支付签名随机串,不长于 32 位
        package: payParams.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
        signType: payParams.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
        paySign: payParams.paySign, // 支付签名
        success(res: any) {
          if (res.errMsg == 'chooseWXPay:ok') {
            resolve(res)
          }
        },
        fail(res: any) {
          //失败后的操作
          reject(res)
        },
      })
    })
  },
}

4.在页面中的使用

import wechatUtil from '@/utils/wechatUtil'
mounted() {
  wechat.share({
    title: '鲲43214321',
    desc: '12432',
    link: 'https://www.baidu.com',
    imgUrl: 'https://xxxx.jpg',
  })
}

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐