精华内容
下载资源
问答
  • 微信开发学习总结(四)——自定义菜单——自定义菜单创建接口——项目源码; 博客:微信开发学习总结(四)——自定义菜单——自定义菜单创建接口; https://blog.csdn.net/qq_29914837/article/details/82928890
  • 微信开发学习总结(四)——自定义菜单(4)——自定义菜单事件推送 博客地址:https://blog.csdn.net/qq_29914837/article/details/82948742
  • 微信接口自定义菜单在线客服微信支付
  • 为什么要自定义菜单;如何自定义菜单;自定义菜单---举例说明;自定义菜单---布局1;自定义菜单---布局2;自定义菜单---布局3;自定义菜单---分析back键的按下动作;自定义菜单---监听按键动作1;自定义菜单---监听按键动作2...
  • 一、自定义菜单创建接口说明 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能。开启自定义菜单后,公众号界面如图所示: 请注意: ①自定义菜单最多包括3个一级菜单,每个一级菜单最多...

    一、自定义菜单创建接口说明

    自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能。开启自定义菜单后,公众号界面如图所示:
    在这里插入图片描述

    请注意:
    ①自定义菜单最多包括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

    展开全文
  • 目前微信服务号自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“…”代替。请注意,创建自定义菜单后,由于微信客户端缓存,需要...
  • 很久以前写的微信自定义菜单由于当时没有保存源码,现在再写服务器后台发布页面又要写一遍(在网上搜了一遍没有找到这方面UI和交互的,也没有尝试去扒微信公众平台的),花了些时间又写了一个,除了没有更换菜单位置...

    很久以前写的微信自定义菜单由于当时没有保存源码,现在再写服务器后台发布页面又要写一遍(在网上搜了一遍没有找到这方面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>

    这里写图片描述
    这里写图片描述

    展开全文
  • 微信自定义菜单

    2019-08-25 20:11:13
    微信自定义菜单

    微信自定义菜单

    展开全文
  • 自定义菜单查询接口 使用接口创建自定义菜单后,开发者还可使用接口查询自定义菜单的结构。另外请注意,在设置了个性化菜单后,使用本自定义菜单查询接口可以获取默认菜单和全部个性化菜单信息。 请求说明 http请求...

    自定义菜单查询接口

    使用接口创建自定义菜单后,开发者还可使用接口查询自定义菜单的结构。另外请注意,在设置了个性化菜单后,使用本自定义菜单查询接口可以获取默认菜单和全部个性化菜单信息。

    请求说明

    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": [ ]
                        }
                    ]
                }
            ]
        }
    }
    
    展开全文
  • 微信公众号自定义菜单 使用的时候 替换自己的appid 和appsecret
  • excel 自定义菜单 自定义Excel右键菜单 (Customize Excel Right-Click Menus)Do you ever right-click on something in Excel, and the command that you wanted to use isn't on that pop-up menu? For example, ...
  • php 微信公众号自定义菜单
  • 2)服务号可以申请自定义菜单; 3)使用QQ登录的公众号,可以升级为邮箱登录; 4)使用邮箱登录的公众号,可以修改登录邮箱; 5)编辑图文消息可选填作者; 6)群发消息可以同步到腾讯微博。 其中,大家议论...
  • 微信公众平台从自定义菜单跳转到网页后在返回到自定义菜单 测试时,在微信客户端使用有效,在微信开发者工具内报错:“WeixinJSBridge.call 不被支持,请参考 ...
  • 在微信5.0以前,自定义菜单是作为一种内测资格使用的,只有少数公众帐号拥有菜单,因此出现很多企业为了弄到菜单不惜重金求购。现如今,一大批帐号从订阅号转为服务号,很多都是奔着自定义菜单去的。今天我们就来...
  • 微信公众平台服务号开放了自定义菜单API,本案例介绍C#开发微信公众号自定义菜单功能。在此基础上可以开发更完善的自定义菜单管理功能
  • 微信公众平台公众帐号及服务号可以在会话界面底部按需设置自定义菜单;且可为自定义菜单设置响应动作,可以通过点击菜单,收到你指定的消息或跳转到指定的网页。但是有些特殊情况我们的自定义菜单无法使用也无法更改...
  • 微信自定义菜单配置

    2013-11-04 15:50:42
    将微信自定义菜单存入数据库,动态从数据库获取自定义菜单
  • Android系统菜单与自定义菜单,好用
  • 自定义菜单删除接口 使用接口创建自定义菜单后,开发者还可使用接口删除当前使用的自定义菜单。另请注意,在个性化菜单时,调用此接口会删除默认菜单及全部个性化菜单。 请求说明 http请求方式:GET ...
  • 一、自定义菜单概述 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能。开启自定义菜单后,公众号界面如图所示: 二、申请自定义菜单 个人订阅号使用微博认证、企业订阅号通过微信认证;可以...
  • 公众号自定义菜单

    2019-11-06 17:09:16
    开发者文档:自定义菜单接口 自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单 一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“...”代替。 (1).微信公众平台接口调试工具 ...
  • 对粉丝来说,菜单栏是了解公众号的第二个入口,所以很多大的公众号为了提升服务,用户体验等,在菜单栏这块都做了开发!公众号菜单栏的作用不言而喻1.栏目展示,方便阅读,认识公众号2....01 自定义菜单...
  • 步骤1:获取access_token通过微信工作平台接口调试工具获取:https://mp.weixin.qq.com/debug步骤2:通过post请求接口设置自定义菜单我这里通过chrome的postman插件请求的url: ... ...
  • 用C#开发的WPS插件源码,往WPS工具栏中插入自定义菜单和往单元格右键菜单添加自定义菜单,开发环境:VS2010。
  • 只用传入jason就能使用的qml自定义菜单,为了更方便的调用下级节点,第一级菜单使用的是Repeater,第二级使用的是listview,通过它们自身的动态创建,来实现多级菜单,而为了更方便的使用,菜单的model使用Jason来...
  • 微信自定义菜单图形界面,支持项: 1.移动一级菜单和二级菜单顺序; 2.配置按钮类型为:点击事件,打开网页,发送小程序, 3.自定义配置获取菜单接口和保存菜单接口 初始化方式: var appid = ''; var menuApi = '...
  • 自定义菜单是微信公众号最好的功能之一了,很多公众号就是自定义菜单做得好,加强和用户之间的互动,增强了用户的粘性,提高用户的活跃度,微信机器人不仅可以让你设置自定义菜单,而且还可以对自定义菜单的点击做...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,823
精华内容 7,929
关键字:

自定义菜单