一 實先自動回復功能的邏輯步驟
1 處理POST類型的控制邏輯,接收XML的數據包;
2 解析XML數據包(獲得數據包的消息類型或者是事件類型);
3 拼裝我們定義好的消息;
4 包裝成XML格式;
5 在5秒內返回回去
二 代碼實操--實現關注公眾號自動回復功能
本節代碼參照上節課繼續修改和完善,目錄結構跟之前相同,新引入的模塊raw-body使用npm install安裝一下即可,app.js啟動文件和util.js不做變動,主要修改一下generator.js文件,以及在generator.js同級目錄下新建wechat.js文件和tools.js文件。
wechat.js文件是將前一節generator.js文件中票據部分的代碼抽離出來單獨放在一個文件中,具體代碼如下:
'use strict'; // 引入模塊 var Promise = require('bluebird'); var request = Promise.promisify(require('request')); //增加url配置項 var prefix = 'https://api.weixin.qq.com/cgi-bin/'; var api = { accessToken: prefix + 'token?grant_type=client_credential' }; //利用構造函數生成實例 完成票據存儲邏輯 function weChat(opts) { var that = this; this.appID = opts.appID; this.appSecret = opts.appSecret; this.getAccessToken = opts.getAccessToken; this.saveAccessToken = opts.saveAccessToken; //獲取票據的方法 this.getAccessToken() .then(function(data) { //從靜態文件獲取票據,JSON化數據,如果有異常,則嘗試更新票據 try { data = JSON.parse(data); } catch (e) { return that.updateAccessToken(); } //判斷票據是否在有效期內,如果合法,向下傳遞票據,如果不合法,更新票據 if (that.isValidAccessToken(data)) { Promise.resolve(data); } else { return that.updateAccessToken(); } }) //將拿到的票據信息和有效期信息存儲起來 .then(function(data) { //console.log(data); that.access_token = data.access_token; that.expires_in = data.expires_in; that.saveAccessToken(data); }) }; //在weChat的原型鏈上增加驗證有效期的方法 weChat.prototype.isValidAccessToken = function(data) { //進行判斷,如果票據不合法,返回false if (!data || !data.access_token || !data.expires_in) { return false; } //拿到票據和過期時間的數據 var access_token = data.access_token; var expires_in = data.expires_in; //獲取當前時間 var now = (new Date().getTime()); //如果當前時間小於票據過期時間,返回true,否則返回false if (now < expires_in) { return true; } else { return false; }; }; //在weChat的原型鏈上增加更新票據的方法 weChat.prototype.updateAccessToken = function() { var appID = this.appID; var appSecret = this.appSecret; var url = api.accessToken + '&appid=' + appID + '&secret=' + appSecret; return new Promise(function(resolve, reject) { //使用request發起請求 request({ url: url, json: true }).then(function(response) { var data = response.body; var now = (new Date().getTime()); var expires_in = now + (data.expires_in - 20) * 1000; //把新票據的有效時間賦值給data data.expires_in = expires_in; resolve(data); }) }) }; //向外暴露weChat module.exports = weChat;
generator.js文件進行精簡后,添加判斷對xml數據的格式化方法以及判斷事件,添加關注事件測試信息,具體代碼如下:
'use strict'; // 引入模塊 var sha1 = require('sha1'); var getRawBody = require('raw-body'); var weChat = require('./wechat'); var tools = require('./tools'); // 建立中間件函數並暴露出去 module.exports = function(opts, handler) { //實例化weChat()函數 //var wechat = new weChat(opts); return function*(next) { //console.log(this.query); var that = this; var token = opts.token; var signature = this.query.signature; var nonce = this.query.nonce; var timestamp = this.query.timestamp; var echostr = this.query.echostr; // 進行字典排序 var str = [token, timestamp, nonce].sort().join(''); // 進行加密 var sha = sha1(str); //使用this.method對請求方法進行判斷 if (this.method === 'GET') { // 如果是get請求 判斷加密后的值是否等於簽名值 if (sha === signature) { this.body = echostr + ''; } else { this.body = 'wrong'; }; } else if (this.method === 'POST') { //如果是post請求 也是先判斷簽名是否合法 如果不合法 直接返回wrong if (sha !== signature) { this.body = 'wrong'; return false; }; //通過raw-body模塊 可以把把this上的request對象 也就是http模塊中的request對象 去拼裝它的數據 最終拿到一個buffer的xml數據 //通過yield關鍵字 獲取到post過來的原始的XML數據 var data = yield getRawBody(this.req, { length: this.length, limit: '1mb', encoding: this.charset }); //console.log(data.toString());打印XML數據(當微信公眾號有操作的時候 終端可以看到返回的XML數據) //tools為處理XML數據的工具包 使用tools工具包的parseXMLAsync方法 把XML數據轉化成數組對象 var content = yield tools.parseXMLAsync(data); //console.log(content);打印轉化后的數組對象 //格式化content數據為json對象 var message = tools.formatMessage(content.xml); console.log(message); //打印message //判斷message的MsgType 如果是event 則是一個事件 if (message.MsgType === 'event') { //如果是訂閱事件 if (message.Event === 'subscribe') { //獲取當前時間戳 var now = new Date().getTime(); //設置回復狀態是200 that.status = 200; //設置回復的類型是xml格式 that.type = 'application/xml'; //設置回復的主體 that.body = '<xml>' + '<ToUserName><![CDATA[' + message.FromUserName + ']]></ToUserName>' + '<FromUserName><![CDATA[' + message.ToUserName + ']]></FromUserName>' + '<CreateTime>' + now + '</CreateTime>' + '<MsgType><![CDATA[text]]></MsgType>' + '<Content><![CDATA[你好,同學!]]></Content>' + '</xml>'; return; } } } } };
tools.js是處理XML數據的工具文件:
'use strict'; //引入模塊 var xml2js = require('xml2js'); var Promise = require('bluebird'); //導出解析XML的方法 exports.parseXMLAsync = function(xml) { return new Promise(function(resolve, reject) { xml2js.parseString(xml, { trim: true }, function(err, content) { if (err) { reject(err); } else { resolve(content); }; }); }); }; //因為value值可能是嵌套多層的 所以先對value值進行遍歷 function formatMessage(result) { //聲明空對象message var message = {}; //對result類型進行判斷 if (typeof result === 'object') { //如果是object類型 通過Object.keys()方法拿到result所有的key 並存入keys變量中 var keys = Object.keys(result); //對keys進行循環遍歷 for (var i = 0; i < keys.length; i++) { //拿到每個key對應的value值 var item = result[keys[i]]; //拿到key var key = keys[i]; //判斷item是否為數組或者長度是否為0 if (!(item instanceof Array) || item.length === 0) { //如果item不是數組或者長度為0 則跳過繼續向下解析 continue; } //如果長度為1 if (item.length === 1) { //拿到value值存入val變量 var val = item[0]; //判斷val是否為對象 if (typeof val === 'object') { //如果val為對象 則進一步進行遍歷 message[key] = formatMessage(val); } else { //如果不是對象 就把值賦給當前的key放入message里 並去除收尾空格 message[key] = (val || '').trim(); } } //如果item的長度既不是0也不是1 則說明它是一個數組 else { //把message的key設置為空數組 message[key] = []; //對數組進行遍歷 for (var j = 0, k = item.length; j < k; j++) { message[key].push(formatMessage(item[j])); } } } } return message; } exports.formatMessage = function(xml) { return new Promise(function(resolve, reject) { xml2js.parseString(xml, { trim: true }, function(err, content) { if (err) { reject(err); } else { resolve(content); }; }); }); }; exports.formatMessage = formatMessage;
以上代碼完成后,當關注微信測試公眾號的時候,會自動回復『你好,同學!』的提示信息。
三 封裝消息響應模塊
上面,我們已經實現了關注微信測試公眾號自動回復的功能。但是,在generator.js的代碼中回復主體部分,使用的是字符串拼接的方式,而且是寫死的只能針對「關注事件」響應回復消息,顯然這並不是我們想要的效果,從微信公眾平台的開發文檔,我們可以看到,有如下如所示的這么多種消息回復類型:

這么多種消息回復類型,如果我們像之前代碼中寫的那樣,使用字符串拼接的方式來實現,很顯然,這並不科學:

一方面,以這種字符串拼接的方式來設置消息回復繁瑣易出錯,另一方面,將消息回復的代碼放在generator.js里也不是一種科學的書寫方式,我們最好把消息回復的這些代碼封裝成一個獨立的消息響應模塊,然后給集成到weChat()這個構造函數上,讓生成的實例幫我們完成其他事情。
在消息響應模塊中,我們使用了EJS和heredoc這兩個模塊,用於處理模板數據格式,同樣是使用npm install命令安裝模塊就可以了。
新建模板文件template.js,用於存放回復消息模板以及一些處理函數:
'use strict'; //引入ejs模塊 EJS是一個JavaScript模板庫 用來從JSON數據中生成HTML字符串 var ejs = require('ejs'); //引入heredoc模塊 heredoc是一個簡易的模版 用來組織復雜文本串 簡化的代碼難度 是用來引用字符串的一種方式 var heredoc = require('heredoc'); //針對不同的消息類型獲取不同的模板 var template = heredoc(function() { /* <xml> <ToUserName><![CDATA[<%= toUserName %>]]></ToUserName> <FromUserName><![CDATA[<%= fromUserName %>]]></FromUserName> <CreateTime> <%= createTime %></CreateTime> <MsgType><![CDATA[<%= msgType %>]]></MsgType> <% if (msgType === 'text'){ %> <Content><![CDATA[<%= content %>]]></Content> <% } else if (msgType === 'image'){ %> <Image> <MediaId><![CDATA[<%= content.media_id %>]]></MediaId> </Image> <% } else if (msgType === 'voice'){ %> <Voice> <MediaId><![CDATA[<%= content.media_id %>]]></MediaId> </Voice> <% } else if (msgType === 'video'){ %> <Video> <MediaId><![CDATA[<%= content.media_id %>]]></MediaId> <Title><![CDATA[<%= content.title %>]]></Title> <Description><![CDATA[<%= content.description %>]]></Description> </Video> <% } else if (msgType === 'music'){ %> <Music> <Title><![CDATA[<%= content.TITLE %>]]></Title> <Description><![CDATA[<%= content.DESCRIPTION %>]]></Description> <MusicUrl><![CDATA[<%= content.musicUrl %>]]></MusicUrl> <HQMusicUrl><![CDATA[<%= content.hqMusicUrl %>]]></HQMusicUrl> <ThumbMediaId><![CDATA[<%= content.thumbMediaId %>]]></ThumbMediaId> </Music> <% } else if (msgType === 'news'){ %> <ArticleCount><%= content.length %></ArticleCount> <Articles> <%= content.forEach(function(item){ %> <item> <Title><![CDATA[<%= item.title %>]]></Title> <Description><![CDATA[<%= item.description %>]]></Description> <PicUrl><![CDATA[<%= item.picUrl %>]]></PicUrl> <Url><![CDATA[<%= item.url %>]]></Url> </item> <% }) %> </Articles> <% } %> </xml> */ }); //編譯template模板 var compiled = ejs.compile(template); //向外暴露模板 exports = module.exports = { compiled:compiled };
消息響應模塊已經完成,現在,可以把generator.js里事件判斷和消息回復部分的代碼進行重新調整:
//格式化content數據為json對象 var message = tools.formatMessage(content.xml); console.log(message);//打印message //將message掛載到this.weixin上 this.weixin = message; //使用yield next將控制權交出去 交給業務層 讓業務層決定如何對解析后的微信消息做分析和回復 yield handler.call(this, next); //進行回復 wechat.reply.call(this);
可以看到,之前截圖的不科學部分的代碼,已經刪掉了,而消息回復的部分指向了reply的方法,而這個方法,我們還沒有添加,現在打開wechat.js文件:
//在weChat的原型鏈上增加reply方法 weChat.prototype.reply = function() { var content = this.body; var message = this.weixin; //調用工具函數 var xml = tools.template(content, message); //設置回復狀態是200 this.status = 200; //設置回復的類型是xml格式 this.type = 'application/xml'; //設置回復主體 this.body = xml; }; //向外暴露weChat module.exports = weChat;
在reply方法中,調用了工具函數tools里的template方法,處理消息模板,打開tools.js文件,記得要先引入我們之間寫好的template.js文件:
var template = require('./template');
然后聲明創建template方法:
//暴露消息模板工具 exports.template = function(content, message){ //聲明info對象臨時存儲回復的內容 var info = {} //設置默認類型為text var type = 'text'; //設置獲取的基本信息 var fromUserName = message.FromUserName; var toUserName = message.ToUserName; //如果content是一個數組 那么content即為圖文消息 if(Array.isArray(content)){ type = 'news'; }; //或者通過content的type進行覆蓋 或者使用默認類型 type = content.type || type; //把content賦給info info.content = content; //獲取時間戳 info.createTime = new Date().getTime(); //將type值給msgType info.msgType = type; //回復回去的用戶 info.toUserName = fromUserName; info.fromUserName = toUserName; //返回 return template.compiled(info); };
現在,消息響應模塊這部分的代碼,我們已經修改完了。
四 完成消息自動回復的功能
這部分,我們將完成消息自動回復的功能,為了盡可能的重用代碼,我們把配置相關的代碼單獨拿出來,放在config.js文件中,在model下新建配置文件config.js,將入口啟動文件app.js里的配置信息拿出來放到config.js里:
'use strict'; //引入第三方模塊 var path = require('path'); var util = require('../libs/util'); //引入文本文件 var wechat_file = path.join(__dirname, '../accesstokendata/wechat.txt'); // 聲明對象字面量config 用於存儲配置信息、讀取寫入票據的方法 var config = { wechat: { appID: 'wx044125d0a173dd15', appSecret: '21295f049b49fe324d7302186c294fe7', token: 'beijingjiangweiwechatlearntokenvalueabcdefg', getAccessToken:function(){ return util.readFileAsync(wechat_file); }, saveAccessToken:function(data){ data = JSON.stringify(data); return util.writeFileAsync(wechat_file, data); } } }; //將config暴露出去 module.exports = config;
然后,修改入口啟動文件app.js:
'use strict'; // 引入模塊 var Koa = require('koa'); var path = require('path'); //引入中間件 var generator = require('./model/generator'); var util = require('./libs/util'); //引入配置文件config var config = require('./model/config'); //引入回復文件 var weixin = require('./model/weixin'); //引入文本文件 var wechat_file = path.join(__dirname, './accesstokendata/wechat.txt'); // 實例化Koa的web服務器 var app = new Koa(); //傳入配置參數和回復內容 app.use(generator(config.wechat, weixin.reply)); //監聽3100端口 app.listen(3100); console.log('listening:3100');
在啟動文件里,我們將config.js文件引入了,並且,新引入了weixin這個文件(在這個文件中,我們可以存放回復、支付等方法,這里只添加了回復的方法),並在app.use里添加了weixin.reply方法,新建文件weixin.js文件,寫入如下內容:
'use strict'; //向外暴露reply接口 這里使用了生成器函數 exports.reply = function*(next) { var message = this.weixin; //判斷用戶行為 是普通消息還是事件推送 if (message.MsgType === 'event') { //訂閱事件 分為搜索訂閱和二維碼訂閱 if (message.Event === 'subscribe') { if (message.EventKey) { console.log('掃描二維碼進來' + message.EventKey + ' ' + message.ticket); } //通過this.body設置回復消息 this.body = '歡迎訂閱我的公眾號'; } //取消訂閱事件 else if (message.Event === 'unsubscribe') { console.log('用戶取消了關注'); this.body = ''; } } else { } yield next; };
在weixin.js文件中,我們添加了針對訂閱/取消訂閱進行消息回復的業務邏輯。
我們來測試一下關注和取消關注的時候,邏輯是否能跑通,還是在終端項目目錄下,使用node app命令啟動服務,然后另開一個終端窗口,啟動魔法隧道內網映射,在微信公眾號開發文檔里登錄我們的測試號,取消關注時,控制台會出現提示信息:

重新關注后,微信公眾號會有提示信息『歡迎訂閱我的公眾號』,如下圖所示:

這個過程,也許不會這么順利,大家可以根據控制台的報錯信息,耐心仔細調整代碼,沒有其他捷徑可走......
下面我們來添加一些其他的事件處理邏輯,還是在weixin.js文件中:
'use strict'; //向外暴露reply接口 這里使用了生成器函數 exports.reply = function*(next) { var message = this.weixin; //判斷用戶行為 是事件推送還是普通消息 先判斷的是事件推送 if (message.MsgType === 'event') { //訂閱事件 分為搜索訂閱和二維碼訂閱 if (message.Event === 'subscribe') { if (message.EventKey) { console.log('掃描二維碼進來' + message.EventKey + ' ' + message.ticket); } //通過this.body設置回復消息 this.body = '歡迎訂閱我的公眾號'; } //取消訂閱事件 else if (message.Event === 'unsubscribe') { console.log('用戶取消了關注'); this.body = ''; } //地理位置事件 else if (message.Event === 'LOCATION') { this.body = '您上報的位置是:' + message.Latitude + '/' + message.Longitude + '-' + message.Precision; } //點擊事件 自定義菜單事件 else if (message.Event === 'CLICK') { this.body = '您點擊了菜單:' + message.EventKey; } //跳轉鏈接事件 點擊菜單跳轉鏈接時的事件推送 else if (message.Event === 'VIEW') { this.body = '您點擊了菜單中的鏈接:' + message.EventKey; } //掃描事件 else if (message.Event === 'SCAN') { console.log('關注后掃描二維碼' + message.EventKey + ' ' + message.Ticket); this.body = '看到你掃一下哦'; } } //普通消息 文本消息 else if (message.MsgType === 'text') { var content = message.Content; //除了回復策略里的內容就回復這句 var reply = '額,你說的' + message.Content + '太復雜了,我理解不了'; //回復策略--文本 if (content === '1') { reply = '我是回復策略中的第一條'; } else if (content === '2') { reply = '我是回復策略中的第二條'; } else if (content === '3') { reply = '我是回復策略中的第三條'; } //回復策略--圖文 else if(content === '4'){ reply = [{ title:'放開她,讓我來!', description:'放開她,讓我來!', picUrl:'http://ww2.sinaimg.cn/large/bd698b0fjw1eev97qkg05j20dw092dg3.jpg' },{ title:'腿毛與秋褲', description:'腿毛與秋褲', picUrl:'http://upload.qqbody.com/allimg/1611/1203245I7-8.jpg' }] } //將回復reply交給body this.body = reply; } yield next; };
嘻嘻,上面是一些簡單的回復類型判斷以及回復的消息,我測試了下,當回復1、2、3時,會回復文本消息,4會回復圖文消息,輸入其他內容會提示「你說的內容太復雜了,我理解不了」。


到這里,簡單的公眾號自動回復的功能,我們就完成了。
注意:因為官方文檔是處於更新狀態的,所以后面關於微信公眾號的知識點,可能跟最新的文檔有一定的差異,所以開發的時候還是要以最新的文檔為准。
