全国咨询热线:18720358503

小程序提供的功能_vue中使用WX

类别:媒体报道 发布时间:2021-01-06 浏览人次:

vue中使用WX-JSSDK的两种方法(推荐)     ·Yang   这篇文章主要介绍了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
 mit('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调试。第二种方法使用和定义起来比较简单。

以上所述是小编给大家介绍的vue中使用WX-JSSDK的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读

小程序提供的功能_vue中使用WX

vue中应用WX-JSSDK的二种方式(强烈推荐) ·Yang 本文关键详细介绍了vue中应用WX-JSSDK的二种方式,每个方式根据案例编码给大伙儿详细介绍的十分详尽,具备一定的参照效仿使用价值,必...

2021-01-06
广州凡科互联网科技股份有限公司招聘市场培训

招聘人数:22职位信息(1)根据企业业务战略发展规划,构建商学院培训体系;制定培训政策和流程;(2)商学院的发展规划、经营方针、年度计划及日常管理工作事项;(3)组建企业...

2021-01-06
广州凡科互联网科技股份有限公司招聘财务经理

招聘人数:23职位信息岗位职责 :1、全盘负责公司账务,登记各类明细帐,总帐;2、编制月报,季报,年报。每月及时完成国地税纳税申报;3、独立负责出口退税及退税单证备案;4、...

2021-01-06
线上智能化人像抠图-RFCHOST提供安畅机房GIA CN2

CN2能够说成众多电信网客户最好的挑选, 而GIA CN2也是电信网CN2路线初级别最大的。近期著名中国人店家RFCHOST发布了英国洛杉矶市安畅主机房的GIA CN2路线VPS,针对必须英国CN2路线的客户...

2021-01-06
广州凡科互联网科技股份有限公司招聘品牌策划

招聘人数:28职位信息岗位职责: 1、根椐公司品牌定位和品牌调性,根据市场需求变化,制定与实施新品传播规划、年度、月度品牌营销策划,负责品牌产品推广活动和品牌宣传;2、策...

2021-01-06
广州凡科互联网科技股份有限公司招聘前端开发

招聘人数:27职位信息岗位职责:1、负责公司web开发、移动端开发(涉及原生小程序、VUE、uni-app等)和技术难点攻关,解决技术疑难问题;2、参与系统的需求调研和需求分析,能够根据...

2021-01-06
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信