溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
公司最近有微信公眾號的需求，那么微信登錄授權和如何使用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的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
