通过asp.net mvc开发微信自定义菜单编辑工具的代码示例

这篇文章主要介绍了使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具,非常不错，具有参考借鉴价值，需要的朋友可以参考下

前言

　　微信的接口调试工具可以编辑自定义菜单，不过是提交json格式数据创建菜单，非常的不方便还容易出错。网上的工具不好用，所以就自己写了一个。

正文

　　先用bootstrap排个页面框架出来，调用自定义菜单接口需要用到AccessToken,放个输入框输入AccessToken。也不排除想直接输入AppId和AppSecret来获取AccessToken的用户，所以还需要下拉菜单来选择是输入AccessToken还是直接获取AccessToken。为了兼顾微信企业号应用创建菜单还需要AgentId,CorpId,套件永久授权码，SuiteId,SuiteSecret,SuiteTicket,参数的输入框大致就是这些。

　　使用knockout定义好observables监控属性。并绑定到输入框上。

　　使用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: "" }; <strong style="color:transparent">来2源gaodaima#com搞(代@码&网</strong>    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();    },

喜欢 (0)赏

[搞代码]

分享 (0)