vue 項目如何引入微信sdk接口的方法

更新時間：2017年12月18日 11:04:57 作者：OB丶Koro1

本篇文章主要介紹了vue 項目如何引入微信sdk接口的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

安裝sdk

npm install weixin-js-sdk --save

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

整體步驟：

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

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

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

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

config接口注入權限

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

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

獲取config配置信息：

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

坑點：url

這里要注意的就是url的問題，如果url沒有正確傳遞，后端也會返回信息，但是簽名信息會是錯誤的。

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

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

封裝調用sdk注入：

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

我是這么做的：

因為我把axios包了一層，然后把axios接口，在main.js里面掛載到Vue實例。