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({
weixin_38502814
- 粉丝: 5
- 资源: 928
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0