一、自定义菜单创建接口说明
自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。开启自定义菜单后，公众号界面如图所示：


请注意：

①自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。

②一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“…”代替。

③创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。
自定义菜单接口可实现多种类型按钮，如下：

**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-bin/menu/create?access_token=ACCESS_TOKEN
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"}

二、自定义菜单实体类的封装
接下来是对菜单结构的封装。因为我们是采用面向对象的编程方式，最终提交的json格式菜单数据就应该是由对象直接转换得到，而不是在程序代码中拼一大堆json数据。菜单结构封装的依据是公众平台API文档中给出的那一段json格式的菜单结构，如下所示：

菜单结构的封装有多种方式，因人而异，我介绍一种。


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（所有菜单共有属性)
 * @author yilei
 * @version:1.0
 */
public class Button {

	private String type;//菜单的响应类型
	private String name;//菜单标题
	private Button[] sub_button;//	二级菜单数组
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Button[] getSub_button() {
		return sub_button;
	}
	public void setSub_button(Button[] sub_button) {
		this.sub_button = sub_button;
	}
	/**
	 * @param type
	 * @param name
	 * @param sub_button
	 */
	public Button(String type, String name, Button[] sub_button) {
		this.type = type;
		this.name = name;
		this.sub_button = sub_button;
	}
	public Button(){
		
	}
	 
}


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（view/clike/scancode_push/scancode_waitmsg/pic_sysphoto/pic_photo_or_album/pic_weixin，)
 * @author yilei
 * @version:1.0
 */
public class TypeButton extends Button{

	 private String key;//click等点击类型必须	菜单KEY值，用于消息接口推送，不超过128字节
	 
	 private String url;//view、miniprogram类型必须	网页 链接，用户点击菜单可打开链接，不超过1024字节。 type为miniprogram时，不支持小程序的老版本客户端将打开本url。

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	 	 
}


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（Menu类代表整个微信公众号自定义菜单)
 * @author yilei
 * @version:1.0
 */
public class Menu {

	private Button[] button;//button	是	一级菜单数组，个数应为1~3个

	public Button[] getButton() {
		return button;
	}

	public void setButton(Button[] button) {
		this.button = button;
	}

	/**
	 * @param button
	 */
	public Menu(Button[] button) {
		this.button = button;
	}
	
	public Menu(){
		
	}
	
}


三、自定义菜单的创建
   /**
     * 组装菜单
     * @return
     */

    public static Menu initMenu(){
    Menu menu = new Menu();
    
    //---------菜单1、点击类型菜单-------------------//
    TypeButton c1 = new TypeButton();
    c1.setName("点击类型菜单1");
    c1.setType("click");
    c1.setKey("1");

    Button b1 = new Button();
    b1.setName("菜单标题1");
    b1.setSub_button(new Button[]{c1}); 

    //---------菜单2，具有2个子菜单（一个点击类型、一个是网页类型)   -------------------//
    TypeButton c2 = new TypeButton();
    c2.setName("点击类型菜单1");
    c2.setType("click");
    c2.setKey("11");

    TypeButton v1 = new TypeButton();
    v1.setName("点击网页类型1");
    v1.setType("view");
    v1.setUrl("http://www.baidu.com");
    
    Button b2 = new Button();
    b2.setName("菜单标题2");
    b2.setSub_button(new Button[]{c2,v1}); 
    
    //---------菜单3，具有5个子菜单（scancode_push/scancode_waitmsg/pic_sysphoto/pic_photo_or_album/pic_weixin/location_select)   -------------------//   
    TypeButton t1 = new TypeButton();
    t1.setName("扫码推事件");
    t1.setType("scancode_push");
    t1.setKey("scancode_push");
 
    TypeButton t2 = new TypeButton();
    t2.setName("扫码带提示");
    t2.setType("scancode_waitmsg");
    t2.setKey("scancode_waitmsg");
    
    TypeButton t3 = new TypeButton();
    t3.setName("系统拍照发图");
    t3.setType("pic_sysphoto");
    t3.setKey("pic_sysphoto");
    
    TypeButton t4 = new TypeButton();
    t4.setName("拍照或者相册发图");
    t4.setType("pic_photo_or_album");
    t4.setKey("pic_photo_or_album");
    
    TypeButton t5 = new TypeButton();
    t5.setName("微信相册发图");
    t5.setType("pic_weixin");
    t5.setKey("pic_weixin");

    TypeButton t6 = new TypeButton();
    t6.setName("发送位置");
    t6.setType("location_select");
    t6.setKey("location_select");
    
    Button b3 = new Button();
    b3.setName("菜单标题3"); 
    b3.setSub_button(new Button[]{t1,t2,t3,t4,t5});
       
    menu.setButton(new Button[]{b1,b2,b3});// 
    return menu;

    }
    
    
    /**
     * 创建菜单
     * @param token(ACCESS_TOKEN)
     * @param menu(已经转换为json格式的Meun类型的字符串)
     * @return result =0,表示创建成功，否则失败
     */
    public static int createMenu(String token,String menu){
    	int errcode = 0;
    	String url = WeiXin.MENU_CREATE.replace("ACCESS_TOKEN", token);
    	JSONObject jsonObject = doPostStr(url, menu);
    	if(jsonObject != null){
    		errcode = jsonObject.getInt("errcode");
    	}
    	return errcode;
    }

	/**
	 * 发起Http请求, 通过POST方式访问网络用到的方法
	 * @param url,请求的URL地址
	 * @return 响应后的字符串
	 */
	public static JSONObject doPostStr(String url,String outstr){
		DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpPost httpPost = new HttpPost(url);
        JSONObject jsonObject = null;
		try {
			httpPost.setEntity(new StringEntity(outstr, "UTF-8"));
			HttpResponse response = httpClient.execute(httpPost);
			HttpEntity entity = response.getEntity();
			String result=EntityUtils.toString(entity,"UTF-8");
			jsonObject = JSONObject.fromObject(result);
		
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
		return jsonObject;
		
	}

	/**
	 * 自定义菜单-自定义创建菜单接口
	 */
    public static final String MENU_CREATE="https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN";
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 点击推事件
	 */
	public static final String  MENU_CLICK="click";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 跳转URL
	 */
	public static final String  MENU_VIEW="view";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 扫码推事件
	 */
	public static final String  MENU_SCANCODE_PUSH="scancode_push";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 扫码推事件且弹出“消息接收中”提示框
	 */
	public static final String  MENU_SCANCODE_WAITMSG="scancode_waitmsg";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出系统拍照发图
	 */
	public static final String  MENU_PIC_SYSPHOTO="pic_sysphoto";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出拍照或者相册发图
	 */
	public static final String  MENU_PIC_PHOTO_OR_ALBUM="pic_photo_or_album";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出微信相册发图器
	 */
	public static final String  MENU_PIC_WEIXIN="pic_weixin";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出地理位置选择器
	 */
	public static final String  MENU_LOCATION_SELECT="location_select";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 下发消息（除文本消息）
	 */
	public static final String  MENU_MEDIA_ID="media_id";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 跳转图文消息URL
	 */
	public static final String  MENU_VIEW_LIMITED="view_limited";

微信服务器配置URL指向路径
	/**
	 * 处理微信服务器发post请求发来的xml格式消息
	 */
    @Override
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    	ServletContext context = getServletContext();
    	AccessToken accessToken = (AccessToken) context.getAttribute("access_token");
    	String menu = JSONObject.fromObject(WeiXinCheck.initMenu()).toString();
    	int errcode = WeiXinCheck.createMenu(accessToken.getAccessToken() , menu);
    	if(errcode==0){
    		System.out.println("菜单创建成功！");
    		long startTime=System.currentTimeMillis();   //获取开始时间
            // TODO 接收、处理、响应由微信服务器转发的用户发送给公众帐号的消息
            // 将请求、响应的编码均设置为UTF-8（防止中文乱码）
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            System.out.println("微信的post请求进入了本地服务器了");
            String result = "";
            try {
                Map<String,String> map = WeiXinCheck.parseXml(request);
                System.out.println("微信公众号要开始发送消息");
                result =  WeiXinCheck.buildResponseMessage(map);
                
                if(result.equals("")){
                    result = "未正确响应";
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.out.println("发生异常："+ e.getMessage());
            }
            
            response.getWriter().println(result);
            System.out.println( result) ;
            long endTime=System.currentTimeMillis(); //获取结束时间
            System.out.println("程序运行时间： "+(endTime-startTime)+"ms");
    	}else{
    		System.out.println("菜单创建失败");
    	}
    	
    }

四、自定义菜单的创建成功
如果已经关注了微信公众号，可以先取消关注，重新扫描关注，就可以直接查看最新菜单




本节代码：

微信开发学习总结（四）——自定义菜单——自定义菜单创建接口——项目源码

下载地址：

https://download.csdn.net/download/qq_29914837/10700209

很久以前写的微信自定义菜单由于当时没有保存源码，现在再写服务器后台发布页面又要写一遍（在网上搜了一遍没有找到这方面UI和交互的，也没有尝试去扒微信公众平台的），花了些时间又写了一个，除了没有更换菜单位置功能外，其他的交互流程都有了，不想造轮子的可以直接拿去用，还热乎的，刚在程序里提出来。

1.前提：后台使用的是H-ui框架，http://www.h-ui.net/index.shtml ，H-ui脚手架的lib里面包含了jquery、layer框架，去这个网站下载就行了。 




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css">
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css">
<title>角色管理</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
    .z-mobile{
        width: 300px;
        height: 550px;
        margin: 20px 0 0 20px;
        float: left;
        position: relative;
        border: 1px solid #ccc;
    }
    .z-mobile-head{
        background: url("bg_mobile_head_default3a7b38.png");
        width: 300px;
        height: 60px;
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 0;
    }
    .z-mobile-foot{
        background: url("bg_mobile_foot_default3a7b38.png");
        width: 300px;
        height: 50px;
        position: absolute;
        bottom: 0px;
        border-top: 1px solid #dcdbdb;
    }
    .z-mobile-foot ul{margin-left: 50px;}
    .z-menu li{
        width: 82px;
        float: left;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
    }
    .z-menu-child{
    position: absolute;
    bottom: 60px
    }
    .z-menu-child li{
        width: 77px;
        float: left;
        border: 1px solid #ccc;
        text-align: center;
        margin: 0 2px;
        height: auto;
        overflow: hidden;
    }
    .z-menu-child span{
        height: 30px;
        display: block;
        line-height: 30px;
        width: 98%;
        cursor: pointer;
    }

    .z-menu-child .z-child-menu{
        height: 30px;
        display: block;
        line-height: 30px;
        width: 98%;
        cursor: pointer;
    }
    .z-info {
        border: 1px solid #ccc;
        float: left;
        margin-top: 20px;
        margin-left: 10px;
        height: 510px;
        padding: 20px;
    }
    .z-info .row{
        margin-bottom: 20px;
    }
</style>
</head>
<body>

    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 微信管理 <span class="c-gray en">&gt;</span> 自定义菜单 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

    <div class="z-mobile">
        <div class="z-mobile-head"></div>
        <div class="z-mobile-foot">

            <ul class="z-menu-child">
                <li>
                    <span class="z-add-1" data-sign='1'>+</span>
                </li>
                <li>
                    <span class="z-add-2" data-sign='2'>+</span>
                </li>
                <li>
                    <span class="z-add-3" data-sign='3'>+</span>
                </li>
            </ul>

            <ul class="z-menu">
                <li class="z-menu-1" data-type='' data-info="" data-sign='1' id="sign1">+</li>
                <li class="z-menu-2" data-type='' data-info="" data-sign='2' id="sign2">+</li>
                <li class="z-menu-3" data-type='' data-info="" data-sign='3' id="sign3">+</li>
            </ul>   

        </div>
    </div>
    <div class="z-info">
        <input id="sign" value="" type="hidden">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单名称：</label>
            <div class="formControls col-xs-8 col-sm-10">
                <input type="text" class="input-text" value="" placeholder="" id="name" name="" >
            </div>
        </div>

        <div class="row cl">
        <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单类别：</label>
        <div class="formControls col-xs-8 col-sm-10">
        <div class="radio-box" id="type-1">
            <input name="q" type="radio" id="sex-1" value="1" >
            <label for="sex-1">关键字</label>
        </div>
        <div class="radio-box" id="type-2">
            <input type="radio"  name="q" id="sex-2" value="2"  >
            <label for="sex-2">链接</label>
        </div>
        </div>
    </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单内容：</label>
            <div class="formControls col-xs-8 col-sm-10">
                <input type="text" class="input-text" value="" placeholder="" id="info" name="" required>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span></label>
            <div class="formControls col-xs-8 col-sm-10">
                <button type="button" id="delMenu"  class="btn btn-danger radius">删除当前菜单</button>
                <button type="button" id="submitMenu" class="btn btn-primary radius">发布当前菜单</button>
            </div>
        </div>


    </div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> 

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
//菜单数据
var id = '1'; //保存在数据库的微信id
var menu = $.parseJSON( '[{"name":"多菜单","sub_button":[{"type":"view","name":"连接","url":"https://www.baidu.com/"},{"type":"click","name":"关键字","key":"测试"}]},{"type":"click","name":"关键字","key":"测试"},{"type":"view","name":"连接","url":"https://www.baidu.com/"}]' );

var btnNum = menu.length;
//把服务数据展示在页面上
for(var i=1;i<=btnNum;i++){
    $("#sign"+i).text(menu[i-1].name);
    var key = "";
    //主菜单
    if(typeof(menu[i-1].type) != "undefined"){
        if(menu[i-1].type == "view"){
            $("#sign"+i).attr("data-type",2);
            key = menu[i-1].url;
        }else if(menu[i-1].type == "click"){
            $("#sign"+i).attr("data-type",1);
            key = menu[i-1].key;
        }
        $("#sign"+i).attr("data-info",key);
    }
    //子菜单
    if(typeof(menu[i-1].sub_button) != "undefined"){
        var subBtn = menu[i-1].sub_button;
        var child = "";
        for(var j=0;j<subBtn.length;j++){
            var dataType = 1;
            var key = "";
            if(subBtn[j].type == "view"){
                dataType = 2;
                key = subBtn[j].url;
            }else if(subBtn[j].type == "click"){
                dataType = 1;
                key = subBtn[j].key;
            }
            child += "<div class='z-child-menu' data-type='"+dataType+"' data-info='"+key+"' data-sign='"+i+j+"' id='sign"+i+j+"'>"+subBtn[j].name+"</div>";
        }
        $(".z-menu-child").children().eq(i-1).prepend(child);
    }

}



var width = $("body").width();
$(".z-info").css("width",width-400);
//隐藏所有子菜单
$(".z-menu-child li").hide();
$(".z-menu li").click(function(){
    //边框颜色改变
    typeChange(this);
    $(".z-info").children().eq(2).show();
    $(".z-info").children().eq(3).show();
    var that = this;
    //去除单选按钮状态
    $(".iradio-blue").removeClass("checked");
    //右侧内容改变 1.判断是否存在子菜单
    var sign = $(this).attr("data-sign");
    var childLength = $(".z-menu-child").children().eq(sign-1).children().length;
    if(childLength == 1){ //没有子菜单
        $("#name").val($(that).text());
        $("#info").val($(that).attr("data-info"));
        $("#type-"+$(that).attr("data-type")).children().addClass("checked");
        $("#sign").val(sign);
    }else{ //有子菜单
        $("#name").val($(that).text());
        $("#sign").val(sign);
        $(".z-info").children().eq(2).hide();
        $(".z-info").children().eq(3).hide();
    }
    //显示对应子菜单
    $(".z-menu-child li").hide();
    $(".z-menu-child li").eq(sign-1).css("marginLeft",85*(sign-1)).show();
})
//添加子菜单
$(".z-menu-child span").on("click",function(){
    typeChange(this);
    $(".z-info").children().eq(2).hide();
    $(".z-info").children().eq(3).hide();
    $("#sign").val("");
    //判断span数量
    var spanNum = $(this).siblings().length;
    var sign = $(this).attr("data-sign");
    if(spanNum < 5){//添加元素
        var html = "<div class='z-child-menu' data-type='' data-info='' data-sign='"+sign+spanNum+"' id='sign"+sign+spanNum+"'>子菜单</div>";
        $(this).before(html);
        if(spanNum == 4){
            $(this).hide();
        }
    }
})
//点击子菜单
$(".z-menu-child").on("click",".z-child-menu",function(){
    var that = this;
    typeChange(that);
    //去除单选按钮状态
    $(".iradio-blue").removeClass("checked");
    var sign = $(this).attr("data-sign");
    $("#name").val($(that).text());
    $("#info").val($(that).attr("data-info"));
    $("#type-"+$(that).attr("data-type")).children().addClass("checked");
    $("#sign").val(sign);
    $(".z-info").children().eq(2).show();
    $(".z-info").children().eq(3).show();
})
//去除所有按钮的边框 文字颜色 ，为点击的按钮加上边框颜色和文字颜色
function typeChange(that){
    $(".z-menu li").css("border","none").css("color","#333");
    $(".z-menu-child span").css("border","none").css("color","#333");
    $(".z-child-menu").css("border","none").css("color","#333");
    $(that).css("border","1px solid #156900").css("color","#156900");
}



//初始化插件
$('.radio-box input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
});
//改变了菜单名字
$("#name").blur(function(){
    var sign = $("#sign").val();
    $("#sign"+sign).text($("#name").val());
})
//改变了菜单值
$("#info").blur(function(){
    var sign = $("#sign").val();
    $("#sign"+sign).attr("data-info",$("#info").val());
})
//改变了单选按钮
$('.radio-box input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
    var sign = $("#sign").val();
    $("#sign"+sign).attr("data-type",event.target.value);
});
//删除按钮
$("#delMenu").click(function(){
    var sign = $("#sign").val();
    if(sign == ""){
        layer.msg("没有选择菜单");
        return;
    }

    if(sign > 3){ //删除子菜单
        $("#sign"+sign).siblings("span").show();
        var parentLi = $("#sign"+sign).parent();
        $("#sign"+sign).remove();
        //对所有子菜单重新排列
        var chlidDiv = parentLi.children("div");
        for(var z=0;z<chlidDiv.length;z++){
            chlidDiv.eq(z).attr("data-sign",sign.substring(0,1)+z).attr("id","sign"+sign.substring(0,1)+z);
        }

    }else { //删除主菜单
        var childLength = $(".z-menu-child").children().eq(sign-1).children().length;
        if(childLength > 1){
            layer.msg('请先删除子菜单');
            return;
        }
        $("#sign"+sign).text("+");
    }
    $("#sign"+sign).css("border","none");
    $("#name").val("");
    $("#info").val("");
    $("#type-"+$("#sign"+sign).attr("data-type")).children().removeClass("checked");
    $("#sign"+sign).attr("data-type","");
    $("#sign"+sign).attr("data-info","");
    $("#sign").val("");
})

//组装发送数据
$("#submitMenu").click(function(){
    var json = '{"button":[ ';
    for(var i = 1;i < 4;i++){
        //是否有子菜单
        var childNum = $(".z-menu-child").children().eq(i-1).children().length;
        if(childNum == 1){ //没有子菜单
            //主菜单是否有数据
            var type = $("#sign"+i).attr("data-type");
            var info = $("#sign"+i).attr("data-info");
            var name = $("#sign"+i).text();
            var wxType = "click";
            var wxKey = "key";
            if(type == 2){
                wxType = 'view';
                wxKey = 'url';
            }
            if(type!="" && info != ""){
                json+='{"type":"'+wxType+'","name":"'+name+'","'+wxKey+'":"'+info+'"},';
            }
        }else{ //有子菜单
            json += '{"name":"'+$("#sign"+i).text()+'","sub_button":';
            json += '[ ';
            for(var j=0;j<5;j++){
                var type = $("#sign"+i+j).attr("data-type");
                var info = $("#sign"+i+j).attr("data-info");
                var name = $("#sign"+i+j).text();
                var wxType = "click";
                var wxKey = "key";
                if(type == 2){
                    wxType = 'view';
                    wxKey = 'url';
                }
                if(type!="" && info != "" && typeof(info) != "undefined" && typeof(type) != "undefined"){
                    json+='{"type":"'+wxType+'","name":"'+name+'","'+wxKey+'":"'+info+'"},';
                }else if(type=="" || info == ""){
                    layer.msg('请删除未添加数据的子菜单');
                    return;
                }
            }
            json = json.substring(0,json.length-1) + "]},";
        }
    }
    json = json.substring(0,json.length-1) + "]}";
    /*$.ajax({
        url:'#(path)/admin/wx/menu/add',
        data:{"json":json,"id":id},
        type:"post",
        success:function(data){
            if(data == '200'){
                layer.msg('发布成功');
            }else{
                layer.msg('发布失败');
            }
        }
    })*/

})
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

微信自定义菜单

自定义菜单查询接口
使用接口创建自定义菜单后，开发者还可使用接口查询自定义菜单的结构。另外请注意，在设置了个性化菜单后，使用本自定义菜单查询接口可以获取默认菜单和全部个性化菜单信息。
请求说明
http请求方式：GET
https://api.weixin.qq.com/cgi-bin/menu/get?access_token=ACCESS_TOKEN

返回说明（无个性化菜单时）
对应创建接口，正确的Json返回结果:
{
    "menu": {
        "button": [
            {
                "type": "click", 
                "name": "今日歌曲", 
                "key": "V1001_TODAY_MUSIC", 
                "sub_button": [ ]
            }, 
            {
                "type": "click", 
                "name": "歌手简介", 
                "key": "V1001_TODAY_SINGER", 
                "sub_button": [ ]
            }, 
            {
                "name": "菜单", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "搜索", 
                        "url": "http://www.soso.com/", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "视频", 
                        "url": "http://v.qq.com/", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "click", 
                        "name": "赞一下我们", 
                        "key": "V1001_GOOD", 
                        "sub_button": [ ]
                    }
                ]
            }
        ]
    }
}

返回说明（有个性化菜单时）
{
    "menu": {
        "button": [
            {
                "type": "click", 
                "name": "今日歌曲", 
                "key": "V1001_TODAY_MUSIC", 
                "sub_button": [ ]
            }
        ], 
        "menuid": 208396938
    }, 
    "conditionalmenu": [
        {
            "button": [
                {
                    "type": "click", 
                    "name": "今日歌曲", 
                    "key": "V1001_TODAY_MUSIC", 
                    "sub_button": [ ]
                }, 
                {
                    "name": "菜单", 
                    "sub_button": [
                        {
                            "type": "view", 
                            "name": "搜索", 
                            "url": "http://www.soso.com/", 
                            "sub_button": [ ]
                        }, 
                        {
                            "type": "view", 
                            "name": "视频", 
                            "url": "http://v.qq.com/", 
                            "sub_button": [ ]
                        }, 
                        {
                            "type": "click", 
                            "name": "赞一下我们", 
                            "key": "V1001_GOOD", 
                            "sub_button": [ ]
                        }
                    ]
                }
            ], 
            "matchrule": {
                "group_id": 2, 
                "sex": 1, 
                "country": "中国", 
                "province": "广东", 
                "city": "广州", 
                "client_platform_type": 2
            }, 
            "menuid": 208396993
        }
    ]
}

注：menu为默认菜单，conditionalmenu为个性化菜单列表。字段说明请见个性化菜单接口页的说明。

返回结果
200	OK
Connection: keep-alive
Date: Tue, 02 Oct 2018 14:12:09 GMT
Content-Type: application/json; encoding=utf-8
Content-Length: 841
{
    "menu": {
        "button": [
            {
                "name": "菜单标题1", 
                "sub_button": [
                    {
                        "type": "click", 
                        "name": "点击类型菜单1", 
                        "key": "1", 
                        "sub_button": [ ]
                    }
                ]
            }, 
            {
                "name": "菜单标题2", 
                "sub_button": [
                    {
                        "type": "click", 
                        "name": "点击类型菜单1", 
                        "key": "11", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "view", 
                        "name": "点击网页类型1", 
                        "url": "http://www.baidu.com", 
                        "sub_button": [ ]
                    }
                ]
            }, 
            {
                "name": "菜单标题3", 
                "sub_button": [
                    {
                        "type": "scancode_push", 
                        "name": "扫码推事件", 
                        "key": "scancode_push", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "scancode_waitmsg", 
                        "name": "扫码带提示", 
                        "key": "scancode_waitmsg", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "pic_sysphoto", 
                        "name": "系统拍照发图", 
                        "key": "pic_sysphoto", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "pic_photo_or_album", 
                        "name": "拍照或者相册发图", 
                        "key": "pic_photo_or_album", 
                        "sub_button": [ ]
                    }, 
                    {
                        "type": "pic_weixin", 
                        "name": "微信相册发图", 
                        "key": "pic_weixin", 
                        "sub_button": [ ]
                    }
                ]
            }
        ]
    }
}