(7) Official account development-custom menu

Official Account Development-Passive Message Reply

A custom menu is an essential function for
official account development. The interaction between official account users and the background is basically completed in the menu. A custom menu allows the menu under the official account to have more menu events and menu functions. This column explains and the source code address: WeChat development column description

Custom menu introduction

When creating a custom menu, you need to pay attention to the following:
  1. The custom menu includes up to 3 first-level menus, and each first-level menu includes up to 5 second-level menus
  2. The first level menu can contain up to 4 Chinese characters, and the second level menu contains up to 7 Chinese characters. The extra part will be replaced by "..."
  3. After creating a custom menu, the refresh strategy of the menu is that when the user enters the official account conversation page or the official account profile page, if the last request to pull the menu is found 5 minutes ago, the menu will be pulled. Update will refresh the client's menu. During the test, you can try to unfollow the public account and follow it again, you can see the effect after creation
Here is the official document of the WeChat public platform: custom menu

Data sheet design

The custom menu needs to use the database, and save our custom menu format. First of all, we need to design the database, and finally design the following table according to the official document
create table weixin.vx_menu
    id             bigint auto_increment comment '主键' primary key,
    parent_id      bigint                  null comment '父级id',
    tree_level     varchar(20) default '0' null comment '菜单级别',
    tree_sort      bigint                  null comment '本级排序号(升序)',
    menu_type      varchar(12)             null comment '菜单类型',
    menu_name      char(16)                not null comment '菜单名称',
    menu_key       char(128)               null comment '菜单KEY值,用于消息接口推送,不超过128字节(click等点击类型必须)',
    menu_url       varchar(500)            null comment '用户点击菜单可打开链接(view、miniprogram类型必须)',
    menu_media_id  varchar(64)             null comment '调用新增永久素材接口返回的合法media_id(media_id类型和view_limited类型必须)',
    menu_app_id    varchar(64)             null comment '小程序的appid(miniprogram类型必须)',
    menu_page_path varchar(64)             null comment '小程序的页面路径(miniprogram类型必须)'
After the table is created, insert a few pieces of test data to facilitate waiting for the test
Insert picture description here

Code writing

common package

Increase: VxResult
Modification: VxParameterConfig, vx.yml
Insert picture description here


This class is used to process the return message received after the request is initiated
Insert picture description here


Need to add the request address to create the menu in yml
Insert picture description here


Increase the menuUrl attribute and generate the corresponding set/get method
Insert picture description here

core package

Added: VxMenu, InitMenuFormBody, MenuType, TreeLevel, VxMenuMapper, VxMenuServiceImpl, VxMenuService, VxMenuMapper.xml
Insert picture description here


Corresponding database table field
@TableName(value = "vx_menu")
public class VxMenu {
    @TableId(type = IdType.AUTO)
    private Long id;
    private Long parentId;
    private TreeLevel treeLevel;
    private Long treeSort;
    private MenuType menuType;
    private String menuName;
    private String menuKey;
    private String menuUrl;
    private String menuMediaId;
    private String menuAppId;
    private String menuPagePath;


The json format object that needs to be used when the request occurs
public class InitMenuFormBody {
    private String name;
    private String type;
    private String url;
    private String key;
    private List<InitMenuFormBody> sub_button;
MenuType: enumerated class of menu type
TreeLevel: Menu level enumeration class
Insert picture description here


The mybatis-plus is used here, and a general Mapper is needed to write a custom sql for selectMenuTree to get the tree structure
Insert picture description here


Write custom sql using Mybatisxml mapping to generate the menu number structure
Insert picture description here


Insert picture description here


Write a method to create a menu
Insert picture description here

Start asynchronous menu creation

After writing the above classes and methods, we can call the method to create the menu through menuService.initMenu();, but this is obviously not flexible enough and needs to be modified. It is best if the menu is automatically initialized after the project is started. Next we will implement it


Write a LoadVxMenu class
  1. Implement CommandLineRunner and rewrite the run method so that the run method will be called when the project is started
  2. Write the internal class LoadMenuTask, implement Runnable to rewrite the run method, use while to poll ACCESS_TOKEN in Redis, and initialize the menu when ACCESS_TOKEN is obtained
  3. In the future, the prepared LoadMenuTask object can be passed into the run method of CommandLineRunner.
Insert picture description here

Run test

Insert picture description here
Insert picture description here