连小白都能看懂的微信开发之自定义菜单以及自定义菜单推送事件

52次阅读

共计 9503 个字符,预计需要花费 24 分钟才能阅读完成。

微信开发之自定义菜单以及自定义菜单推送事件
自定义菜单创建接口
微信提供 2 种机制生成菜单
机制一
是在公众平台官网通过网站功能发布菜单,这种方式接入后台服务器之后菜单会失效。

机制二
是通过 API 调用设置的菜单
微信官方文档是这样子描述:
1、自定义菜单最多包括 3 个一级菜单,每个一级菜单最多包含 5 个二级菜单。
2、一级菜单最多 4 个汉字,二级菜单最多 7 个汉字,多出来的部分将会以“…”代替。
3、创建自定义菜单后,菜单的刷新策略是,在用户进入公众号会话页或公众号 profile 页时,如果发现上一次拉取菜单的请求在 5 分钟以前,就会拉取一下菜单,如果菜单有更新,就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注,则可以看到创建后的效果。
自定义菜单接口类型按钮,如下 10 种:
1、click:点击推事件用户点击 click 类型按钮后,微信服务器会通过消息接口推送消息类型为 event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的 key 值,开发者可以通过自定义的 key 值与用户进行交互;
2、view:跳转 URL 用户点击 view 类型按钮后,微信客户端将会打开开发者在按钮中填写的网页 URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息。
3、scancode_push:扫码推事件用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是 URL,将进入 URL),且会将扫码的结果传给开发者,开发者可以下发消息。
4、scancode_waitmsg:扫码推事件且弹出“消息接收中”提示框用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后,将扫码的结果传给开发者,同时收起扫一扫工具,然后弹出“消息接收中”提示框,随后可能会收到开发者下发的消息。
5、pic_sysphoto:弹出系统拍照发图用户点击按钮后,微信客户端将调起系统相机,完成拍照操作后,会将拍摄的相片发送给开发者,并推送事件给开发者,同时收起系统相机,随后可能会收到开发者下发的消息。
6、pic_photo_or_album:弹出拍照或者相册发图用户点击按钮后,微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。
7、pic_weixin:弹出微信相册发图器用户点击按钮后,微信客户端将调起微信相册,完成选择操作后,将选择的相片发送给开发者的服务器,并推送事件给开发者,同时收起相册,随后可能会收到开发者下发的消息。
8、location_select:弹出地理位置选择器用户点击按钮后,微信客户端将调起地理位置选择工具,完成选择操作后,将选择的地理位置发送给开发者的服务器,同时收起位置选择工具,随后可能会收到开发者下发的消息。
9、media_id:下发消息(除文本消息)用户点击 media_id 类型按钮后,微信服务器会将开发者填写的永久素材 id 对应的素材下发给用户,永久素材类型可以是图片、音频、视频、图文消息。请注意:永久素材 id 必须是在“素材管理 / 新增永久素材”接口上传后获得的合法 id。
10、view_limited:跳转图文消息 URL 用户点击 view_limited 类型按钮后,微信客户端将打开开发者在按钮中填写的永久素材 id 对应的图文消息 URL,永久素材类型只支持图文消息。请注意:永久素材 id 必须是在“素材管理 / 新增永久素材”接口上传后获得的合法 id。
请注意,3 到 8 的所有事件,仅支持微信 iPhone5.4.1 以上版本,和 Android5.4 以上版本的微信用户,旧版本微信用户点击后将没有回应,开发者也不能正常接收到事件推送。9 和 10,是专门给第三方平台旗下未微信认证(具体而言,是资质认证未通过)的订阅号准备的事件类型,它们是没有事件推送的,能力相对受限,其他类型的公众号不必使用。
接口调用请求说明
http 请求方式:POST(请使用 https 协议)https://api.weixin.qq.com/cgi…
click 和 view 的请求示例
{
“button”:[
{
“type”:”click”,
“name”:” 今日歌曲 ”,
“key”:”V1001_TODAY_MUSIC”
},
{
“name”:” 菜单 ”,
“sub_button”:[
{
“type”:”view”,
“name”:” 搜索 ”,
“url”:”http://www.soso.com/”
},
{
“type”:”miniprogram”,
“name”:”wxa”,
“url”:”http://mp.weixin.qq.com”,
“appid”:”wx286b93c14bbf93aa”,
“pagepath”:”pages/lunar/index”
},
{
“type”:”click”,
“name”:” 赞一下我们 ”,
“key”:”V1001_GOOD”
}]
}]
}
其他新增按钮类型的请求示例
{
“button”: [
{
“name”: “ 扫码 ”,
“sub_button”: [
{
“type”: “scancode_waitmsg”,
“name”: “ 扫码带提示 ”,
“key”: “rselfmenu_0_0”,
“sub_button”: []
},
{
“type”: “scancode_push”,
“name”: “ 扫码推事件 ”,
“key”: “rselfmenu_0_1”,
“sub_button”: []
}
]
},
{
“name”: “ 发图 ”,
“sub_button”: [
{
“type”: “pic_sysphoto”,
“name”: “ 系统拍照发图 ”,
“key”: “rselfmenu_1_0”,
“sub_button”: []
},
{
“type”: “pic_photo_or_album”,
“name”: “ 拍照或者相册发图 ”,
“key”: “rselfmenu_1_1”,
“sub_button”: []
},
{
“type”: “pic_weixin”,
“name”: “ 微信相册发图 ”,
“key”: “rselfmenu_1_2”,
“sub_button”: []
}
]
},
{
“name”: “ 发送位置 ”,
“type”: “location_select”,
“key”: “rselfmenu_2_0”
},
{
“type”: “media_id”,
“name”: “ 图片 ”,
“media_id”: “MEDIA_ID1”
},
{
“type”: “view_limited”,
“name”: “ 图文消息 ”,
“media_id”: “MEDIA_ID2”
}
]
}
参数说明

参数
是否必须
说明

button

一级菜单数组,个数应为 1~3 个

sub_button

二级菜单数组,个数应为 1~5 个

type

菜单的响应动作类型,view 表示网页类型,click 表示点击类型,miniprogram 表示小程序类型

name

菜单标题,不超过 16 个字节,子菜单不超过 60 个字节

key
click 等点击类型必须
菜单 KEY 值,用于消息接口推送,不超过 128 字节

url
view、miniprogram 类型必须
网页 链接,用户点击菜单可打开链接,不超过 1024 字节。type 为 miniprogram 时,不支持小程序的老版本客户端将打开本 url。

media_id
media_id 类型和 view_limited 类型必须
调用新增永久素材接口返回的合法 media_id

appid
miniprogram 类型必须
小程序的 appid(仅认证公众号可配置)

pagepath
miniprogram 类型必须
小程序的页面路径

返回结果
正确时的返回 JSON 数据包如下:
{“errcode”:0,”errmsg”:”ok”}
错误时的返回 JSON 数据包如下(示例为无效菜单名长度):
{“errcode”:40018,”errmsg”:”invalid button name size”}
代码示例:
1 简单的一级菜单可以直接发送 json 字符串,调用接口即可。
可以查看此博客 https://www.jianshu.com/p/6ee…

2 复杂的二级菜单
顶级菜单基类
@Data
public class BasicButton {
private String name;

private String type;

/**
* 二级菜单的数组标签 为 sub_button
*/
private BasicButton []sub_button;

}
点击事件菜单实体
@Data
public class ClickButton extends BasicButton {

private String key;
}

跳转链接菜单实体
@Data
public class ViewButton extends BasicButton {
private String url ;
}

设置菜单
public final static String CREAT_OPTION_URL = “https://api.weixin.qq.com/cgi-bin/menu/create?access_token=”;
public static void creatOption() {

String url = CREAT_OPTION_URL + AccessTokenTool.getToken();
String data = JSON.toJSONString(getMenu());
log.info(“ 发送的菜单 json 数据为:” + data);
String s = HttpUtil.sendHttpByPost(url, data);
log.info(“ 返回的菜单 json 数据为:” + s);
JSONObject jsonObject = JSONObject.parseObject(s);
if (jsonObject.getInteger(“errcode”) == 0) {
log.info(“ 设置自定义菜单成功。”);

} else {
log.error(“ 设置自定义菜单失败。”);
}
}

/**
* 组装菜单数据
*
* @return
*/
private static Menu getMenu() {
ClickButton btn11 = new ClickButton();
btn11.setName(“ 点击事件 11”);
btn11.setType(“click”);
btn11.setKey(“11”);

ClickButton btn12 = new ClickButton();
btn12.setName(“ 点击事件 12”);
btn12.setType(“click”);
btn12.setKey(“12”);

ClickButton btn13 = new ClickButton();
btn13.setName(“ 点击事件 13”);
btn13.setType(“click”);
btn13.setKey(“13”);

ViewButton btn14 = new ViewButton();
btn14.setName(“view 类型事件 14”);
btn14.setType(“view”);
btn14.setUrl(“https://www.baidu.com”); // 需要跳转的 url

ViewButton btn21 = new ViewButton();
btn21.setName(“view 类型事件 21”);
btn21.setType(“view”);
btn21.setUrl(“ 需要跳转的 url”); // 需要跳转的 url

ViewButton btn22 = new ViewButton();
btn22.setName(“view 类型事件 22”);
btn22.setType(“view”);
btn22.setUrl(“ 需要跳转的 url”); // 需要跳转的 url

ClickButton btn31 = new ClickButton();
btn31.setName(“ 点击事件 31”);
btn31.setType(“click”);
btn31.setKey(“31”);

ViewButton btn32 = new ViewButton();
btn32.setName(“view 类型事件 32”);
btn32.setType(“view”);
btn32.setUrl(“/find”); // 需要跳转的 url

ClickButton btn33 = new ClickButton();
btn33.setName(“ 点击事件 33”);
btn33.setType(“click”);
btn33.setKey(“33”);

ViewButton btn34 = new ViewButton();
btn34.setName(“view 类型事件 34”);
btn34.setType(“view”);
btn34.setUrl(“https://www.baidu.com”); // 需要跳转的 url

BasicButton mainBtn1 = new BasicButton();
mainBtn1.setName(“ 一级菜单 1 ”);
mainBtn1.setSub_button(new BasicButton[]{btn11, btn12, btn13 ,btn14});

BasicButton mainBtn2 = new BasicButton();
mainBtn2.setName(“ 一级菜单 2 ”);
mainBtn2.setSub_button(new BasicButton[] {btn21, btn22});

BasicButton mainBtn3 = new BasicButton();
mainBtn3.setName(“ 一级菜单 3 ”);
mainBtn3.setSub_button(new BasicButton[] {btn31, btn32, btn33,btn34});

/**
* 这是公众号“程序员日常锦集”目前的菜单结构,每个一级菜单都有二级菜单项 <br>
*
* 在某个一级菜单下没有二级菜单的情况,menu 该如何定义呢?<br>
* 比如,第三个一级菜单项不是“点击事件 31”,而直接是“view 类型事件 32”,那么 menu 应该这样定义:<br>
* menu.setButton(new Button[] {mainBtn1, mainBtn2, btn32});
*/
Menu menu = new Menu();
menu.setButton(new BasicButton[] {mainBtn1, mainBtn2, mainBtn3});

return menu;
}

自定义菜单事件推送
微信会将点击事件推送给开发者,也就是我们填写的服务器地址!
这里请注意:
请注意,点击菜单弹出子菜单,不会产生上报。请注意,第 3 个到第 8 个的所有事件,仅支持微信 iPhone5.4.1 以上版本,和 Android5.4 以上版本的微信用户,旧版本微信用户点击后将没有回应,开发者也不能正常接收到事件推送。

点击菜单拉取消息时的事件推送
推送 XML 数据包示例:
<xml>
<ToUserName><![CDATA[toUser]]></ToUserName>
<FromUserName><![CDATA[FromUser]]></FromUserName>
<CreateTime>123456789</CreateTime>
<MsgType><![CDATA[event]]></MsgType>
<Event><![CDATA[CLICK]]></Event>
<EventKey><![CDATA[EVENTKEY]]></EventKey>
</xml>
参数说明:
事件类型 Event 为:CLICK
EventKey 就是我们自定义菜单时候所填写的 key 值,根据这个 key 值区分不同的菜单。
点击菜单,解析微信推送给我们的 xml 数据:
判断菜单:
// 这里 xml 转为 map 类型了
public static BaseMsg handleClick(Map<String, String> xmlData) {
String eventKey = xmlData.get(“EventKey”);
BaseMsg bm = null;

switch (eventKey) {

case “11”:
bm = new TextMsg(xmlData, “ 菜单 11”);
break;

case “12”:

bm = new TextMsg(xmlData,” 菜单 11″);;
break;

case “13”:
bm = new TextMsg(xmlData, “”);
break;

case “31”:
bm = new TextMsg(xmlData, “ 更多信息,敬请期待!”);
break;

case “33”:
// 返回图文消息
bm = ArticlesMessageTool.getAiticlesMessage(xmlData, “url”)

// 其他的消息类型自己定义即可
break;

default:
bm = new TextMsg(xmlData, ” 欢迎。。。。“);
}

return bm;
}
消息基类
@XStreamAlias(“xml”) // 设置根节点名
@Data
public class BaseMsg {

// 置顶别名首字母大写
@XStreamAlias(“ToUserName”)
private String toUserName;// 开发者微信号
private String FromUserName;// 发送方帐号(一个 OpenID)
private String CreateTime;// 消息创建时间(整型)
private String MsgType;//MsgType 文本类型

public BaseMsg(Map<String, String> map) {
this.CreateTime = System.currentTimeMillis() / 1000 + “”;
this.FromUserName = map.get(“ToUserName”);
this.toUserName = map.get(“FromUserName”);
}

}

文本消息类:
@XStreamAlias(“xml”)
@Data
public class TextMsg extends BaseMsg {

private String Content;// 文本消息内容

public TextMsg(Map<String, String> map, String Content) {
super(map);
this.Content = Content;
this.setMsgType(“text”);
}

}

图文消息类:
@XStreamAlias(“xml”) // 设置根节点名
@Data
public class ImageMsg extends BaseMsg {

private String ArticleCount;// 是 图文消息个数;当用户发送文本、图片、视频、图文、地理位置这五种消息时,开发者只能回复 1 条图文消息;其余场景最多可回复 8 条图文消息
private List<ArticlesItem> Articles;// 是 图文消息信息,注意,如果图文数超过限制,则将只发限制内的

public ImageMsg() {
}

public ImageMsg(Map<String, String> map) {
super(map);
this.setMsgType(“news”);
}

获取图文消息工具:
/**
* 获取图文消息
*
* @param custermName
* @param serverName
* @param createTime
* @param xmlData
* @return
*/
public static ImageMsg getAiticlesMessage(Map<String, String> xmlData, String url) {
ImageMsg imageMsg = new ImageMsg(xmlData);
List<ArticlesItem> list = new ArrayList<ArticlesItem>();
ArticlesItem item = new ArticlesItem();
String title = “ 欢迎使用公众号!”;
String description = “ 点击图文进入 ”;
// 图片路径
String picurl = “ 自己的服务器地址 ” + “/img/008.jpg”;

item.setDescription(AirPortConfig.description);
item.setTitle(AirPortConfig.title);
item.setPicUrl(picurl);
item.setUrl(url);
list.add(item);

// 多个可以继续设置 …..

imageMsg.setArticleCount(“1”);
imageMsg.setMsgType(“news”);

imageMsg.setArticles(list);

return imageMsg;
}
xml 转为 map
public static Map<String, String> getXmlData(InputStream inputStream) {
Map<String, String> map = new HashMap<>();
// 截取 xml
SAXReader reader = new SAXReader();
try {

Document document = reader.read(inputStream);
Element rootElement = document.getRootElement(); // 获取根节点
List<Element> elements = rootElement.elements(); // h 获取所有的节点
for (Element e : elements) {
map.put(e.getName(), e.getStringValue());
}

} catch (DocumentException e) {
e.printStackTrace();
}
return map;
}
实体对象输出 xml
public static String bean2Xml(BaseMsg baseMsg) {
XStream xStream = new XStream();
// 若没有这句,xml 中的根元素会是 < 包. 类名 >;或者说:注解根本就没生效,所以的元素名就是类的属性
xStream.processAnnotations(BaseMsg.class);
xStream.processAnnotations(TextMsg.class);
xStream.processAnnotations(ImageMsg.class);
String xml = xStream.toXML(baseMsg);
log.info(“ 返回的 xml = ” + xml);
return xml;
}
maven 依赖
<!– https://mvnrepository.com/artifact/dom4j/dom4j –>
<dependency>
<groupId>dom4j</groupId>
<artifactId>dom4j</artifactId>
<version>1.6.1</version>
</dependency>

<!– https://mvnrepository.com/artifact/com.thoughtworks.xstream/xstream –>
<dependency>
<groupId>com.thoughtworks.xstream</groupId>
<artifactId>xstream</artifactId>
<version>1.4.11.1</version>
</dependency>
更多信息关注微信公众号

!

正文完
 0