欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-30 20:33:53
...

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

1.前提:后台使用的是H-ui框架,http://www.h-ui.net/index.shtml ,H-ui脚手架的lib里面包含了jquery、layer框架,去这个网站下载就行了。
微信自定义菜单UI-发布微信自定义菜单

<!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>

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