微信程序开发系列教程(四)使用微信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"){
				// 响应微信自定义二级菜单的点击
			}
		}
	}
	);

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

247100
来自专栏卡少编程之旅

fiddler抓包工具(windows)

904150
来自专栏开发之途

用WordPress搭建个人网站(1)

62560
来自专栏自由而无用的灵魂的碎碎念

解决每次从cmd进入sqlplus,都得重新设置pagesize、linesize的问题

如上图,经过测试,主要需要更改屏幕缓冲区大小,这里更改宽度为130。为防止每次进入cmd都调节窗口的大小,这里设置窗口大小,宽度为与缓冲区一致。

10520
来自专栏十月梦想

node读取文件进阶(详解)

刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访...

9520
来自专栏糊涂一二事

微信小程序文件上传下载应用场景

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。基于微信小程序轻便、快捷的特点,使用腾讯云简...

7.3K20
来自专栏py+selenium

py+selenium 直接给日期赋值,控制台调试报错【已解决】

         其实既然可以去除readonly属性,那就可以直接给属性赋值,将两行代码缩为一行。

25430
来自专栏张善友的专栏

Remoting: Server encountered an internal error

发生这个错误的原因是Remoting的一个配置项: <customErrors> 元素   指示此应用程序域中的服务器通道是否将经筛选的或完整的异常信息返回给本...

20370
来自专栏吴伟祥

java web项目修改favicon.ico图标的方式

修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式

18440
来自专栏我是业余自学C/C++的

Mac下vim的配置文件

13210

扫码关注云+社区

领取腾讯云代金券