微信程式開發系列教程（四）使用微信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.com/ui5

。 類型為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"){
    // 響應微信自定義二級菜單的點選
    }
  }
    }
    );