6 實現微信公眾號 自動回復功能


一 實先自動回復功能的邏輯步驟

  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會回復圖文消息,輸入其他內容會提示「你說的內容太復雜了,我理解不了」。

  到這里,簡單的公眾號自動回復的功能,我們就完成了。

 注意:因為官方文檔是處於更新狀態的,所以后面關於微信公眾號的知識點,可能跟最新的文檔有一定的差異,所以開發的時候還是要以最新的文檔為准。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM