詳解vue中使用微信jssdk
更新時間：2019年04月19日 08:35:52 作者：李小白1
這篇文章主要介紹了vue中使用微信jssdk，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
首先，確保你安裝了weixin-js-sdk。
如果還沒有安裝 npm install weixin-js-sdk
在頁面中
import wx from 'weixin-js-sdk';
接下來，就需要在mounted里面進行wx.config()了。
由于使用微信js需要進行授權(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è)號的唯一標識，此處填寫企業(yè)號corpid
timestamp: res.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
signature: res.signature,// 必填，簽名，見附錄1
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
})
就這樣，只要服務(wù)端返回的簽名沒有錯，就能配置成功，就可以使用微信js啦。
需要注意的是，每次url變化之后都需要重新微信jssdk授權(quán)，雖然每次授權(quán)url除去#后都是一樣的，但是必須這么做，微信的機制。
還有一個需要注意的坑，使用微信自定義分享功能的時候，當分享鏈接中存在中文的時候，一定要進行encodeURIComponent()，否則在安卓手機上能成功自定義分享，ios手機上則不能成功分享。查閱資料后得知是安卓手機會自動encodeURIComponent，而ios不會。
以上所述是小編給大家介紹的vue中使用微信jssdk詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
條件渲染是根據(jù)條件的真假來有條件地渲染元素,在Vue.js 3.x中,常見的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進行條件渲染,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了Vue2組件tree實現(xiàn)無限級樹形菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下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控件無法選擇日期的問題,本文針對這個問題提供了解決方法,需要的朋友可以參考下2023-04-04
vue+element搭建后臺小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細介紹了vue+element搭建后臺小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了詳解Vite的新體驗，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue項目中實現(xiàn)ElementUI按需引入過程解析
這篇文章主要介紹了Vue項目中實現(xiàn)ElementUI按需引入,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue使用輪詢定時發(fā)送請求代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07