命案13宗之渴望城市,大话中山,forellenlord
公司最近有微信公众号的需求，那么微信登录授权和如何使用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的两种方法，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
怎么理解wx.navigateTo的events参数使用详情
微信jssdk踩坑之签名错误invalid signature
网友评论