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

最新推荐文章于 2022-09-20 14:02:40 发布
最新推荐文章于 2022-09-20 14:02:40 发布
阅读量1.3w 收藏 10
点赞数 5
分类专栏： 微信 微信公众号开发 文章标签： 微信 微信开发 微信公众号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyw_java/article/details/61415114
版权

微信开发交流群：148540125

系列文章参考地址 极速开发微信公众号

欢迎留言、转发
项目源码参考地址 点我点我–欢迎Start

前几篇文章已讲完如何导入项目，如何启动配置项目，如何成为开发者，重源码分析消息是如何交互（如果前四项不是很清楚可以看这里 极速开发微信公众号。这篇文章就来讲讲如果实现自定义菜单

实现自定义菜单有两种方式
1、编辑模式
2、开发模式

编辑模式就很简单了就不赘述了……

开发模式实现自定义菜单

1、使用微信公众平台接口调试工具实现
2、使用官方提供的接口实现

前期准备

注意：
1、目前订阅号 只能使用编辑模式而且不能添加超链接，微信认证之后才可以使用开发模式。
2、编辑模式与开发模式不能同时开启
3、生成的菜单不会立即显示（隔天），如果想立即看到效果可以取消关注再关注

添加插件

K8WTIEI86W9W5XERD`MRD{6.png

使用微信公众平台接口调试工具实现

自定义菜单-接口调试工具.png

可以看到需要两个参数而且都是必填 access_token body

有人要问，这两个参数如何获取呢？

body 其实就是要生成菜单的JSON对象 官方有提供一个栗子可以参考。

 {
     "button":[
     {  
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜单",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
               "type":"view",
               "name":"视频",
               "url":"http://v.qq.com/"
            },
            {
               "type":"click",
               "name":"赞一下我们",
               "key":"V1001_GOOD"
            }]
       }]
 }

access_token 的获取如下图
自定义菜单-获取access_token.png

使用官方提供的接口实现

初次了解微信自定义菜单的同学建议先看看官方的文档3遍

在Jfinal-weixin中有封装菜单的创建、查询、删除、以及个性化菜单的创建、查询、删除、测试个性化菜单匹配结果

自定义菜单-菜单封装的接口.png

那么问题来了，封装好了如何使用呢？
以下是提供封装的接口

    //查询自定义菜单
    public static ApiResult getMenu() {
        String jsonResult = HttpUtils.get(getMenu + AccessTokenApi.getAccessTokenStr());
        return new ApiResult(jsonResult);
    }
    //创建自定义菜单
    public static ApiResult createMenu(String jsonStr) {
        String jsonResult = HttpUtils.post(createMenu + AccessTokenApi.getAccessTokenStr(), jsonStr);
        return new ApiResult(jsonResult);
    }
    //删除自定义菜单
    public static ApiResult deleteMenu() {
        String jsonResult = HttpUtils.get(deleteMenuUrl + AccessTokenApi.getAccessTokenStr());
        return new ApiResult(jsonResult);
    }
    //创建个性化自定义菜单
    public static ApiResult addConditional(String jsonStr) {
        String jsonResult = HttpUtils.post(addConditionalUrl + AccessTokenApi.getAccessTokenStr(), jsonStr);
        return new ApiResult(jsonResult);
    }
    //删除个性化自定义菜单
    public static ApiResult delConditional(String menuid) {
        HashMap params = new HashMap();
        params.put("menuid", menuid);
        String url = delConditionalUrl + AccessTokenApi.getAccessTokenStr();
        String jsonResult = HttpUtils.post(url, JsonUtils.toJson(params));
        return new ApiResult(jsonResult);
    }
    //测试个性化菜单匹配结果
    public static ApiResult tryMatch(String userId) {
        HashMap params = new HashMap();
        params.put("user_id", userId);
        String url = tryMatchUrl + AccessTokenApi.getAccessTokenStr();
        String jsonResult = HttpUtils.post(url, JsonUtils.toJson(params));
        return new ApiResult(jsonResult);
    }

    public static ApiResult getCurrentSelfMenuInfo() {
        String jsonResult = HttpUtils.get(getCurrentSelfMenuInfoUrl + AccessTokenApi.getAccessTokenStr());
        return new ApiResult(jsonResult);
    }

在开源项目weixin_guide中com.javen.weixin.menu.MenuManager类中提供了详细使用的Demo

public static void main(String[] args) { 

           // 将菜单对象转换成json字符串
           String jsonMenu = JsonKit.toJson(getTestMenu()).toString();
           System.out.println(jsonMenu);
           ApiConfig ac = new ApiConfig();

            // 配置微信 API 相关常量 请使用你自己公众号的
            ac.setAppId("wx614c453e0d1dcd12");
            ac.setAppSecret("19a02e4927d346484fc70327970457f9");
//          ac.setAppId(PropKit.get("appId"));
//          ac.setAppSecret(PropKit.get("appSecret"));
            ApiConfigKit.setThreadLocalApiConfig(ac);

           //创建菜单
           ApiResult apiResult=MenuApi.createMenu(jsonMenu);
           System.out.println(apiResult.getJson());
     }

可以看到main方法中调用了MenuApi.createMenu(jsonMenu)
那jsonMenu 从何而来呢？

其实这里是将自定义菜单的实体对象转化为了JSON

String jsonMenu = JsonKit.toJson(getTestMenu()).toString();

菜单的封装

 
             *  
             * 在某个一级菜单下没有二级菜单的情况，menu该如何定义呢？
 
             * 比如，第三个一级菜单项不是“更多体验”，而直接是“幽默笑话”，那么menu应该这样定义：
 
             * menu.setButton(new Button[] { mainBtn1, mainBtn2, btn33 }); 
             */  
            Menu menu = new Menu();  
            menu.setButton(new Button[] { mainBtn1, mainBtn2, mainBtn3 });  
            return menu;  
        }" data-snippet-id="ext.c263135461e9345e2fb1fe96fc2d9c0c" data-snippet-saved="false" data-codota-status="done">/** 
         * 组装菜单数据 
         *  
         * @return 
         */  
        private static Menu getTestMenu() {  
            ClickButton btn11 = new ClickButton();  
            btn11.setName("微信相册发图");  
            btn11.setType("pic_weixin");  
            btn11.setKey("rselfmenu_1_1");

            ClickButton btn12 = new ClickButton();  
            btn12.setName("拍照或者相册发图");  
            btn12.setType("pic_photo_or_album");  
            btn12.setKey("rselfmenu_1_2");;  

            ClickButton btn13 = new ClickButton();  
            btn13.setName("系统拍照发图");  
            btn13.setType("pic_sysphoto");  
            btn13.setKey("rselfmenu_1_3");

            ClickButton btn21 = new ClickButton();  
            btn21.setName("扫码带提示");  
            btn21.setType("scancode_waitmsg");  
            btn21.setKey("rselfmenu_2_1");;  

            ClickButton btn22 = new ClickButton();  
            btn22.setName("扫码推事件");  
            btn22.setType("scancode_push");  
            btn22.setKey("rselfmenu_2_2");;  

            ViewButton btn23 = new ViewButton();  
            btn23.setName("我的设备");  
            btn23.setType("view");  
            btn23.setUrl("https://hw.weixin.qq.com/devicectrl/panel/device-list.html?appid=wx614c453e0d1dcd12"); 

            ViewButton btn31 = new ViewButton();  
            btn31.setName("微社区");  
            btn31.setType("view");  
            btn31.setUrl("http://whsf.tunnel.mobi/whsf/msg/wsq");  


            ClickButton btn32 = new ClickButton();  
            btn32.setName("发送位置");  
            btn32.setType("location_select");  
            btn32.setKey("rselfmenu_3_2"); 

            //http://tencent://message/?uin=572839485&Site=在线咨询&Menu=yes
            //http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes

            ViewButton btn33 = new ViewButton();  
            btn33.setName("在线咨询");  
            btn33.setType("view");  
            btn33.setUrl("http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes");  

            ViewButton btn34 = new ViewButton();  
            btn34.setName("我的博客");  
            btn34.setType("view");  
            btn34.setUrl("http://www.cnblogs.com/zyw-205520"); 

            ClickButton btn35 = new ClickButton();  
            btn35.setName("点击事件");  
            btn35.setType("click");  
            btn35.setKey("rselfmenu_3_5"); 

            ComButton mainBtn1 = new ComButton();  
            mainBtn1.setName("发图");  
            mainBtn1.setSub_button(new Button[] { btn11, btn12, btn13});  

            ComButton mainBtn2 = new ComButton();  
            mainBtn2.setName("扫码");  
            mainBtn2.setSub_button(new Button[] { btn21, btn22 ,btn23});  

            ComButton mainBtn3 = new ComButton();  
            mainBtn3.setName("个人中心");  
            mainBtn3.setSub_button(new Button[] { btn31, btn32, btn33, btn34 ,btn35 });  

            /** 
             * 这是公众号xiaoqrobot目前的菜单结构，每个一级菜单都有二级菜单项<br> 
             *  
             * 在某个一级菜单下没有二级菜单的情况，menu该如何定义呢？<br> 
             * 比如，第三个一级菜单项不是“更多体验”，而直接是“幽默笑话”，那么menu应该这样定义：<br> 
             * menu.setButton(new Button[] { mainBtn1, mainBtn2, btn33 }); 
             */  
            Menu menu = new Menu();  
            menu.setButton(new Button[] { mainBtn1, mainBtn2, mainBtn3 });  
            return menu;  
        }

执行main方法会输出生成菜单的JSON以及响应的状态

生成菜单的JSON：{"button":[{"sub_button":[{"name":"微信相册发图","type":"pic_weixin","key":"rselfmenu_1_1"},{"name":"拍照或者相册发图","type":"pic_photo_or_album","key":"rselfmenu_1_2"},{"name":"系统拍照发图","type":"pic_sysphoto","key":"rselfmenu_1_3"}],"name":"发图","type":null},{"sub_button":[{"name":"扫码带提示","type":"scancode_waitmsg","key":"rselfmenu_2_1"},{"name":"扫码推事件","type":"scancode_push","key":"rselfmenu_2_2"},{"name":"我的设备","type":"view","url":"https://hw.weixin.qq.com/devicectrl/panel/device-list.html?appid=wx614c453e0d1dcd12"}],"name":"扫码","type":null},{"sub_button":[{"name":"微社区","type":"view","url":"http://whsf.tunnel.mobi/whsf/msg/wsq"},{"name":"发送位置","type":"location_select","key":"rselfmenu_3_2"},{"name":"在线咨询","type":"view","url":"http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes"},{"name":"我的博客","type":"view","url":"http://www.cnblogs.com/zyw-205520"},{"name":"点击事件","type":"click","key":"rselfmenu_3_5"}],"name":"个人中心","type":null}],"matchrule":null}

响应的状态： {"errcode":0,"errmsg":"ok"}

以上是生成自定义菜单的全过程。

欢迎留言、转发
项目源码参考地址 点我点我–欢迎Start

酷玩时刻
关注
专栏目录
微信公众号开发教程(四)自定义菜单
wolfcode_cn的博客
06-22 1万+
作者：陈惠，叩丁狼教育高级讲师。原创文章，转载请注明出处。本篇文章，我们来做一个最常见的，也是用户最喜欢使用的功能——自定义菜单。因为菜单只需要点一下就可以获取需要的信息，无需用户手动输入关键字，用户体验相对来说比较好。菜单效果：打开开发文档，选择”自定义菜单”的”菜单创建接口”。注意： 1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。 2、一级菜单最多4个汉字，二级菜单最多...
微信公众号自定义菜单开发
最新发布
yuan_618859的博客
08-11 576
微信公众号自定义菜单开发
微信公众号平台->自定义菜单
张中华的博客
01-06 2955
自定义菜单 微信公众平台自定义菜单设置方法 进入微信公众平台->功能->自定义菜单->添加菜单->点击“+”添加子菜单->设置动作->发布。 1）最多创建3个一级菜单，一级菜单名称名字不多于4个汉字或8个字母。 2）每个一级菜单下的子菜单最多可创建5个，子菜单名称名字不多于8个汉字或16个字母。 3）在子菜单下可设置动作...
微信公众号开发-自定义菜单
热门推荐
博客
07-12 1万+
自定义菜单
(7)公众号开发-自定义菜单
JolyouLu的博客
06-08 843
公众号开发-被动消息回复 自定义菜单是公众号开发必备功能，公众号用户与后台交互基本都在菜单中完成，自定义菜单可以让公众号下菜单拥有更加丰富的菜单事件，以及菜单功能 自定义菜单介绍 自定义菜单在创建时需要注意以下几个内容 自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单 一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“…”代替 创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单
微信公众号菜单的自定义
絮落锦乡的博客
05-09 620
转 Java微信公众平台开发(十)——微信自定义菜单的创建实现 2016年03月31日 11:58:31 North-java 阅读数：10120 ...
详解nodejs微信公众号开发——6.自定义菜单
10-20
主要介绍了详解nodejs微信公众号开发——6.自定义菜单，自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。
Spring MVC- 微信公众号开发之自定义菜单开发SQL脚本
02-23
java版微信公众号开发之自定义菜单的创建代码中使用的SQL，创建自定义菜单的代码链接：https://www.blog-china.cn/liuzaiqingshan/home/10/1519376790015
jQuery微信公众号自定义菜单代码
06-24
jQuery微信公众号自定义菜单代码是一款微信公众号后台管理界面操作模板代码。
[转]用vue写的一个微信公众号菜单配置
11-16
用vue写的一个微信公众号菜单配置 框架 vue + elementUI + mockjs
bootstrap+vue开发微信公众号界面
12-29
采用bootstrap开发的一组微信公众号界面，采用VUE动态绑定数据。界面美观，并且可以兼容各种版本。
微信公众号开发自定义菜单一会就会java版
06-09
微信公众号的自定义菜单是微信开发基础课程之一，不论是订阅号还是服务号都必须学会和精通自定义菜单
.NET微信公众号开发之创建自定义菜单
09-03
主要介绍了.NET微信公众号开发之创建自定义菜单的相关资料,需要的朋友可以参考下
公众号自定义菜单（含个性化）
洛塔博士的博客
09-20 918
看官方文档说明就知道这里修改了好几次，很多地方语句都不通，比如查询接口中官方写的“本接口与自定义菜单查询接口的不同之处在于，本接口无论公众号的接口是如何设置的，都能查询到接口，而自定义菜单查询接口则仅能查询到使用 API 设置的菜单配置。”【本接口就是自定义菜单查询接口，哪里来的不同之处，感觉是在写查询接口和个性化里面的查询接口之不同】。 官方文档地址是：
公众号自定义菜单开发（二）
snow_love_xia的博客
01-24 257
上一篇：公众号自定义菜单开发（一） 在这个页面已经处理结束后，我首先开始了点击修改菜单的功能，这里其实没有什么，动态效果你把menu.js稍作修改就好，唯一的就是要处理好每一级菜单操作以及菜单的类型变换，这里我就说一下菜单类型修改为图片遇到的问题 1.首先可以根据自己项目中用到的上传文件的功能，实现素材的选中效果   2.接下来就是上传素材，保存素材的事情了，这里着重说一下 微信文档...
微信公众号的菜单开发
庾信平生最萧瑟
03-03 309
微信公众号的菜单开发 1、找出开发页面的页面模板：点击添加模板，（根据自己的需要添加模板就可以了） 2、点击自定义菜单，点击跳转网页、从图文消息中选择 3、点击第一步编辑好的页面模板就可以了 希望此博客对你有帮助，欢迎大家关注微信公众号“给你于给我” ...
微信自定义菜单
qq1778871523的博客
06-05 360
创建自定义菜单需要三个步骤：1、需要get access_token的值（access_token是调用接口的一个凭据，或者说是一把钥匙）$url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;appid={$appID}&amp;secret={$appsecret}"; $data=http_...
微信公众号开发学习（四）自定义菜单
qq_39602487的博客
08-18 525
1.菜单类的封装 根据微信官方文档，我们需要往微信提供的URL发送post请求。 并提供如下 JSON格式数据： 因此，我们需要将上述的JSON格式数据封装成一个个对象。 我们创建一个Button 类。该Button类用于 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值