一直都想搞一下微信公眾號網頁開發,公司忙沒有時間自己也沒開發過所以也沒有頭緒,前兩天通過自己的摸索以及自行查詢的資料,終於通過nodejs在本地成功的獲取到了微信的access_token及簽名,以及呼叫微信的介面.因為筆者自己在做的時候費了挺長時間,沒有找到一個相對完整,詳細的一個專案借鑑,有很多的坑,所以下面我將詳細的把自己做的過程給大家講一下,從一開始的註冊微信公眾號到成功呼叫微信介面,以給那些還沒有開發過經驗的人借鑑,第一次寫文章,文筆不好,勿怪.

1.註冊一個微信公眾號

怎麼註冊微信公眾號,可以自行百度一下,網上很多註冊的教程,這裡就不浪費口舌了

2.開通"開發者模式"

在微信公眾平臺官網登入之後,我們第一步是要成為開發者,在首頁點選"基本配置",右邊會出現一個頁面,有個"成為開發者"按鈕,點選它,我這裡我已經是開發者了,所以已經沒有了

3.檢視基本資訊

成為開發者之後,可以看到如下頁面,我們可以看到自己的AppId和Appsecret(這個很重要,最好記在哪裡,記在手機/筆記本都可以)

4.申請微信公眾號測試賬號

為什麼申請測試賬號,一因為微信公眾號的介面它是有呼叫次數限制的,二是測試賬號比較方便,可以胡來,哈哈哈,點選"開發->開發者工具",就在之前點選的"基本配置"下面(如後面出現一些點選"xxx",一般都在頁面左側),可以看到如下頁面,選擇"公眾平臺測試賬號",然後我們需要用手機微信掃碼登入

5.測試賬號配置

登入成功之後,會看到下面的頁面,在我圈的紅色框中,填寫你的域名,比如我vue本地專案啟動成功後是localhost:9999,你就填localhost:9999,如果是雲伺服器域名,你就填你申請的域名,如www.xxx.com,上面的介面配置資訊暫時可以不用配置,到這裡我們已經完成了整個微信公眾號測試賬號的配置

6.建立vue專案

這裡的前提是你已經安裝了node並且會vue,我們通過vue-cli建立一個專案,建立專案過程的截圖我就不放出來了,移步到這裡檢視,如果看不懂,也可以自行百度一下 哈哈哈,網上也有很多怎麼通過vue-cli建立vue專案,我建立這個專案用的是vue-cli 2.0,現在已經是vue-cli 3.0,我自己也是在摸索中 嘿嘿...下面的圖就是通過vue-cli建立的專案

7.node配置

注意在上圖中,server資料夾是需要自行建立的,vue-cli建立的專案是沒有這個資料夾的,裡面放了相關的nodejs程式碼,接下來我們看看裡面都有什麼檔案,下圖中我給主要的檔案都作了註釋,其餘2個是連結Mysql資料庫的,我這裡就不講了,我自己也不是很會,也是參照別人的,哈哈哈,就不獻醜了

我們先看看api.js,這裡面就寫了一個方法是用來獲取access_token和簽名的,這裡用的是axios,所以在vue專案裡你要安裝axios.接下來我們先定義一下appId和appsecret,值就是你之前申請測試賬號時的appId和appsecret,請求地址在微信開發者文件裡有,移步微信開發者文件,獲取到access_token之後,我們通過access_token獲取微信簽名(微信簽名演算法在sign.js,稍後我會貼出來),然後返回獲取到的資料,這裡的定義的config物件也可以在微信開發者文件裡看,你也可以定義在前端-----我們是通過module.exports把程式碼暴露出去以便引用

微信簽名演算法

var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort();
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

/**
* @synopsis 簽名演算法 
*
* @param jsapi_ticket 用於簽名的 jsapi_ticket
* @param url 用於簽名的 url ，注意必須動態獲取，不能 hardcode
*
* @returns
*/
var sign = function (jsapi_ticket, url) {
  var ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  var string = raw(ret);
      jsSHA = require('jssha');
      shaObj = new jsSHA(string, 'TEXT');
  ret.signature = shaObj.getHash('SHA-1', 'HEX');

  return ret;
};

module.exports = sign;

我們再看一下router.js,程式碼很少,就是你前端要請求的路由地址,這裡我們要用到express,所以你也要保證你的vue專案裡的node_modules包裡有express,沒有你就安裝一下,不會安裝就百度(屢試不爽),反正你缺少什麼模組你就安裝什麼模組就行了,跑題了,繼續說下圖中的程式碼,我們引入之前的api.js,然後呼叫express.Router(express.Router可以認為是一個微型的只用來處理中介軟體與控制器的 app，它擁有和 app 類似的方法，例如 get、post、all、use 等等),定義了前端請求介面地址'/getToken',呼叫api.js裡定義的方法,也需要把router暴露出去

最後我們看看index.js,這裡我們把剛剛寫好的router.js引入進來,把express也引入進來,並且建立一個express應用程式app(就是第4行程式碼),設定一下請求頭和跨域還有返回的狀態碼,app.use()一下後端api路由,'/api'是呼叫中介軟體函式的路徑,我前端用了代理,請求路徑都增加了'/api',所以後端的所有請求路徑也要加上,最後app.listen(8088)監聽埠號(你喜歡什麼數字都行,埠號不用和我一樣)

下面我們通過cmder(或者你用window自帶的cmd命令開啟DOS視窗)進入server資料夾,輸入node index.js啟動8088埠,看啟動成功了...

8.啟動vue專案

也通過cmder進入到vue專案所在的目錄,npm run dev啟動

9.前端環境配置

然後我在static資料夾下面建立了一個js資料夾,裡面放了一個環境配置的檔案

本地請求介面是localhost:8088,你也可以新增生產環境的,我這裡還沒新增,比如

'production': { apiRoot: 'http://www.xxx.cn:8088'}

線上的不新增後面的埠號8088不知道可不可以我還沒試過…然後在index.html裡引用一下

在"src"資料夾下建立一個api資料夾,在此檔案下建立一個index.js,用來封裝我們前端的請求

這裡的window._ENV.apiRoot就是我在static資料夾裡的環境配置檔案, 之前我們已經在index.html引入過了,所以能在這裡用, 為什麼這裡要傳url,因為在node裡請求籤名的時候簽名演算法那裡需要

10.修改config配置

開啟vue專案下的config資料夾裡的index.js,設定一下代理,因為這裡添加了"/api",所以後端的都要加上,修改了配置,vue專案需要重新啟動一下

11.測試獲取token及簽名,並呼叫微信介面

我們先看看"src"資料夾裡的目錄結構,我把vue-cli自動建立的刪了部分,然後自己建立了部分

我們在pages資料夾裡建立一個頁面元件index

下面是index.vue裡的程式碼,這裡我用到iview,所以是<i-button>,還有一個非常重要,安裝一下微信jssdk,npm install weixin-js-sdk --save,也可以自行百度查一下怎麼安裝,不然你什麼功能都用不了,哈哈哈,我一開始就沒安裝,引入我們定義的api

把請求token的方法寫在methods裡,然後created的時候呼叫,我這裡寫了兩個按鈕進行測試,用到了獲取地理位置,開啟地址位置,微信掃一掃介面,這裡除了獲取地理位置,其他通過使用者互動的都寫在methods裡

12.使用微信開發者工具除錯

下載並安裝一下微信開發者工具(微信開發者工具下載),用二維碼登入,在位址列輸入你的vue啟動地址,就OK了,可以檢視介面是否呼叫成功了,這裡一開始獲取地理位置成功

點選了兩個按鈕之後,也是成功了看下圖,哈哈哈,很開心....

文章到這裡就結束了...大家也可以去我的github上檢視我的原始碼(專案地址),後面我會繼續寫一篇《如何將node + vue 專案部署到伺服器上,並呼叫微信介面》,大家可以先感受一些我線上的demo(線上demo),用手機微信開啟,access_token一天上限是2000次,如果你沒有體驗成功,可能就是到上限了,也可以關注我的微信公眾號,後面陸續的我會把文章釋出到微信公眾號上...附上公眾號的二維碼,目前還沒有釋出文章,不要嫌棄哈哈哈...如有問題可以在下面評論,或者指出我的問題,大家互相學習,謝謝...