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控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP简介
2006/10/09 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python实现京东秒杀功能
2018/07/30 Python
python 的topk算法实例
2020/04/02 Python
python drf各类组件的用法和作用
2021/01/12 Python
小孩百日宴答谢词
2014/01/15 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
个人函授自我鉴定
2014/03/25 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
担保书范文
2015/01/20 职场文书
2015年预算员工作总结
2015/05/14 职场文书
红色经典观后感
2015/06/18 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
Java常用函数式接口总结
2021/06/29 Java/Android
深入浅析Django MTV模式
2021/09/04 Python
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis