vue中使用WX-JSSDK的两种方法

Tommy·Yang

已于 2023-07-05 17:03:00 修改

阅读量2w

点赞数 8

分类专栏： vue实战问题总结 Vue新手上路文章标签： wx-jsdk vue

于 2020-01-17 16:17:10 首次发布

本文链接：https://blog.csdn.net/qq_29329037/article/details/104020046

版权

Vue新手上路同时被 2 个专栏收录

19 篇文章

订阅专栏

vue实战问题总结

2 篇文章

订阅专栏

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

更新第二种方法，微信分享方法封装，添加微信网页授权思路相关文章(2023年7月5日)

一、通过全局，在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',
  })
}