微信程序开发系列教程(四)使用微信API创建公众号自定义菜单
2018-10-19 20:51
645 查看
大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。
这篇教程就教大家如何动手做一做。
这个教程最后实现的效果是:创建一个一级菜单“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"){ // 响应微信自定义二级菜单的点击 } } } );
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关文章推荐
- 微信程序开发系列教程(三)使用微信API给微信用户发文本消息
- 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序
- 微信小程序开发系列(四)——使用小程序还是APP开发的考虑
- 微信小程序开发教程系列-序言
- 微信小程序开发教程系列-序言
- 微信小程序开发系列(二) ——小程序开发说明书使用介绍
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bower开发Web程序
- Jfinal极速开发微信系列教程(一)--------------Jfinal_weixin demo的使用分析
- 微信小程序开发系列教程三:微信小程序的调试方法
- 微信程序开发系列教程(一)开发环境搭建
- 微信小程序开发之toast等弹框提示使用教程
- 微信小程序 (应用号)开发(教程)文档,内附开发工具及工具使用方法
- WordPress版微信小程序开发系列(二):安装使用问答
- 微信小程序使用百度api获取天气信息 —— 微信小程序教程系列(16)
- WordPress版微信小程序开发系列(二):安装使用问答
- 微信小程序开发教程之新手“出坑”系列
- 微信小程序开发教程(破解版IDE 无内测资格也可使用)