js 實現微信視覺化選單json生成工具
阿新 • • 發佈：2019-02-09
好久沒寫部落格了，
讓生成微信選單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>