js 实现微信可视化菜单json生成工具

最新推荐文章于 2025-06-12 16:52:58 发布
原创最新推荐文章于 2025-06-12 16:52:58 发布 · 3.1k 阅读
5 ·
CC 4.0 BY-SA版权
Jquery 专栏收录该内容
23 篇文章
订阅专栏
好久没写博客了，
让生成微信菜单json变的简单些
今天简易实现一下微信可视化操作生成公众号菜单json功能
<meta charset="UTF-8">
<style type="text/css">
	.c2menus{margin-left:80px;}
	.MENUBODY .c1menus:first-child .delc1menu-item{display: none;}
	.c2menus-item{height: 35px;}
	.MENUJSONFRM{white-space: pre-wrap;word-wrap: break-word;}
	input[type=button]{font-weight: bold;}
</style>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- ---------------------- -->

<div class="MENUBODY">
	<input type="button" class="add1 btn btn-primary btn-sm" onclick="WMENU.addmenu(this,1)" value="+" >
</div>
<input type="button" class="btn btn-success " onclick="WMENU.createmenujson();" value="CREATE MENU JSON" />
<input type="button" class="btn btn-success " onclick="WMENU.showmenujson(yjson);" value="LOAD MENU JSON" />

<div class="MENUJSONFRM"></div>

<!-- ---------------------- -->

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./template.min.js"></script>

<script id="menu1" type="text/html">
	<div class="c1menus">
		<div>
			<input class="btn btn-danger delc1menu-item btn-sm" type="button" onclick="WMENU.delmenu(this,1)" value="-" >
			一级菜单
		</div>
		<div class="c1info">
			<span>菜单类型:</span>
			<select class="type" onchange="WMENU.changeselect(this,1)">
				<option {{if !type}}selected{{/if}} value="1">弹出</option>
				<option {{if type=='view'}}selected{{/if}} value="view">连接</option>
				<option {{if type=='click'}}selected{{/if}} value="click">标示</option>
			</select>
			<span>名称:</span>
			<input class="name" value="{{name}}">
			<span>标示:</span>
			<input class="key" value="{{key}}" {{if !key}}disabled{{/if}}>
			<span>链接:</span>
			<input class="url" value="{{url}}" {{if !url}}disabled{{/if}}>
		</div>
		<div>
			<div class="c2menus">
				{{if !type}}
					{{include 'in_menu2'}}
				{{/if}}
				<input type="button" class="btn btn-info btn-sm" onclick="WMENU.addmenu(this,2)" value="+" 新增二级菜单>
			</div>
		</div>
	</div>
</script>
<script id="in_menu2" type="text/html">
	{{each sub_button}}
		<div class="c2menus-item">
			<input type="button" class="btn btn-danger btn-sm" onclick="WMENU.delmenu(this,2)" value="-"删除一级菜单>
			<span>菜单类型:</span>
			<select class="type" onchange="WMENU.changeselect(this,2)">
				<option {{if $value.type=='view'}}selected{{/if}} value="view">连接</option>
				<option {{if $value.type=='click'}}selected{{/if}} value="click">标示</option>
			</select>
			<span>名称:</span>
			<input class="name" value="{{$value.name}}" >
			<span>标示:</span>
			<input class="key"  value="{{$value.key}}" {{if !$value.key}}disabled{{/if}}>
			<span>链接:</span>
			<input class="url"  value="{{$value.url}}" {{if !$value.url}}disabled{{/if}}>
		</div>
	{{/each}}
</script>
<script id="menu2" type="text/html">
	<div class="c2menus-item">
		<input type="button" class="btn btn-danger btn-sm" onclick="WMENU.delmenu(this,2)" value="-"删除一级菜单>
		<span>菜单类型:</span>
		<select class="type" onchange="WMENU.changeselect(this,2)">
			<option  value="view">连接</option>
			<option  value="click">标示</option>
		</select>
		<span>名称:</span>
		<input class="name" >
		<span>标示:</span>
		<input class="key" disabled>
		<span>链接:</span>
		<input class="url" >
	</div>
</script>

<script>
	var yjson = {
	    "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": [ ]
	                    }
	                ]
	            }
	        ]
	    }
	};

	var WMENU={
		addmenu:function(a,t){
			if(t==1){
				if($(".c1menus").length<=2){
					$(a).before(template("menu1", {}));
				}else{
					alert("一级菜单最多只能有3个");
				}
			}else{
				if($(a).parent().find(".c2menus-item").length<=4){
					if($(a).parent().parent().parent().find('.type').val()==1){
						$(a).before(template("menu2", {}));	
					}else{
						alert("一级菜单必须选择“弹出”类型才能添加二级菜单");
					}
				}else{
					alert("一级菜单最多只能有5个");
				}
			}
		},
		delmenu:function(a,t){
			if(t==1){
				$(a).parent().parent().remove();
			}else{
				$(a).parent().remove();
			}
		},
		changeselect:function(a,t){
			$(a).parent().find(".url").val('').attr("disabled",false);
			$(a).parent().find(".key").val('').attr("disabled",false);
			if($(a).val()=="click"){
				if(t==1) $(a).parent().parent().find(".c2menus-item").remove();
				$(a).parent().find(".url").val('').attr("disabled","disabled");
			}else if($(a).val()=="view"){
				if(t==1) $(a).parent().parent().find(".c2menus-item").remove();
				$(a).parent().find(".key").val('').attr("disabled","disabled");
			}else{
				$(a).parent().find(".url").val('').attr("disabled","disabled");
				$(a).parent().find(".key").val('').attr("disabled","disabled");
			}
		},
		createmenujson:function(){
			var menujson = {"menu":{"button":{}}};
			var menui = 0;
			$('.MENUBODY .c1menus').each(function(){
				var c1 = $(this).find(".c1info");
				var json = {"sub_button":[]};
				if(c1.find('.type').val()!=1)  json.type = c1.find('.type').val();
				if(c1.find('.name').val())  json.name = c1.find('.name').val();
				if(c1.find('.key').val())  json.key = c1.find('.key').val();
				if(c1.find('.url').val())  json.url = c1.find('.url').val();
				if(json.type==undefined){
					console.log($(this).get(0));
					$(this).parent().parent().parent().find(".c2menus-item").each(function(){
						var cjson={"sub_button":[]};
						if($(this).find('.type').val())  cjson.type = $(this).find('.type').val();
						if($(this).find('.name').val())  cjson.name = $(this).find('.name').val();
						if($(this).find('.key').val())  cjson.key = $(this).find('.key').val();
						if($(this).find('.url').val())  cjson.url = $(this).find('.url').val();

						json.sub_button.push(cjson);
					});
				}
				menujson.menu.button[menui]=json;
				menui++;
			});
			console.log(menujson);
			$(".MENUJSONFRM").html(JSON.stringify(menujson, null, 4));
		},
		showmenujson:function(json){
			var jmb = json.menu.button;
			$('.MENUBODY').html('');
			for(var i in jmb){
				$('.MENUBODY').append(template("menu1", jmb[i] ));
			}
			var addbtn = '<input type="button" class="add1 btn btn-primary btn-sm" onclick="WMENU.addmenu(this,1)" value="+" 增加一级菜单>';
			$('.MENUBODY').html($('.MENUBODY').html()+addbtn);
		}
	}
</script>