公司最近有微信公眾號(hào)的需求，那么微信登錄授權(quán)和如何使用WX-JSSDk實(shí)現(xiàn)分享等等肯定是最頭疼的問(wèn)題。本人也是第一次開(kāi)發(fā)微信公眾號(hào)，在網(wǎng)上看了很多篇博客，最終選定了兩種方法，并且親測(cè)有效。
成都創(chuàng)新互聯(lián)主要為客戶(hù)提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)整合營(yíng)銷(xiāo)推廣、網(wǎng)站程序開(kāi)發(fā)、HTML5響應(yīng)式重慶網(wǎng)站建設(shè)公司、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)、WEB系統(tǒng)開(kāi)發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都混凝土泵車(chē)行業(yè)客戶(hù)提供了網(wǎng)站營(yíng)銷(xiāo)服務(wù)。
一、通過(guò)全局，在router.afterEach中定義
1.首先通過(guò)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.installmain.js中
import WechatPlugin from './utils/WechatPlugin' // 全局注冊(cè)微信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微信下，分享簽名不成功的問(wèn)題,將第一次的進(jìn)入的url緩存起來(lái)。
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, // 可以在根據(jù)不同環(huán)境配置appid
setWeChatConfig(url, jsApiList) {
getSignature(decodeURIComponent(url)) // getSignature需要你自己跟后端約定請(qǐng)求簽名時(shí)的接口
.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)
})
}
}
上面方法雖然全局可以使用，但是會(huì)遇到一個(gè)問(wèn)題，在單個(gè)頁(yè)面調(diào)用微信jsddk中的updateAppMessageShareData方法
或者其他方法時(shí)，有時(shí)成功有時(shí)失敗，這可能是微信jsdk異步的問(wèn)題，因此，需要你在單個(gè)頁(yè)面中使用的時(shí)候加上setTimeout(()=>{ “這里調(diào)取微信的接口” },500)。
下面的第二種方法我覺(jué)得是最方便也是最自定義能力最好的，在需要的頁(yè)面的調(diào)取。
二、方法二通過(guò)new promise封裝成統(tǒng)一的入口，在單個(gè)頁(yè)面中調(diào)用
我們還是要在router.afterEach中將進(jìn)入的url記錄下來(lái)，我是放在vuex上的（這里要特別注意蘋(píng)果手機(jī)和安卓手機(jī)的區(qū)別，這里我就不多做講解，原因是蘋(píng)果瀏覽器中的url是第一次進(jìn)來(lái)的url）
1.在router.afterEach中
import store from '@/store'
router.afterEach((to, from) => {
let path = to.fullPath.slice(1) // 去除'/'
if (!sessionStorage.getItem('initLink')) {
// 解決ios微信下，分享簽名不成功的問(wèn)題,將第一次的進(jìn)入的url緩存起來(lái)。
sessionStorage.setItem('initLink', document.URL)
}
let url
if (!!window.__wxjs_is_wkwebview) {
// ios
url = sessionStorage.getItem('initLink')
} else {
// 安卓 process.env.BASE_URL 自己定義各個(gè)環(huán)境下域名變量
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準(zhǔn)備就緒后執(zhí)行的回調(diào)。
resolve(wx, res)
})
} else {
reject(res)
}
})
})
}
}4.在頁(yè)面中的使用
import wechatUtil from '@/utils/wechatUtil'
wechatUtil
.init([
'updateAppMessageShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline',
'updateTimelineShareData'
])
.then((wx, res) => {
// 這里寫(xiě)微信的接口
})總結(jié)：最后我個(gè)人推薦第二種方法，第一種方法雖然很方便，但是每次路由跳轉(zhuǎn)都調(diào)取了微信獲取簽名初始化的方法，而且自定義的擴(kuò)展性不是很強(qiáng)，而且還會(huì)有微信接口異步的問(wèn)題，需要用到微信中的debu：true調(diào)試。第二種方法使用和定義起來(lái)比較簡(jiǎn)單。
以上所述是小編給大家介紹的vue中使用WX-JSSDK的兩種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
