大家可能經常看到一些微信公衆号具有功能強大的自定義菜單,點選之後可以通路很多有用的功能。
這篇教程就教大家如何動手做一做。
這個教程最後實作的效果是:建立一個一級菜單“UI5", 點選之後彈出兩個二級菜單,如下圖藍色區域所示。每個二級菜單都能完成一些任務。
這是我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"){
// 響應微信自定義二級菜單的點選
}
}
}
);