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

其他 2019-02-28 16:26:04 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ren365880/article/details/79927596

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

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

猜你喜欢

转载自blog.csdn.net/ren365880/article/details/79927596
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022