vue 項目如何引入微信sdk，使用微信分享接口

寫在前面：

做微信的網頁基本上都要接入微信的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執行個體。

   

2. 然後在全局函數裡面調用這個接口，然後在每個路由頁面的相應元件裡面調用這個函數，把目前頁面的url以及其他标題、圖檔什麼的傳進去。

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

簽名校驗：

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

後話

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

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

個人blog and 掘金個人首頁

以上2017.12.16