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 相关文章推荐
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
es6数值的扩展方法
Mar 11 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
AngularJS快速入门
2015/04/02 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
python文件特定行插入和替换实例详解
2017/07/12 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
使用python实现名片管理系统
2020/06/18 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
会计应聘求职信范文
2013/12/17 职场文书
单位承诺书格式
2014/05/21 职场文书
学习三严三实心得体会
2014/10/13 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript