vue中使用WX-JSSDK的两种方法(推荐)
公司最近有微信公众号的需求，那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号，在网上看了很多篇博客，最终选定了两种方法，并且亲测有效。
一、通过全局，在router.afterEach中定义
1.首先通过yarnaddweixin-js-sdk/npmiweixin-js-sdk
2.将微信jsdk挂载到全局上
在utils目录下新建WechatPlugin.js
WechatPlugin.js
importwxfrom'weixin-js-sdk'
constplugin={
install(Vue){
Vue.prototype.$wechat=wx
Vue.wechat=wx
},
$wechat:wx
}
exportdefaultplugin
exportconstinstall=plugin.install
main.js中
importWechatPluginfrom'./utils/WechatPlugin' //全局注册微信jsdk Vue.use(WechatPlugin)
3.router.afterEach中
importwechatUtilfrom'@/utils/wechatUtil'//在此文件中定义微信的一些方法
router.afterEach((to,from)=>{
letpath=to.fullPath.slice(1)//去除'/'
leturl
constjsApiList=[
'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中
importVuefrom'vue'
exportdefault{
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)。
下面的第二种方法我觉得是最方便也是最自定义能力最好的，在需要的页面的调取。
二、方法二通过newpromise封装成统一的入口，在单个页面中调用
我们还是要在router.afterEach中将进入的url记录下来，我是放在vuex上的（这里要特别注意苹果手机和安卓手机的区别，这里我就不多做讲解，原因是苹果浏览器中的url是第一次进来的url）
1.在router.afterEach中
importstorefrom'@/store'
router.afterEach((to,from)=>{
letpath=to.fullPath.slice(1)//去除'/'
if(!sessionStorage.getItem('initLink')){
//解决ios微信下，分享签名不成功的问题,将第一次的进入的url缓存起来。
sessionStorage.setItem('initLink',document.URL)
}
leturl
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中
conststate={
initLink:''
}
constmutations={
setInitLink(state,initLink){
state.initLink=initLink
}
}
exportdefault{
namespaced:true,
state,
mutations
}
3.在utils/wechatUtil.js定义初始化方法
importwxfrom'weixin-js-sdk'
importstorefrom'@/store'
exportdefault{
/*初始化wxjsdk各种接口*/
init(apiList=[],url){
//需要使用的api列表
returnnewPromise((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.在页面中的使用
importwechatUtilfrom'@/utils/wechatUtil'
wechatUtil
.init([
'updateAppMessageShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'updateTimelineShareData'
])
.then((wx,res)=>{
//这里写微信的接口
})
总结：最后我个人推荐第二种方法，第一种方法虽然很方便，但是每次路由跳转都调取了微信获取签名初始化的方法，而且自定义的扩展性不是很强，而且还会有微信接口异步的问题，需要用到微信中的debu：true调试。第二种方法使用和定义起来比较简单。
以上所述是小编给大家介绍的vue中使用WX-JSSDK的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。