vue中使用WX-JSSDK的两种方法(推荐)


Posted in Javascript onJanuary 18, 2020

公司最近有微信公众号的需求,那么微信登录授权和如何使用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调试。第二种方法使用和定义起来比较简单。

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

Javascript 相关文章推荐
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 #Javascript
vue实现扫码功能
Jan 17 #Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 #Javascript
js键盘事件实现人物的行走
Jan 17 #Javascript
javascript实现简易的计算器
Jan 17 #Javascript
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python实现整数的二进制循环移位
2019/03/08 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
如何设置Java的运行环境
2013/04/05 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
高中英语教学反思
2014/02/04 职场文书
主题婚礼策划方案
2014/02/10 职场文书
房地产活动策划方案
2014/05/14 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
会计师事务所实习证明
2014/11/16 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书