在vue中如何引入微信sdk接口

這篇文章主要介紹了vue 專案如何引入微信sdk介面的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

安裝sdk

npm install weixin-js-sdk --save

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

整體步驟：

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

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

//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，這個肯定要重複使用的，不然那麼多程式碼，看著就頭大。

我是這麼做的：

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

然後在全域函數裡面呼叫這個接口，然後在每個路由頁面的對應元件裡面調用這個函數，把目前頁面的url以及其他標題、圖片什麼的傳進去。

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

簽名校驗：

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

後話

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在JS中如何實作網頁版計算器

使用JS如何實現小球拋物線軌跡運動

使用JavaScript如何實作二元樹遍歷

#在axios中如何實作cookie跨域

在JavaScript中如何實現彈性效果

使用axios如何實作ajax請求（詳細教學）

以上是在vue中如何引入微信sdk接口的詳細內容。更多資訊請關注PHP中文網其他相關文章！