如何通过asp.netmvc开发微信自定义菜单编辑工具

这篇文章主要为大家展示了“如何通过asp.net mvc开发微信自定义菜单编辑工具”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何通过asp.net mvc开发微信自定义菜单编辑工具”这篇文章吧。

创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、成都网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

正文

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

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

定义菜单展示及菜单编辑模块，排版为微信公众号菜单三个大菜单，每个大菜单下面可以配五个子菜单。大致思路如下，页面排版为六行三列，三个大菜单未配置满时在右侧显示增加菜单按钮，

每个父级菜单的子菜单未配置满时在上方显示增加菜单按钮。未配置满时以空白p占位。

定义个函数生成自定义长度数组

使用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();
    },

绑定好监控属性，生成菜单排版

  
   
    
    
    

    
    
    
    

    
    
    

    
    
    
    

    

    

    

    
    

    
    
    

    

    

    

    

    
   

  

  
  

  
  
  
  

  
  

  
   
    
     
    

    
     
      跳转URL
      点击推事件
      扫码推事件
      扫码推事件且弹出“消息接收中”提示框
      弹出系统拍照发图
      弹出拍照或者相册发图
       弹出微信相册发图器
      弹出地理位置选择器
     
    

    
     
    

    
     确定
     删除
     
     
     
     
     复制
     粘贴
     关闭
    

   
  

  

 

最后增加菜单的查询函数及发布函数。因为编辑菜单方便，菜单对象和微信自定义菜单接口所需要的json格式不对应，所以在查询现有菜单和发布菜单时，需要对json数据进行一下格式变化。,

 EditMenus: function (isQuery) {
     if (isQuery == undefined) {
      var menu = {};
      menu.button = new Array();
      model.Menus(menu);
     } else {
      var appId = model.AppId();
      var appSecret = model.AppSecret();
      var accessToken = model.AccessToken();
      var type = model.Type();
      var tokenType = model.TokenType();
      var corpId = model.CorpId();
      var permanentCode = model.PermanentCode();
      var agentId = model.AgentId();
      var suiteId = model.SuiteId();
      var suiteSecret = model.SuiteSecret();
      var suiteTicket = model.SuiteTicket();
      if (type === "1" && tokenType === "2") {
       if (appId == undefined || $.trim(appId).length === 0) {
        alert("请输入AppId");
        return;
       }
       if (appSecret == undefined || $.trim(appSecret).length === 0) {
        alert("请输入AppSecret");
        return;
       }
      } else if (type === "2" && tokenType === "2") {
       if (corpId == undefined || $.trim(corpId).length === 0) {
        alert("请输入CorpId");
        return;
       }
       if (permanentCode == undefined || $.trim(permanentCode).length === 0) {
        alert("请输入永久授权码");
        return;
       }
       if (agentId == undefined || $.trim(agentId).length === 0) {
        alert("请输入AgentId");
        return;
       }
       if (suiteId == undefined || $.trim(suiteId).length === 0) {
        alert("请输入SuiteId");
        return;
       }
       if (suiteSecret == undefined || $.trim(suiteSecret).length === 0) {
        alert("请输入SuiteSecret");
        return;
       }
       if (suiteTicket == undefined || $.trim(suiteTicket).length === 0) {
        alert("请输入SuiteTicket");
        return;
       }
      } else if (tokenType === "1") {
       if (accessToken == undefined || $.trim(accessToken).length === 0) {
        alert("请输入AccessToken");
        return;
       }
      }
      $("#btnQueryMenu").button("查询中...");
      $.ajax({
       url: "",
       datatype: "JSON",
       type: "POST",
       async: true,
       data: JSON.stringify({
        appId: appId, appSecret: appSecret, accessToken: accessToken, type: type, tokenType: tokenType, corpId: corpId, permanentCode: permanentCode, agentId: agentId,
        suiteId: suiteId, suiteSecret: suiteSecret, suiteTicket: suiteTicket
       }),
       contentType: "application/json; charset=UTF-8",
       success: function (obj) {
        $("#btnQueryMenu").button("reset");
        if (obj.Success) {
         var data = obj.Data;
         var menus = JSON.parse(data).menu;
         $(menus.button).each(function (index, item) {
          if (item.type === "view") {
           item.value = item.url;
           delete item.url;
          } else {
           item.value = item.key;
           delete item.key;
          }
          if (item.type == undefined) {
           item.type = "view";
           item.value = "";
          }
          if (item.sub_button instanceof Array) {
           $(item.sub_button).each(function (index1, item2) {
            if (item2.type === "view") {
             item2.value = item2.url;
             delete item2.url;
            } else {
             item2.value = item2.key;
             delete item2.key;
            }
           });
          }
         });
         model.Menu(undefined);
         model.MenuIndex(undefined);
         model.BottonIndex(-1);
         model.SubBottonIndex(-1);
         model.Menus(undefined);
         model.Menus(menus);
        } else {
         alert(obj.Messages);
        }
       },
       error: function (xmlHttpRequest, textStatus, errorThrown) {
        $("#btnQueryMenu").button("reset");
        console.error(errorThrown);
       }
      });
     }
    },
    SaveMenus: function () {
     var menus = JSON.parse(JSON.stringify(model.Menus()));
     $(menus.button).each(function (index, item) {
      if (item.type === "view") {
       item.url = item.value;
       delete item.value;
      } else {
       item.key = item.value;
       delete item.value;
      }
      if (item.sub_button instanceof Array) {
       $(item.sub_button).each(function (index1, item2) {
        if (item2.type === "view") {
         item2.url = item2.value;
         delete item2.value;
        } else {
         item2.key = item2.value;
         delete item2.value;
        }
       });
       if (item.sub_button.length > 0) {
        delete item.key;
        delete item.url;
        delete item.type;
       } else {
        delete item.sub_button;
       }
      }
     });
     console.log(JSON.stringify(menus));
     var appId = model.AppId();
     var appSecret = model.AppSecret();
     var accessToken = model.AccessToken();
     var type = model.Type();
     var tokenType = model.TokenType();
     var agentId = model.AgentId();
     var suiteId = model.SuiteId();
     var suiteSecret = model.SuiteSecret();
     var suiteTicket = model.SuiteTicket();
     if (type === "1" && tokenType === "2") {
      if (appId == undefined || $.trim(appId).length === 0) {
       alert("请输入AppId");
       return;
      }
      if (appSecret == undefined || $.trim(appSecret).length === 0) {
       alert("请输入AppSecret");
       return;
      }
     } else if (type === "2" && tokenType === "2") {
      if (agentId == undefined || $.trim(agentId).length === 0) {
       alert("请输入AgentId");
       return;
      }
      if (suiteId == undefined || $.trim(suiteId).length === 0) {
       alert("请输入SuiteId");
       return;
      }
      if (suiteSecret == undefined || $.trim(suiteSecret).length === 0) {
       alert("请输入SuiteSecret");
       return;
      }
      if (suiteTicket == undefined || $.trim(suiteTicket).length === 0) {
       alert("请输入SuiteTicket");
       return;
      }
     } else if (tokenType === "1") {
      if (accessToken == undefined || $.trim(accessToken).length === 0) {
       alert("请输入AccessToken");
       return;
      }
     }
     $("#btnSubmitMenu").button("发布中...");
     $.ajax({
      url: "",
      datatype: "JSON",
      type: "POST",
      async: true,
      data: JSON.stringify({
       appId: appId, appSecret: appSecret, accessToken: accessToken, type: type, tokenType: tokenType, agentId: agentId,
       suiteId: suiteId, suiteSecret: suiteSecret, suiteTicket: suiteTicket, menu: JSON.stringify(menus)
      }),
      contentType: "application/json; charset=UTF-8",
      success: function (obj) {
       $("#btnSubmitMenu").button("reset");
       if (obj.Success) {
        alert("发布成功");
       } else {
        alert(obj.Messages);
       }
      },
      error: function (xmlHttpRequest, textStatus, errorThrown) {
       $("#btnSubmitMenu").button("reset");
       console.error(errorThrown);
      }
     });
    }

最终效果如下

以上是“如何通过asp.net mvc开发微信自定义菜单编辑工具”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！