詳解vue中使用微信jssdk
首先，確保你安裝了weixin-js-sdk。
如果還沒有安裝 npm install weixin-js-sdk
在頁(yè)面中
import wx from 'weixin-js-sdk';
接下來，就需要在mounted里面進(jìn)行wx.config()了。
由于使用微信js需要進(jìn)行授權(quán)配置，所以需要使用ajax請(qǐng)求從服務(wù)端獲取微信jssdk的授權(quán)參數(shù)，ajax請(qǐng)求我這里使用的axios
this.axios({
method: 'post',
url: 'http://my.service.com/index.php/opcode/6002',
data:{ url:location.href.split('#')[0] } //向服務(wù)端提供授權(quán)url參數(shù)，并且不需要#后面的部分
}).then((res)=>{
wx.config({
debug: true, // 開啟調(diào)試模式,
appId: res.appId, // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫企業(yè)號(hào)corpid
timestamp: res.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: res.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: res.signature,// 必填，簽名，見附錄1
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
})
就這樣，只要服務(wù)端返回的簽名沒有錯(cuò)，就能配置成功，就可以使用微信js啦。
需要注意的是，每次url變化之后都需要重新微信jssdk授權(quán)，雖然每次授權(quán)url除去#后都是一樣的，但是必須這么做，微信的機(jī)制。
還有一個(gè)需要注意的坑，使用微信自定義分享功能的時(shí)候，當(dāng)分享鏈接中存在中文的時(shí)候，一定要進(jìn)行encodeURIComponent()，否則在安卓手機(jī)上能成功自定義分享，ios手機(jī)上則不能成功分享。查閱資料后得知是安卓手機(jī)會(huì)自動(dòng)encodeURIComponent，而ios不會(huì)。
以上所述是小編給大家介紹的vue中使用微信jssdk詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）的相關(guān)資料,需要的朋友可以參考下2017-01-01
vue實(shí)現(xiàn)定義一個(gè)全局實(shí)例Vue.prototype
這篇文章主要介紹了vue實(shí)現(xiàn)定義一個(gè)全局實(shí)例Vue.prototype，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)，戶籍信息的添加與刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了Vue組件化開發(fā)的思考以及相關(guān)的原理介紹，如果你對(duì)此有興趣，可以學(xué)習(xí)參考下。2018-02-02
在vue中使用export?default導(dǎo)出的class類方式
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue.js 加入高德地圖的實(shí)現(xiàn)方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
基于vue組件實(shí)現(xiàn)猜數(shù)字游戲
這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要給大家介紹了關(guān)于vue升降版本以及如何查看項(xiàng)目版本的相關(guān)資料,在開發(fā)和維護(hù)Vue.js應(yīng)用程序時(shí)了解所使用的Vue.js版本非常重要,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12