摘要：一直都想搞一下微信公眾號(hào)網(wǎng)頁(yè)開(kāi)發(fā)公司忙沒(méi)有時(shí)間自己也沒(méi)開(kāi)發(fā)過(guò)所以也沒(méi)有頭緒前兩天通過(guò)自己的摸索以及自行查找的資料終于通過(guò)在本地成功的獲取到了微信的及簽名以及調(diào)用微信的接口因?yàn)楣P者自己在做的時(shí)候費(fèi)了挺長(zhǎng)時(shí)間沒(méi)有找到一個(gè)相對(duì)完整詳細(xì)的一個(gè)項(xiàng)目借

一直都想搞一下微信公眾號(hào)網(wǎng)頁(yè)開(kāi)發(fā),公司忙沒(méi)有時(shí)間自己也沒(méi)開(kāi)發(fā)過(guò)所以也沒(méi)有頭緒,前兩天通過(guò)自己的摸索以及自行查找的資料,終于通過(guò)nodejs在本地成功的獲取到了微信的access_token及簽名,以及調(diào)用微信的接口.因?yàn)楣P者自己在做的時(shí)候費(fèi)了挺長(zhǎng)時(shí)間,沒(méi)有找到一個(gè)相對(duì)完整,詳細(xì)的一個(gè)項(xiàng)目借鑒,有很多的坑,所以下面我將詳細(xì)的把自己做的過(guò)程給大家講一下,從一開(kāi)始的注冊(cè)微信公眾號(hào)到成功調(diào)用微信接口,以給那些還沒(méi)有開(kāi)發(fā)過(guò)經(jīng)驗(yàn)的人借鑒,第一次寫(xiě)文章,文筆不好,勿怪.

怎么注冊(cè)微信公眾號(hào),可以自行百度一下,網(wǎng)上很多注冊(cè)的教程,這里就不浪費(fèi)口舌了

在微信公眾平臺(tái)官網(wǎng)登錄之后,我們第一步是要成為開(kāi)發(fā)者,在首頁(yè)點(diǎn)擊"基本配置",右邊會(huì)出現(xiàn)一個(gè)頁(yè)面,有個(gè)"成為開(kāi)發(fā)者"按鈕,點(diǎn)擊它,我這里我已經(jīng)是開(kāi)發(fā)者了,所以已經(jīng)沒(méi)有了

成為開(kāi)發(fā)者之后,可以看到如下頁(yè)面,我們可以看到自己的AppId和Appsecret(這個(gè)很重要,最好記在哪里,記在手機(jī)/筆記本都可以)

為什么申請(qǐng)測(cè)試賬號(hào),一因?yàn)槲⑿殴娞?hào)的接口它是有調(diào)用次數(shù)限制的,二是測(cè)試賬號(hào)比較方便,可以胡來(lái),哈哈哈,點(diǎn)擊"開(kāi)發(fā)->開(kāi)發(fā)者工具",就在之前點(diǎn)擊的"基本配置"下面(如后面出現(xiàn)一些點(diǎn)擊"xxx",一般都在頁(yè)面左側(cè)),可以看到如下頁(yè)面,選擇"公眾平臺(tái)測(cè)試賬號(hào)",然后我們需要用手機(jī)微信掃碼登錄

登錄成功之后,會(huì)看到下面的頁(yè)面,在我圈的紅色框中,填寫(xiě)你的域名,比如我vue本地項(xiàng)目啟動(dòng)成功后是localhost:9999,你就填localhost:9999,如果是云服務(wù)器域名,你就填你申請(qǐng)的域名,如www.xxx.com,上面的接口配置信息暫時(shí)可以不用配置,到這里我們已經(jīng)完成了整個(gè)微信公眾號(hào)測(cè)試賬號(hào)的配置

這里的前提是你已經(jīng)安裝了node并且會(huì)vue,我們通過(guò)vue-cli創(chuàng)建一個(gè)項(xiàng)目,創(chuàng)建項(xiàng)目過(guò)程的截圖我就不放出來(lái)了,移步到這里查看,如果看不懂,也可以自行百度一下 哈哈哈,網(wǎng)上也有很多怎么通過(guò)vue-cli創(chuàng)建vue項(xiàng)目,我創(chuàng)建這個(gè)項(xiàng)目用的是vue-cli 2.0,現(xiàn)在已經(jīng)是vue-cli 3.0,我自己也是在摸索中 嘿嘿...下面的圖就是通過(guò)vue-cli創(chuàng)建的項(xiàng)目

注意在上圖中,server文件夾是需要自行創(chuàng)建的,vue-cli創(chuàng)建的項(xiàng)目是沒(méi)有這個(gè)文件夾的,里面放了相關(guān)的nodejs代碼,接下來(lái)我們看看里面都有什么文件,下圖中我給主要的文件都作了注釋,其余2個(gè)是鏈接Mysql數(shù)據(jù)庫(kù)的,我這里就不講了,我自己也不是很會(huì),也是參照別人的,哈哈哈,就不獻(xiàn)丑了

我們先看看api.js,這里面就寫(xiě)了一個(gè)方法是用來(lái)獲取access_token和簽名的,這里用的是axios,所以在vue項(xiàng)目里你要安裝axios.接下來(lái)我們先定義一下appId和appsecret,值就是你之前申請(qǐng)測(cè)試賬號(hào)時(shí)的appId和appsecret,請(qǐng)求地址在微信開(kāi)發(fā)者文檔里有,移步微信開(kāi)發(fā)者文檔,獲取到access_token之后,我們通過(guò)access_token獲取微信簽名(微信簽名算法在sign.js,稍后我會(huì)貼出來(lái)),然后返回獲取到的數(shù)據(jù),這里的定義的config對(duì)象也可以在微信開(kāi)發(fā)者文檔里看,你也可以定義在前端-----我們是通過(guò)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 ，注意必須動(dòng)態(tài)獲取，不能 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;

我們?cè)倏匆幌聄outer.js,代碼很少,就是你前端要請(qǐng)求的路由地址,這里我們要用到express,所以你也要保證你的vue項(xiàng)目里的node_modules包里有express,沒(méi)有你就安裝一下,不會(huì)安裝就百度(屢試不爽),反正你缺少什么模塊你就安裝什么模塊就行了,跑題了,繼續(xù)說(shuō)下圖中的代碼,我們引入之前的api.js,然后調(diào)用express.Router(express.Router可以認(rèn)為是一個(gè)微型的只用來(lái)處理中間件與控制器的 app，它擁有和 app 類似的方法，例如 get、post、all、use 等等),定義了前端請(qǐng)求接口地址"/getToken",調(diào)用api.js里定義的方法,也需要把router暴露出去

最后我們看看index.js,這里我們把剛剛寫(xiě)好的router.js引入進(jìn)來(lái),把express也引入進(jìn)來(lái),并且創(chuàng)建一個(gè)express應(yīng)用程序app(就是第4行代碼),設(shè)置一下請(qǐng)求頭和跨域還有返回的狀態(tài)碼,app.use()一下后端api路由,"/api"是調(diào)用中間件函數(shù)的路徑,我前端用了代理,請(qǐng)求路徑都增加了"/api",所以后端的所有請(qǐng)求路徑也要加上,最后app.listen(8088)監(jiān)聽(tīng)端口號(hào)(你喜歡什么數(shù)字都行,端口號(hào)不用和我一樣)

下面我們通過(guò)cmder(或者你用window自帶的cmd命令打開(kāi)DOS窗口)進(jìn)入server文件夾,輸入node index.js啟動(dòng)8088端口,看啟動(dòng)成功了...

也通過(guò)cmder進(jìn)入到vue項(xiàng)目所在的目錄,npm run dev啟動(dòng)

然后我在static文件夾下面創(chuàng)建了一個(gè)js文件夾,里面放了一個(gè)環(huán)境配置的文件

本地請(qǐng)求接口是localhost:8088,你也可以添加生產(chǎn)環(huán)境的,我這里還沒(méi)添加,比如

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

線上的不添加后面的端口號(hào)8088不知道可不可以我還沒(méi)試過(guò)…然后在index.html里引用一下

在"src"文件夾下創(chuàng)建一個(gè)api文件夾,在此文件下創(chuàng)建一個(gè)index.js,用來(lái)封裝我們前端的請(qǐng)求

這里的window._ENV.apiRoot就是我在static文件夾里的環(huán)境配置文件, 之前我們已經(jīng)在index.html引入過(guò)了,所以能在這里用, 為什么這里要傳url,因?yàn)樵趎ode里請(qǐng)求簽名的時(shí)候簽名算法那里需要

打開(kāi)vue項(xiàng)目下的config文件夾里的index.js,設(shè)置一下代理,因?yàn)檫@里添加了"/api",所以后端的都要加上,修改了配置,vue項(xiàng)目需要重新啟動(dòng)一下

我們先看看"src"文件夾里的目錄結(jié)構(gòu),我把vue-cli自動(dòng)創(chuàng)建的刪了部分,然后自己創(chuàng)建了部分

我們?cè)趐ages文件夾里創(chuàng)建一個(gè)頁(yè)面組件index

下面是index.vue里的代碼,這里我用到iview,所以是,還有一個(gè)非常重要,安裝一下微信jssdk,npm install weixin-js-sdk --save,也可以自行百度查一下怎么安裝,不然你什么功能都用不了,哈哈哈,我一開(kāi)始就沒(méi)安裝,引入我們定義的api

把請(qǐng)求token的方法寫(xiě)在methods里,然后created的時(shí)候調(diào)用,我這里寫(xiě)了兩個(gè)按鈕進(jìn)行測(cè)試,用到了獲取地理位置,打開(kāi)地址位置,微信掃一掃接口,這里除了獲取地理位置,其他通過(guò)用戶交互的都寫(xiě)在methods里

下載并安裝一下微信開(kāi)發(fā)者工具(微信開(kāi)發(fā)者工具下載),用二維碼登錄,在地址欄輸入你的vue啟動(dòng)地址,就OK了,可以查看接口是否調(diào)用成功了,這里一開(kāi)始獲取地理位置成功

點(diǎn)擊了兩個(gè)按鈕之后,也是成功了看下圖,哈哈哈,很開(kāi)心....

文章到這里就結(jié)束了...大家也可以去我的github上查看我的源碼(項(xiàng)目地址),后面我會(huì)繼續(xù)寫(xiě)一篇《如何將node + vue 項(xiàng)目部署到服務(wù)器上,并調(diào)用微信接口》,大家可以先感受一些我線上的demo(線上demo),用手機(jī)微信打開(kāi),access_token一天上限是2000次,如果你沒(méi)有體驗(yàn)成功,可能就是到上限了,也可以關(guān)注我的微信公眾號(hào),后面陸續(xù)的我會(huì)把文章發(fā)布到微信公眾號(hào)上...附上公眾號(hào)的二維碼,目前還沒(méi)有發(fā)布文章,不要嫌棄哈哈哈...如有問(wèn)題可以在下面評(píng)論,或者指出我的問(wèn)題,大家互相學(xué)習(xí),謝謝...