小編給大家分享一下vue項(xiàng)目怎么引入微信sdk接口，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),巴馬網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:巴馬等地區(qū)。巴馬做網(wǎng)站價(jià)格咨詢:18982081108

安裝sdk

npm install weixin-js-sdk --save

開(kāi)始之前大家可以先讀一讀微信公眾號(hào)的 接入文檔 ，vue是單頁(yè)面項(xiàng)目，比如你想要接入微信分享功能，分享功能在每個(gè)路由地址都要有，因?yàn)槊總€(gè)路由的url是不一樣的，搜易就需要在每個(gè)路由地址都引入一遍。

整體步驟：

vue引入sdk的話，就是在路由組件里面的，組件生命周期的：creatd()和mounted()里面放代碼。

用偽代碼，熟悉一下整體的流程，要做哪些事情：

//wx是引入的微信sdk
 wx.config('這里有一些參數(shù)');//通過(guò)config接口注入權(quán)限驗(yàn)證配置
 
 wx.ready(function() { //通過(guò)ready接口處理成功驗(yàn)證
 // config信息驗(yàn)證成功后會(huì)執(zhí)行ready方法
   wx.onMenuShareAppMessage({ // 分享給朋友 ,在config里面填寫需要使用的JS接口列表，然后這個(gè)方法才可以用 
     title: '這里是標(biāo)題', // 分享標(biāo)題
     desc: 'This is a test!', // 分享描述
     link: '鏈接', // 分享鏈接
     imgUrl: '圖片', // 分享圖標(biāo)
     type: '', // 分享類型,music、video或link，不填默認(rèn)為link
     dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
     success: function() {
       // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
     },
     cancel: function() {
       // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '標(biāo)題', // 分享標(biāo)題
     link: '鏈接',
     imgUrl: '圖片', // 分享圖標(biāo)
     success: function() {
       // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
     },
     cancel: function() {
       // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
     }
   });
 });
 wxx.error(function(res){//通過(guò)error接口處理失敗驗(yàn)證
   // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)
 });

上面的流程多看幾遍，對(duì)整個(gè)流程有個(gè)概念，其中最重要的一步就是下面這個(gè)借口注入權(quán)限。

config接口注入權(quán)限

接入微信接口的最主要也是最重要一步步就是填寫下面這些信息，填完這些信息之后，基本就好了。下面這些信息通常是通過(guò)后端接口來(lái)獲取的。

wx.config({
  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名，見(jiàn)附錄1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});

獲取config配置信息：

前端要獲取上面那些信息，不用做太多東西，只要調(diào)后端接口就可以了。后端會(huì)把那些信息處理好，然后通過(guò)一個(gè)接口返給你這些參數(shù)。你要給后端傳一個(gè) 當(dāng)前路由頁(yè)面的完整url ，后端就會(huì)返回上述的那些信息給你，后面就可以根據(jù)自己的需求調(diào)用相應(yīng)的接口，自定義里面的東西。

坑點(diǎn)：url

這里要注意的就是url的問(wèn)題，如果url沒(méi)有正確傳遞，后端也會(huì)返回信息，但是簽名信息會(huì)是錯(cuò)誤的。

上面提到的完整url指的是：'http(s)://'部分，以及'？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分?？梢酝ㄟ^(guò) location.href 來(lái)獲取。

注意： 如果你的vue項(xiàng)目，路由沒(méi)有開(kāi)啟history 模式,也就是你的url上面包含“#”，這個(gè)時(shí)候要從后端正確獲取簽名，就需要 去掉url上#后面的字符 。（url去掉'#'hash部分，可用 location.href.split('#')[0] ）

封裝調(diào)用sdk注入：

因?yàn)橐诿總€(gè)路由頁(yè)面都注入sdk，這個(gè)肯定要復(fù)用的，不然那么多代碼，看著就頭大。

我是這么做的：

因?yàn)槲野補(bǔ)xios包了一層，然后把a(bǔ)xios接口，在main.js里面掛載到Vue實(shí)例。

然后在全局函數(shù)里面調(diào)用這個(gè)接口，然后在每個(gè)路由頁(yè)面的相應(yīng)組件里面調(diào)用這個(gè)函數(shù)，把當(dāng)前頁(yè)面的url以及其他標(biāo)題、圖片什么的傳進(jìn)去。

里面的具體步驟就不說(shuō)了，最重要的是參考上面的那個(gè)流程，函數(shù)里面的東西也都是基于那個(gè)流程的。

簽名校驗(yàn)：

當(dāng)你反復(fù)確認(rèn)步驟都沒(méi)有問(wèn)題，微信sdk注入還是簽名失敗的時(shí)候，這個(gè)時(shí)候你就要考慮是不是后端那邊的算法有問(wèn)題，可以把后端返回的簽名和微信提供的JS 接口簽名校驗(yàn)工具生成的簽名對(duì)比一下，或許是后端那邊算法的問(wèn)題也不一定。

后話

實(shí)不相瞞，當(dāng)時(shí)我做的時(shí)候就是被url這個(gè)坑了，第一次做這個(gè)東西，沒(méi)有經(jīng)驗(yàn)，折騰了好久。引入sdk并不難，重要的是那個(gè)配置信息要填寫正確，然后其他的就根據(jù)實(shí)際需求來(lái)做了。

看完了這篇文章，相信你對(duì)“vue項(xiàng)目怎么引入微信sdk接口”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：vue項(xiàng)目怎么引入微信sdk接口-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/dhgpod.html