這篇文章主要介紹了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中文網其他相關文章！
