微信程序開發系列教程（四）使用微信API建立公衆號自定義菜單

你們可能常常看到一些微信公衆號具備功能強大的自定義菜單，點擊以後能夠訪問不少有用的功能。

這篇教程就教你們如何動手作一作。

這個教程最後實現的效果是：建立一個一級菜單「UI5", 點擊以後彈出兩個二級菜單，以下圖藍色區域所示。每一個二級菜單都能完成一些任務。

那麼用什麼API建立這些自定義菜單呢？微信公衆號平臺技術文檔中，點擊"自定義菜單":

文檔裏給了建立自定義菜單須要維護參數的HTTPpost報文的格式：

回到個人例子，我用postman發送這個HTTP post請求：

這是我HTTP post的報文內容：

{

"button":[

{

"name":"UI5",

"sub_button":[{

"type": "view",

"name": "Jerry List",

"url": "http://wechatjerry.herokuapp.com/ui5"

},{

"type": "click",

"name": "Other UI5 application",

"key": "dataQuery"

}]

}

]

}

上述json格式的報文定義了一個一級菜單，標籤文本爲UI5。兩個二級菜單(sub_button)，類型分別爲view和click。

view類型即綁定一個HTML頁面到該二級菜單，點擊以後跳轉到這個頁面去。個人例子綁定的html頁面是http://wechatjerry.herokuapp....。 類型爲click的菜單很好理解，點擊後，微信平臺會發送一個事件給您公衆號的微信服務器上。您須要在您的微信服務器裏對這個時間作處理。事件類型經過參數key指定，我上述例子的類型是dataQuery，這個參數能夠隨意指定。

響應類型爲click的微信自定義二級菜單的僞代碼以下：

app.route('/').post(function(req,res){
    req.on("end",function(){
        var msgType = formattedValue(getXMLNodeValue('MsgType', content));
        if( msgType === "event"){
            var eventKey = formattedValue(getXMLNodeValue('EventKey', content));
            if( eventKey === "dataQuery"){
                // 響應微信自定義二級菜單的點擊
            }
        }
    }
    );

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: