詳解vue中使用微信jssdk
首先,確保你安裝了weixin-js-sdk。
如果還沒有安裝 npm install weixin-js-sdk
在頁面中
import wx from 'weixin-js-sdk';
接下來,就需要在mounted里面進(jìn)行wx.config()了。
由于使用微信js需要進(jìn)行授權(quán)配置,所以需要使用ajax請求從服務(wù)端獲取微信jssdk的授權(quán)參數(shù),ajax請求我這里使用的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è)號的唯一標(biāo)識,此處填寫企業(yè)號corpid
timestamp: res.timestamp, // 必填,生成簽名的時間戳
nonceStr: res.nonceStr, // 必填,生成簽名的隨機(jī)串
signature: res.signature,// 必填,簽名,見附錄1
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
})
就這樣,只要服務(wù)端返回的簽名沒有錯,就能配置成功,就可以使用微信js啦。
需要注意的是,每次url變化之后都需要重新微信jssdk授權(quán),雖然每次授權(quán)url除去#后都是一樣的,但是必須這么做,微信的機(jī)制。
還有一個需要注意的坑,使用微信自定義分享功能的時候,當(dāng)分享鏈接中存在中文的時候,一定要進(jìn)行encodeURIComponent(),否則在安卓手機(jī)上能成功自定義分享,ios手機(jī)上則不能成功分享。查閱資料后得知是安卓手機(jī)會自動encodeURIComponent,而ios不會。
以上所述是小編給大家介紹的vue中使用微信jssdk詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程(一)
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程(一)的相關(guān)資料,需要的朋友可以參考下2017-01-01
vue實現(xiàn)定義一個全局實例Vue.prototype
這篇文章主要介紹了vue實現(xiàn)定義一個全局實例Vue.prototype,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
在vue中使用export?default導(dǎo)出的class類方式
這篇文章主要介紹了在vue中使用export?default導(dǎo)出的class類方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
vue+axios 前端實現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08

