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實例。

1. 而後在全局函數裏面調用這個接口，而後在每一個路由頁面的相應組件裏面調用這個函數，把當前頁面的url以及其餘標題、圖片什麼的傳進去。

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

簽名校驗：

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

後話

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

最後：如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。而後就是但願看完的朋友點個喜歡，也能夠關注一下我。
我的blog and 掘金我的主頁

以上2017.12.16