【Node.js 微信公衆號實戰】3.Node.js 自定義微信菜單

時間 2019-12-08

標籤 node.js node 微信公衆號實戰 3.node.js 自定義菜單欄目 Node.js 简体版

原文原文鏈接

1、寫在前面的話

上一篇文章中，咱們使用 Node.js 成功的實現了access_token 的獲取、存儲以及更新，這篇文章咱們來實現微信的自定義菜單功能。
javascript

2、自定義微信菜單

1.微信文檔步驟
在開始碼代碼以前，咱們依然是先理清實現的思路，再開始編寫實現代碼。打開微信幫助文檔，點擊左側菜單中的自定義菜單，點擊其子菜單自定義菜單建立接口，如圖：
html

由上圖咱們總結如下步驟：java

自定義微信請求是以 https POST請求方式
數據是以 JSON 格式傳入

2.實現 https POST請求node

緊接着上一篇文章的代碼，源碼地址: https://github.com/SilenceHVK... ，克隆到本地文件中git

git clone git@github.com:SilenceHVK/wechatByNode.git

打開 wechat 文件夾中的 wechat.js 文件，並在 WeChat 構造函數內部添加 requestPost 方法github

//用於處理 https Post請求方法
    this.requestPost = function(url,data){
        return new Promise(function(resolve,reject){
            //解析 url 地址
            var urlData = urltil.parse(url);
            //設置 https.request  options 傳入的參數對象
            var options={
                //目標主機地址
                hostname: urlData.hostname, 
                //目標地址 
                path: urlData.path,
                //請求方法
                method: 'POST',
                //頭部協議
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Content-Length': Buffer.byteLength(data,'utf-8')
                }
            };
            var req = https.request(options,function(res){
                var buffer = [],result = '';
                //用於監聽 data 事件 接收數據
                res.on('data',function(data){
                    buffer.push(data);
                });
                 //用於監聽 end 事件 完成數據的接收
                res.on('end',function(){
                    result = Buffer.concat(buffer).toString('utf-8');
                    resolve(result);
                })
            })
            //監聽錯誤事件
            .on('error',function(err){
                console.log(err);
                reject(err);
            });
            //傳入數據
            req.write(data);
            req.end();
        });
    }

在上一篇文章中，咱們使用到了 https 的 get 方法發。實際上 https 用於請求的底層方法則是 request 方法，而 get 方法只是對它的一個封裝，可是 Node.js 卻沒有對 post 進行封裝，直到如今 Node.js 8.0 依然沒有。具體詳情請看 Node.js 中文文檔。npm

提示：
npm 提供了不少用於請求的工具包，好比 request ( 安裝命令 npm install request ) 等。這裏我只是用系統包去作請求處理。json

3.配置建立微信菜單的鏈接
打開項目文件中的 config.json 文件，在 apiURL 中添加配置:api

"createMenu":"%scgi-bin/menu/create?access_token=%s"

4.微信菜單 JSON 格式
完成了上面的工做後，咱們就能夠開始微信菜單的建立了。按照微信幫助中菜單示例格式，咱們本身定義一個 JSON 格式：微信

{
     "button":[
        {    
          "type":"view",
          "name":"hvkcoder",
           "url":"http://www.cnblogs.com/hvkcode/"
        },
        {    
          "type":"click",
          "name":"今日推薦",
          "key":"today_recommend"
        },
        {    
          "name":"小工具",
          "sub_button":[{
               "type": "scancode_waitmsg", 
               "name": "掃一掃",
               "key": "scancode"
          },{
               "type": "pic_sysphoto", 
               "name": "系統拍照發圖",
                "key": "take_photo"
          },{
            "type": "location_select", 
            "name": "發送位置",
            "key": "send_location"
        }]
        }
     ]
}

並將它存放在 wechat 文件夾中的 menus.json 文件，如圖:

5.請求建立菜單API
將 menus.json 文件在 wechat.js 文件中引用。這塊呢，我就直接在微信接入的方法中去作菜單的建立：

var that = this;
    this.getAccessToken().then(function(data){
        //格式化請求鏈接
        var url = util.format(that.apiURL.createMenu,that.apiDomain,data);
        //使用 Post 請求建立微信菜單
        that.requestPost(url,JSON.stringify(menus)).then(function(data){
            //將結果打印
            console.log(data);
        });
    });

若是你目前用的是訂閱號的話，那麼很差意思朋友，你在運行結果就會看到：

錯誤意思是：api未經受權。騰訊本着「沒錢，玩你麻痹」的態度，指明訂閱號的朋友是不能經過 api 請求去自定義菜單的。

可是不要傷心，由於騰訊依然很貼心的爲咱們準備測試公衆號，再次打開微信幫助文檔，點擊右側的開始開發，點擊其子菜單接口測試號申請，如圖：

使用手機端微信，掃描二維碼後，咱們就獲得了一個測試公衆號。

其餘的信息咱們都不須要去管，主要去修改 appID 和 appsecret，並將 access_token.json 所保存的數據更改成：