自定义菜单

简介

TNWX: TypeScript + Node.js + WeiXin 微信系开发脚手架，支持微信公众号、微信支付、微信小游戏、微信小程序、企业号/企业微信。最最最重要的是能快速的集成至任何 Node.js 框架(Express、Nest、Egg、Koa 等)

接口权限

公众号接口权限说明自定义菜单 - 图1

菜单规则以及按钮类型说明自定义菜单 - 图2

实现自定义菜单有两种方式

  • 编辑模式
  • 开发模式

编辑模式

登录 MP 平台，侧栏找到 添加功能插件 菜单并在插件库中找到 自定义菜单 插件添加后按照提示操作即可。

开发模式

开发模式下有两种实现方式但推荐使用第二种

TNWX 中实现方案

  • 创建菜单
  • 删除菜单
  • 查询菜单
  • 添加个性化菜单
  • 删除个性化菜单
  • 测试个性化菜单匹配结果
  1. export class MenuApi {
  3.     private static createMenuUrl = 'https://api.weixin.qq.com/cgi-bin/menu/create?access_token=%s'
  4.     private static deleteMenuUrl = 'https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=%s';
  5.     private static getMenuUrl = 'https://api.weixin.qq.com/cgi-bin/menu/get?access_token=s%';
  6.     private static getSelfMenuInfoUrl = 'https://api.weixin.qq.com/cgi-bin/get_current_selfmenu_info?access_token=s%';
  8.     private static addConditionalUrl = 'https://api.weixin.qq.com/cgi-bin/menu/addconditional?access_token=s%';
  9.     private static delConditionalUrl = 'https://api.weixin.qq.com/cgi-bin/menu/delconditional?access_token=s%';
  10.     private static tryMatchUrl = 'https://api.weixin.qq.com/cgi-bin/menu/trymatch?access_token=s%';
  13.     /**
  14.      * 创建菜单
  15.      * @param response 
  16.      * @param menuJson 
  17.      */
  18.     public static async create(menuJson: string) {
  19.         let accessToken = await AccessTokenApi.getAccessToken();
  20.         let url = util.format(this.createMenuUrl, (<AccessToken>accessToken).getAccessToken);
  21.         return HttpKit.getHttpDelegate.httpPost(url, menuJson);
  22.     }
  23.     /**
  24.      * 删除菜单
  25.      * @param response 
  26.      */
  27.     public static async delete() {
  28.         let accessToken = await AccessTokenApi.getAccessToken();
  29.         let url = util.format(this.deleteMenuUrl, (<AccessToken>accessToken).getAccessToken);
  30.         return HttpKit.getHttpDelegate.httpGet(url);
  31.     }
  32.     /**
  33.      * 查询菜单
  34.      * @param response 
  35.      */
  36.     public static async get() {
  37.         let accessToken = await AccessTokenApi.getAccessToken();
  38.         let url = util.format(this.getMenuUrl, (<AccessToken>accessToken).getAccessToken);
  39.         return HttpKit.getHttpDelegate.httpGet(url);
  40.     }
  41.     public static async getCurrentSelfMenu() {
  42.         let accessToken = await AccessTokenApi.getAccessToken();
  43.         let url = util.format(this.getSelfMenuInfoUrl, (<AccessToken>accessToken).getAccessToken);
  44.         return HttpKit.getHttpDelegate.httpGet(url);
  45.     }
  47.     /**
  48.      * 添加个性化菜单
  49.      * @param response 
  50.      * @param menuJson 
  51.      */
  52.     public static async addConditional(menuJson: string) {
  53.         let accessToken = await AccessTokenApi.getAccessToken();
  54.         let url = util.format(this.addConditionalUrl, (<AccessToken>accessToken).getAccessToken);
  55.         return HttpKit.getHttpDelegate.httpPost(url, menuJson);
  56.     }
  58.     /**
  59.      * 删除个性化菜单
  60.      * @param response 
  61.      */
  62.     public static async deleteConditional() {
  63.         let accessToken = await AccessTokenApi.getAccessToken();
  64.         let url = util.format(this.delConditionalUrl, (<AccessToken>accessToken).getAccessToken);
  65.         return HttpKit.getHttpDelegate.httpGet(url);
  66.     }
  67.     /**
  68.      * 测试个性化菜单匹配结果
  69.      * @param response 
  70.      * @param openId 
  71.      */
  72.     public static async tryMatch(openId: string) {
  73.         let accessToken = await AccessTokenApi.getAccessToken();
  74.         let url = util.format(this.tryMatchUrl, (<AccessToken>accessToken).getAccessToken);
  75.         return HttpKit.getHttpDelegate.httpPost(url, JSON.stringify({
  76.             "user_id": openId
  77.         }));
  78.     }
  79. }

读取配置文件来创建菜单

  1. // 读取配置文件来创建自定义菜单
  2. app.get('/creatMenu', (req: any, res: any) => {
  3.     fs.readFile("./config/menu.json", function (err, data) {
  4.         if (err) {
  5.             console.log(err);
  6.             return;
  7.         }
  8.         let fileData = data.toString();
  9.         console.log(fileData);
  10.         // res.send(fileData)
  11.         MenuApi.create(fileData).then(data => {
  12.             res.send(data);
  13.         });
  14.     });
  15. });

动态创建自定义菜单

  1. app.get('/dynamicCreatMenu', (req: any, res: any) => {
  2.     MenuApi.create(JSON.stringify(MenuManager.getMenu())).then(data => {
  3.         res.send(data);
  4.     });
  5. });

菜单管理类

  1. export class MenuManager {
  3.     static getMenu(): Menu {
  4.         let btn11 = new ClickButton();
  5.         btn11.setName = "微信相册发图";
  6.         btn11.setType = "pic_weixin";
  7.         btn11.setKey = "rselfmenu_1_1";
  9.         let btn12 = new ClickButton();
  10.         btn12.setName = "拍照或者相册发图";
  11.         btn12.setType = "pic_photo_or_album";
  12.         btn12.setKey = "rselfmenu_1_2";
  14.         let btn13 = new ClickButton();
  15.         btn13.setName = "系统拍照发图";
  16.         btn13.setType = "pic_sysphoto";
  17.         btn13.setKey = "rselfmenu_1_3";
  19.         let btn21 = new ClickButton();
  20.         btn21.setName = "扫码带提示";
  21.         btn21.setType = "scancode_waitmsg";
  22.         btn21.setKey = "rselfmenu_2_1";
  24.         let btn22 = new ClickButton();
  25.         btn22.setName = "扫码推事件";
  26.         btn22.setType = "scancode_push";
  27.         btn22.setKey = "rselfmenu_2_2";
  29.         let btn23 = new ViewButton();
  30.         btn23.setName = "Gitee";
  31.         btn23.setType = "view";
  32.         btn23.setUrl = "https://gitee.com/javen205";
  35.         let btn31 = new ViewButton();
  36.         btn31.setName = "IJPay";
  37.         btn31.setType = "view";
  38.         btn31.setUrl = "https://gitee.com/javen205/IJPay";
  40.         let btn32 = new ClickButton();
  41.         btn32.setName = "发送位置";
  42.         btn32.setType = "location_select";
  43.         btn32.setKey = "rselfmenu_3_2";
  45.         let btn33 = new ViewButton();
  46.         btn33.setName = "在线咨询";
  47.         btn33.setType = "view";
  48.         btn33.setUrl = "http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes";
  50.         let btn34 = new ViewButton();
  51.         btn34.setName = "我的博客";
  52.         btn34.setType = "view";
  53.         btn34.setUrl = "https://blog.javen.dev";
  55.         let btn35 = new ClickButton();
  56.         btn35.setName = "点击事件";
  57.         btn35.setType = "click";
  58.         btn35.setKey = "rselfmenu_3_5";
  60.         let mainBtn1 = new ComButton();
  61.         mainBtn1.setName = "发图";
  62.         mainBtn1.setSubButton = [btn11, btn12, btn13];
  64.         let mainBtn2 = new ComButton();
  65.         mainBtn2.setName = "扫码";
  66.         mainBtn2.setSubButton = [btn21, btn22, btn23];
  68.         let mainBtn3 = new ComButton();
  69.         mainBtn3.setName = "个人中心";
  70.         mainBtn3.setSubButton = [btn31, btn32, btn33, btn34, btn35];
  71.         let menu = new Menu();
  72.         menu.setButton = [mainBtn1, mainBtn2, mainBtn3];
  74.         return menu;
  75.     }
  76. }

封装实体类

  2. export class Menu {
  3.     private button!: Button[];
  4.     private matchrule!: Matchrule;
  6.     public get getButton(): Button[] {
  7.         return this.button;
  8.     }
  9.     public set setButton(button: Button[]) {
  10.         this.button = button;
  11.     }
  13.     public get getMatchrule(): Matchrule {
  14.         return this.matchrule;
  15.     }
  16.     public set setMatchrule(matchrule: Matchrule) {
  17.         this.matchrule = matchrule;
  18.     }
  19. }
  21. export class Button {
  22.     private name: string;
  23.     private type: string;
  25.     constructor(name?: string, type?: string) {
  26.         this.name = name || '';
  27.         this.type = type || '';
  28.     }
  30.     public get getName(): string {
  31.         return this.name;
  32.     }
  33.     public set setName(name: string) {
  34.         this.name = name;
  35.     }
  37.     public get getType(): string {
  38.         return this.type;
  39.     }
  40.     public set setType(type: string) {
  41.         this.type = type;
  42.     }
  43. }
  46. export class ClickButton extends Button {
  47.     private key: string;
  49.     constructor(name?: string, type?: string, key?: string) {
  50.         super(name, type);
  51.         this.key = key || '';
  52.     }
  54.     public get getKey(): string {
  55.         return this.key;
  56.     }
  57.     public set setKey(key: string) {
  58.         this.key = key;
  59.     }
  60. }
  63. export class ComButton extends Button {
  64.     private sub_button: Button[];
  66.     constructor(name?: string, type?: string, sub_button?: Button[]) {
  67.         super(name, type);
  68.         this.sub_button = sub_button || [];
  69.     }
  71.     public get getSubButton(): Button[] {
  72.         return this.sub_button;
  73.     }
  74.     public set setSubButton(sub_button: Button[]) {
  75.         this.sub_button = sub_button;
  76.     }
  77. }
  80. export class MediaButton extends Button {
  81.     private media_id: string;
  83.     constructor(name?: string, type?: string, media_id?: string) {
  84.         super(name, type);
  85.         this.media_id = media_id || '';
  86.     }
  88.     public get getMediaId(): string {
  89.         return this.media_id;
  90.     }
  91.     public set setMediaId(media_id: string) {
  92.         this.media_id = media_id;
  93.     }
  94. }
  96. export class ViewButton extends Button {
  97.     private url: string;
  99.     constructor(name?: string, type?: string, url?: string) {
  100.         super(name, type);
  101.         this.url = url || '';
  102.     }
  104.     public get getUrl(): string {
  105.         return this.url;
  106.     }
  107.     public set setUrl(url: string) {
  108.         this.url = url;
  109.     }
  110. }
  112. export class Matchrule {
  113.     //用户分组id，可通过用户分组管理接口获取
  114.     private tag_id!: string;
  115.     //性别：男（1）女（2），不填则不做匹配
  116.     private sex!: string;
  117.     //国家信息
  118.     private country!: string;
  119.     //省份信息
  120.     private province!: string;
  121.     //城市信息
  122.     private city!: string;
  123.     //客户端版本，当前只具体到系统型号：IOS(1), Android(2),Others(3)，不填则不做匹配
  124.     private client_platform_type!: string;
  125.     //语言信息
  126.     private language!: string;
  129.     public get getTagId(): string {
  130.         return this.tag_id;
  131.     }
  133.     public set setTagId(tag_id: string) {
  134.         this.tag_id = tag_id;
  135.     }
  137.     public get getSex(): string {
  138.         return this.sex;
  139.     }
  141.     public set setSex(sex: string) {
  142.         this.sex = sex;
  143.     }
  145.     public get getCountry(): string {
  146.         return this.country;
  147.     }
  149.     public set setCountry(country: string) {
  150.         this.country = country;
  151.     }
  153.     public get getProvince(): string {
  154.         return this.province;
  155.     }
  157.     public set setProvince(province: string) {
  158.         this.province = province;
  159.     }
  161.     public get getCity(): string {
  162.         return this.city;
  163.     }
  165.     public set setCity(city: string) {
  166.         this.city = city;
  167.     }
  169.     public get getClientPlatformType(): string {
  170.         return this.client_platform_type;
  171.     }
  173.     public set setClientPlatformType(client_platform_type: string) {
  174.         this.client_platform_type = client_platform_type;
  175.     }
  177.     public get getLanguage(): string {
  178.         return this.language;
  179.     }
  181.     public set setLanguage(language: string) {
  182.         this.language = language;
  183.     }
  185. }

Java 版本自定义菜单

微信公众号开发之自定义菜单自定义菜单 - 图5

开源推荐