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

fish 發布于2019-08-22 11:21 / 1698人閱讀

摘要：接口注入權限接入微信接口的最主要也是最重要一步步就是填寫下面這些信息，填完這些信息之后，基本就好了。

寫在前面：

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

本文首發于我的個人blog：obkoro1.com

安裝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并不難，重要的是那個配置信息要填寫正確，然后其他的就根據實際需求來做了。

最后：如需轉載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然后就是希望看完的朋友點個喜歡，也可以關注一下我。
個人blog and 掘金個人主頁

以上2017.12.16

GPU云服務器云服務器如何使用微信小程序微信小程序如何在電腦上使用微信js sdk 微信聊天sdk

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92232.html

微信公眾號頁面(VUE)中如何配置微信JS-SDK和高德地圖,以及遇到的一些問題記錄

摘要：安裝并引入依賴包這里是說明文檔下載依賴包在需要用到的模塊引入檢查是否引入成功可以在引入的模塊中執行控制臺顯示以上代碼表示引入成功配置微信所有需要使用的頁面必須先注入配置信息，否則將無法調用開啟調試模式調用的所有的返回值會 1.安裝并引入JS-SDK依賴包這里是JS-SDK說明文檔 1.1 npm 下載依賴包 npm install weixin-js-sdk --save 1.2.在...

Joyven 2019-08-23 17:05 評論0 收藏0
vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

摘要：處理自己的邏輯四重點來了，解決微信無效的問題使用的網友都知道，路由上帶有做路由的跳轉，而在發過去做微信驗證的的時候，會被干掉，最終導致簽名無效。一，先登陸微信公眾號后臺綁定js安全域名，不需要加http或https，詳情百度。二、信公眾號后臺設置服務器的IP為白名單，否則無法獲取access_token，詳情百度三、引入wx-js-sdk 1.使用script標簽 http://...

jay_tian 2019-07-01 10:25 評論0 收藏0
vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

摘要：處理自己的邏輯四重點來了，解決微信無效的問題使用的網友都知道，路由上帶有做路由的跳轉，而在發過去做微信驗證的的時候，會被干掉，最終導致簽名無效。一，先登陸微信公眾號后臺綁定js安全域名，不需要加http或https，詳情百度。二、信公眾號后臺設置服務器的IP為白名單，否則無法獲取access_token，詳情百度三、引入wx-js-sdk 1.使用script標簽 http://...

keithxiaoy 2019-08-23 10:40 評論0 收藏0
vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

摘要：處理自己的邏輯四重點來了，解決微信無效的問題使用的網友都知道，路由上帶有做路由的跳轉，而在發過去做微信驗證的的時候，會被干掉，最終導致簽名無效。一，先登陸微信公眾號后臺綁定js安全域名，不需要加http或https，詳情百度。二、信公眾號后臺設置服務器的IP為白名單，否則無法獲取access_token，詳情百度三、引入wx-js-sdk 1.使用script標簽 http://...

付永剛 2019-08-02 11:08 評論0 收藏0