微信的接口调试工具可以编辑自定义菜单，不过是提交json格式数据创建菜单，非常的不方便还容易出错。网上的工具不好用，所以就自己写了一个。
正文
先用bootstrap排个页面框架出来，调用自定义菜单接口需要用到AccessToken,放个输入框输入AccessToken。也不排除想直接输入AppId和AppSecret来获取AccessToken的用户，所以还需要下拉菜单来选择是输入AccessToken还是直接获取AccessToken。为了兼顾微信企业号应用创建菜单还需要AgentId,CorpId,套件永久授权码，SuiteId,SuiteSecret,SuiteTicket,参数的输入框大致就是这些。
使用knockout定义好observables监控属性。并绑定到输入框上。
定义菜单展示及菜单编辑模块，排版为微信公众号菜单三个大菜单，每个大菜单下面可以配五个子菜单。大致思路如下，页面排版为六行三列，三个大菜单未配置满时在右侧显示增加菜单按钮，
每个父级菜单的子菜单未配置满时在上方显示增加菜单按钮。未配置满时以空白div占位。
定义个函数生成自定义长度数组
使用knockout定义好菜单监控属性，格式为
{ "button": [ { "name": "父级菜单1", "sub_button": [ { "type": "view", "name": "子菜单1", "url": "" } ] }, { "name": "父级菜单1", "sub_button": [ { "type": "view", "name": "子菜单2", "url": "" }, { "type": "view", "name": "子菜单1", "url": "" } ] } ] }
定义添加，编辑，删除菜单函数，定义添加编辑菜单时临时监控属性，定义当前编辑菜单索引的监控属性。
一个一个编辑菜单还不是很方便，所以还要定义菜单的 上 下 左 右 的移动，及复制粘贴功能。
function MenuFormValidate() { $("#MenuForm").validate({ rules: { name: { required: true }, value: { required: false } }, messages: { name: { required: "请输入名称" }, value: { required: $("#txtMenuButtonValue").attr("placeholder") } } }); } MenusReset:function () { var menus = JSON.stringify(model.Menus()); model.Menus(undefined); model.Menus(JSON.parse(menus));//刷新菜单对象 MenuFormValidate();//重新绑定验证方法 }, MenuIndex: ko.observable(), //父级菜单索引 isEditMenu: ko.observable(false), //是否是编辑菜单 BottonIndex: ko.observable(-1), //编辑菜单的父级菜单索引 SubBottonIndex: ko.observable(-1), //编辑菜单的子菜单索引 Menu: ko.observable(),//编辑菜单时临时监控属性 CopyMenu: ko.observable(),//复制的菜单对象 Copy: function () { //复制 if (model.Menu() != undefined) { var menu = JSON.stringify(model.Menu()); model.CopyMenu(JSON.parse(menu)); model.Menu(undefined); } }, Paste: function () {//粘贴 if (model.CopyMenu() != undefined) { var menu = JSON.parse(JSON.stringify(model.CopyMenu())); if (model.SubBottonIndex() !== -1 && menu.sub_button != undefined || (!model.isEditMenu() && model.MenuIndex() != undefined)) { delete menu.sub_button; } model.Menu(menu); MenuFormValidate(); } }, Up: function () {//向上移动 var bottonIndex = model.BottonIndex(); var subBottonIndex = model.SubBottonIndex(); var newSubBottonIndex = subBottonIndex - 1; model.Menus().button[bottonIndex].sub_button[subBottonIndex] = model.Menus().button[bottonIndex].sub_button[newSubBottonIndex]; model.Menus().button[bottonIndex].sub_button[newSubBottonIndex] = model.Menu(); model.MenusReset(); model.SubBottonIndex(newSubBottonIndex); }, Down: function () {//向下移动 var bottonIndex = model.BottonIndex(); var subBottonIndex = model.SubBottonIndex(); var newSubBottonIndex = subBottonIndex + 1; model.Menus().button[bottonIndex].sub_button[subBottonIndex] = model.Menus().button[bottonIndex].sub_button[newSubBottonIndex]; model.Menus().button[bottonIndex].sub_button[newSubBottonIndex] = model.Menu(); model.MenusReset(); model.SubBottonIndex(newSubBottonIndex); }, Left: function () {//向左移动 var bottonIndex = model.BottonIndex(); var subBottonIndex = model.SubBottonIndex(); if (subBottonIndex === -1) { var newBottonIndex = bottonIndex - 1; model.Menus().button[bottonIndex] = model.Menus().button[newBottonIndex]; model.Menus().button[newBottonIndex] = model.Menu(); model.MenusReset(); model.BottonIndex(newBottonIndex); } }, Right: function () {//向右移动 var bottonIndex = model.BottonIndex(); var subBottonIndex = model.SubBottonIndex(); if (subBottonIndex === -1) { var newBottonIndex = bottonIndex + 1; model.Menus().button[bottonIndex] = model.Menus().button[newBottonIndex]; model.Menus().button[newBottonIndex] = model.Menu(); model.MenusReset(); model.BottonIndex(newBottonIndex); } }, EditMenu: function (obj, bottonindex, subbottonindex) {//编辑菜单 model.BottonIndex(bottonindex); model.SubBottonIndex(subbottonindex); model.isEditMenu(true); var data = JSON.stringify(obj); model.Menu(JSON.parse(data)); MenuFormValidate(); }, AddMenu: function (index) {//添加菜单 model.BottonIndex(-1); model.SubBottonIndex(-1); model.isEditMenu(false); model.MenuIndex(index); var menu = { type: "view", name: "", value: "" }; model.Menu(menu); MenuFormValidate(); }, DeleteMenu: function () {//删除菜单 $(model.Menus().button).each(function (index, item) { if (index === model.BottonIndex() && model.SubBottonIndex() === -1) { model.Menus().button.splice(index, 1); } if (item.sub_button instanceof Array) { $(item.sub_button).each(function (index1) { if (index === model.BottonIndex() && index1 === model.SubBottonIndex()) { item.sub_button.splice(index1, 1); } }); } }); model.Menu(undefined); model.MenuIndex(undefined); model.BottonIndex(-1); model.SubBottonIndex(-1); model.MenusReset(); }, CancelMenuSave: function () {//取消编辑，重置参数 model.Menu(undefined); model.MenuIndex(undefined); model.BottonIndex(-1); model.SubBottonIndex(-1); }, MenuSave: function () {//保存编辑的菜单 if (!$("#MenuForm").data("validator").form()) { return; } if (model.isEditMenu()) { var menuIndex = model.BottonIndex(); var subMenuIndex = model.SubBottonIndex(); if (subMenuIndex === -1) { model.Menus().button[menuIndex] = model.Menu(); } else { model.Menus().button[menuIndex].sub_button[subMenuIndex] = model.Menu(); } } else { if (model.MenuIndex() != undefined) { if (model.Menus().button[model.MenuIndex()].sub_button == undefined) { model.Menus().button[model.MenuIndex()].sub_button = new Array(); } model.Menus().button[model.MenuIndex()].sub_button.unshift(model.Menu()); } else { model.Menus().button.push(model.Menu()); } } model.Menu(undefined); model.MenuIndex(undefined); model.BottonIndex(-1); model.SubBottonIndex(-1); model.MenusReset(); },
绑定好监控属性，生成菜单排版