微信自定义菜单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"></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"></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>

微信自定义菜单UI-发布微信自定义菜单相关推荐

《微信生活白皮书》发布微信用户数据
腾讯全球合作伙伴大会［互联网+微信］的分论坛上,微信官方第一次公开了微信用户数据,让我们一起看看<微信生活白皮书>都有哪些内容: 1)60% 微信用户是年轻人(15 - 29 岁); 2) ...
微信开发学习总结（四）——自定义菜单（5）——个性化菜单接口
一.个性化菜单接口说明为了帮助公众号实现灵活的业务运营,微信公众平台新增了个性化菜单接口,开发者可以通过该接口,让公众号的不同用户群体看到不一样的自定义菜单.该接口开放给已认证订阅号和已认证服务号. ...
.Net6+Furion+Sqlsugar+SenparcSdk开发微信公众号系列之八：自定义菜单
一.创建接口 1.1.注意事项自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单. 一级菜单最多4个汉字,二级菜单最多8个汉字,多出来的部分将会以"..."代替. ...
java 微信自定义菜单开发_微信公众号开发之设置自定义菜单实例代码【java版】...
本实例是为了实现在管理后台实现微信菜单的添加删除管理. 1.首先我们需要新建一个数据库表用于存放menu菜单项可包含的字段有id.父类id.name.排序.是否显示.类型(view.click).链 ...
第三方平台也能为未微信认证的订阅号调用自定义菜单接口和素材管理接口
3月20号已认证微信公众号可通过第三方平台管理微信公众平台素材,现在自定义菜单接口和素材管理接口向第三方平台旗下未认证订阅号开放,未认证订阅号也可以授权给第三方平台,让第三方平台开发者帮助实现自定义菜 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信公众号开发教程(四)自定义菜单
作者:陈惠,叩丁狼教育高级讲师.原创文章,转载请注明出处. 本篇文章,我们来做一个最常见的,也是用户最喜欢使用的功能--自定义菜单. 因为菜单只需要点一下就可以获取需要的信息,无需用户手动输入关键字, ...
微信自定义菜单java_Java微信公众平台开发(九)--微信自定义菜单的创建实现
自定义菜单这个功能在我们普通的编辑模式下是可以直接在后台编辑的,但是一旦我们进入开发模式之后我们的自定义菜单就需要自己用代码实现,所以对于刚开始接触的人来说可能存在一定的疑惑,这里我说下平时我们在开发 ...
微信公众号开发教程[011]-自定义菜单以及个性化菜单
自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单.类型分别有click,view,scancode_push,scancode_waitmsg,pic_sysphoto,pic_pho ...

微信自定义菜单UI-发布微信自定义菜单

微信自定义菜单UI-发布微信自定义菜单相关推荐

最新文章

热门文章