vue 專案如何引入微信sdk，使用微信分享介面

OBKoro1發表於2017-12-18
Vue

寫在前面：

做微信的網頁基本上都要接入微信的sdk，我在做的時候，也頗費了一番功夫，然後就想記錄一下，供自己日後翻閱，以及讓有需要的朋友可以做一下參考，如果喜歡的可以點波贊，或者關注一下，希望可以幫到大家。

本文首發於我的個人blog：obkoro1.com

安裝sdk

    npm install weixin-js-sdk --save
複製程式碼

開始之前大家可以先讀一讀微信公眾號的 接入文件，vue是單頁面專案，比如你想要接入微信分享功能，分享功能在每個路由地址都要有，因為每個路由的url是不一樣的，所以就需要在每個路由地址都引入一遍。

整體步驟：

  1. vue引入sdk的話，就是在路由元件裡面的，元件生命週期的：creatd()和mounted()裡面放程式碼。

  2. 用虛擬碼，熟悉一下整體的流程，要做哪些事情：

     //wx是引入的微信sdk
 wx.config('這裡有一些引數');//通過config介面注入許可權驗證配置
 
 wx.ready(function() { //通過ready介面處理成功驗證
 // config資訊驗證成功後會執行ready方法
     wx.onMenuShareAppMessage({ // 分享給朋友  ,在config裡面填寫需要使用的JS介面列表，然後這個方法才可以用 
         title: '這裡是標題', // 分享標題
         desc: 'This is a test!', // 分享描述
         link: '連結', // 分享連結
         imgUrl: '圖片', // 分享圖示
         type: '', // 分享型別,music、video或link，不填預設為link
         dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
         success: function() {
             // 使用者確認分享後執行的回撥函式
         },
         cancel: function() {
             // 使用者取消分享後執行的回撥函式
         }
          });
         wx.onMenuShareTimeline({ //分享朋友圈
         title: '標題', // 分享標題
         link: '連結',
         imgUrl: '圖片', // 分享圖示
         success: function() {
             // 使用者確認分享後執行的回撥函式
         },
         cancel: function() {
             // 使用者取消分享後執行的回撥函式
         }
     });
 });
  wxx.error(function(res){//通過error介面處理失敗驗證
     // config資訊驗證失敗會執行error函式
 });
複製程式碼

上面的流程多看幾遍，對整個流程有個概念，其中最重要的一步就是下面這個介面注入許可權。

config介面注入許可權

接入微信介面的最主要也是最重要一步步就是填寫下面這些資訊，填完這些資訊之後，基本就好了。下面這些資訊通常是通過後端介面來獲取的。

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
複製程式碼

獲取config配置資訊：

前端要獲取上面那些資訊，不用做太多東西，只要調後端介面就可以了。後端會把那些資訊處理好，然後通過一個介面返給你這些引數。你要給後端傳一個當前路由頁面的完整url，後端就會返回上述的那些資訊給你，後面就可以根據自己的需求呼叫相應的介面，自定義裡面的東西。

坑點：url

這裡要注意的就是url的問題，如果url沒有正確傳遞，後端也會返回資訊，但是簽名資訊會是錯誤的。

上面提到的完整url指的是：'http(s)://'部分，以及'？'後面的GET引數部分,但不包括'#'hash後面的部分。可以通過location.href來獲取。

注意： 如果你的vue專案，路由沒有開啟history 模式,也就是你的url上面包含“#”，這個時候要從後端正確獲取簽名，就需要去掉url上#後面的字元。（url去掉'#'hash部分，可用location.href.split('#')[0]）

封裝呼叫sdk注入：

因為要在每個路由頁面都注入sdk，這個肯定要複用的，不然那麼多程式碼，看著就頭大。

我是這麼做的：

  1. 因為我把axios包了一層，然後把axios介面，在main.js裡面掛載到Vue例項。
    vue 專案如何引入微信sdk，使用微信分享介面
  2. 然後在全域性函式裡面呼叫這個介面，然後在每個路由頁面的相應元件裡面呼叫這個函式，把當前頁面的url以及其他標題、圖片什麼的傳進去。

裡面的具體步驟就不說了，最重要的是參考上面的那個流程，函式裡面的東西也都是基於那個流程的。

簽名校驗：

當你反覆確認步驟都沒有問題，微信sdk注入還是簽名失敗的時候，這個時候你就要考慮是不是後端那邊的演算法有問題，可以把後端返回的簽名和微信提供的JS 介面簽名校驗工具生成的簽名對比一下，或許是後端那邊演算法的問題也不一定。

後話

實不相瞞，當時我做的時候就是被url這個坑了，第一次做這個東西，沒有經驗，折騰了好久。引入sdk並不難，重要的是那個配置資訊要填寫正確，然後其他的就根據實際需求來做了。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。 個人blog and 掘金個人主頁

以上2017.12.16

相關文章