詳解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請(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+swiper實(shí)現(xiàn)側(cè)滑菜單效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)側(cè)滑菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Vue3使用v-if指令進(jìn)行條件渲染的實(shí)例代碼
條件渲染是根據(jù)條件的真假來有條件地渲染元素,在Vue.js 3.x中,常見的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進(jìn)行條件渲染,需要的朋友可以參考下2024-03-03
Vue2組件tree實(shí)現(xiàn)無限級(jí)樹形菜單
這篇文章主要為大家詳細(xì)介紹了Vue2組件tree實(shí)現(xiàn)無限級(jí)樹形菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
關(guān)于vue使用ant design vue,打包后a-date-picker控件無法選擇日期的問題
這篇文章主要介紹了關(guān)于vite .env.test環(huán)境使用ant design vue,打包后a-date-picker控件無法選擇日期的問題,本文針對(duì)這個(gè)問題提供了解決方法,需要的朋友可以參考下2023-04-04
vue+element搭建后臺(tái)小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺(tái)小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入過程解析
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue使用輪詢定時(shí)發(fā)送請(qǐng)求代碼
這篇文章主要介紹了Vue使用輪詢定時(shí)發(fā)送請(qǐng)求代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue實(shí)現(xiàn)可改變購物數(shù)量的購物車
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07