Use asp.net mvc, bookers, and knockout. js to develop custom menu editing tools for WeChat (recommended ),

Use asp.net mvc, bookers, and knockout. js to develop custom menu editing tools (recommended ),

Preface

You can edit the custom menu by using the interface debugging tool, but by submitting the menu for creating json-format data, it is very inconvenient and error-prone. The tool on the Internet is not easy to use, so I wrote one by myself.

Body

Use bootstrap to sort out the page framework. To call the custom menu interface, you must use accesen en and input AccessToken in an input box. Users who want to directly enter the AppId and AppSecret to obtain the AccessToken are also excluded. Therefore, you need to drop down the menu to select whether to enter the AccessToken or directly obtain the AccessToken. To balance the creation menu of the enterprise number application, you also need AgentId, CorpId, permanent authorization code of the suite, SuiteId, SuiteSecret, and SuiteTicket. The input boxes of parameters are roughly the same.

Use knockout to define the observables monitoring attribute. And bind it to the input box.

　　　

Define the menu display and menu editing module, and set the layout to three menus of the public number menu. Five sub menus can be configured under each menu. The general idea is as follows. The page layout is six rows and three columns. When the three menus are not fully configured, add the menu button on the right,

When the sub-menu of each parent menu is not fully configured, The add menu button is displayed above. Empty div placeholder when not configured.

Define functions to generate custom length arrays

Use knockout to define menu monitoring properties in the format

{"Button": [{"name": "parent menu 1", "sub_button": [{"type": "view", "name ": "sub-menu 1", "url": ""}]}, {"name": "parent menu 1", "sub_button": [{"type ": "view", "name": "sub-Menu 2", "url": "" },{ "type": "view", "name ": "sub-menu 1", "url": ""}]}

Define add, edit, and delete menu functions, define temporary monitoring properties when adding and editing menus, and define the monitoring properties of the currently edited menu index.

Editing menus one by one is not very convenient, so you need to define the top, bottom, left, right, and copy and paste functions of the menu.

Function MenuFormValidate () {$ ("# MenuForm "). validate ({rules: {name: {required: true}, value: {required: false }}, messages: {name: {required: "enter a name"}, value: {required: $ ("# txtMenuButtonValue "). attr ("placeholder") }});} MenusReset: function () {var menus = JSON. stringify (model. menus (); model. menus (undefined); model. menus (JSON. parse (menus); // refresh the menu object MenuFormValidate (); // rebind the verification method}, M EnuIndex: ko. observable (), // parent menu index isEditMenu: ko. observable (false), // whether to edit the menu BottonIndex: ko. observable (-1), // edit the parent menu index of the menu SubBottonIndex: ko. observable (-1), // edit the sub-Menu index Menu of the Menu: ko. observable (), // temporary monitoring attribute CopyMenu: ko. observable (), // Copy the menu object Copy: function () {// Copy if (model. menu ()! = Undefined) {var menu = JSON. stringify (model. menu (); model. copyMenu (JSON. parse (menu); model. menu (undefined) ;}}, Paste: function () {// Paste 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 () {// move var bottonIndex = model Up. 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]. su B _button [newSubBottonIndex] = model. menu (); model. menusReset (); model. subBottonIndex (newSubBottonIndex);}, Down: function () {// move var bottonIndex Down = 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. menu S (). button [bottonIndex]. sub_button [newSubBottonIndex] = model. menu (); model. menusReset (); model. subBottonIndex (newSubBottonIndex);}, Left: function () {// move var bottonIndex = model to the Left. bottonIndex (); var subBottonIndex = model. subBottonIndex (); if (subBottonIndex =-1) {var newBottonIndex = bottonIndex-1; model. menus (). button [bottonIndex] = model. menus (). button [newBottonIndex]; model. menus (). B Utton [newBottonIndex] = model. menu (); model. menusReset (); model. bottonIndex (newBottonIndex) ;}}, Right: function () {// move var bottonIndex = model to the Right. 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) {// edit the menu model. bottonIndex (bottonindex); model. subBottonIndex (subbottonindex); model. isEditMenu (true); var data = JSON. stringify (obj); model. menu (JSON. parse (data); MenuFormValidate () ;}, AddMenu: function (index) {// Add menu model. bottonIndex (-1); model. subBottonIndex (-1); model. isEditM Enu (false); model. menuIndex (index); var menu = {type: "view", name: "", value: ""}; model. menu (menu); MenuFormValidate () ;}, DeleteMenu: function () {// Delete Menu $ (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 (in Dex1) {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 () {// cancel editing and reset the parameter model. menu (undefined); model. menuIndex (undefined); model. bottonIndex (-1); model. subBottonIndex (-1);}, Menu Save: function () {// Save the edited menu 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 ();},

Bind monitoring attributes to generate menu Layout

<Div class = "panel-body" data-bind = "with: Menus" id = "divMenu" style = "display: none;"> <div style = "height: 200px; "data-bind =" foreach: newArray (3) "> <div class =" list-group col-xs-4 clearFill bn "> <! -- Ko if :( $ parent. button. length> 0 & $ parent. button [$ index ()]! = Undefined & $ parent. button [$ index ()]. sub_button! = Undefined) --> <! -- Ko foreach: newArray (4-$ parent. button [$ index ()]. sub_button.length) --> <div class = "list-group-item bn"> </div> <! --/Ko --> <! -- Ko if: $ parent. button [$ index ()]. sub_button.length <5 --> <div class = "list-group-item" data-bind = "click: function () {$ root. addMenu ($ index ()} "> <I class =" fa-plus "> </I> </div> <! --/Ko --> <! -- Ko foreach :( $ parent. button [$ index ()]. sub_button) --> <div class = "list-group-item" data-bind = "text: name, attr: {'bottonindex': $ parent. value, 'subttonindex': $ index ()}, click: function () {$ root. editMenu ($ data, $ parent. value, $ index ()} "> </div> <! --/Ko --> <! --/Ko --> <! -- Ko if: $ parent. button [$ index ()]! = Undefined & $ parent. button [$ index ()]. sub_button = undefined --> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list -group-item "data-bind =" click: function () {$ root. addMenu ($ index ()} "> <I class =" fa-plus "> </I> </div> <! --/Ko --> <! -- Ko if: $ parent. button [$ index ()] = undefined --> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list-group-item bn"> </div> <div class = "list- group-item bn "> </div> <! --/Ko --> </div> <! -- Ko foreach: button --> <div class = "col-xs-4 list-group-item-danger" data-bind = "text: name, attr: {'bottonindex': $ index ()}, click: function () {$ root. editMenu ($ data, $ index (),-1)} "> </div> <! --/Ko --> <! -- Ko if: button. length <3 --> <div class = "col-xs-4 list-group-item" data-bind = "click: function () {$ root. addMenu () ;}"> <I class = "fa-plus"> </I> </div> <! --/Ko --> <div class = "clearfix"> </div> <div class = "col-xs-12" style = "border: 1px solid # EEEEEE; padding-top: 15px; margin-top: 15px; "data-bind =" with: $ root. menu, visible :( $ root. menu ()! = Undefined) "> <form id =" MenuForm "onsubmit =" return false; "> <div class =" form-group col-xs-4 "> <input type =" text "class =" form-control "name =" name "placeholder =" Enter the name "data -bind = "value: name "> </div> <div class =" form-group col-xs-4 "> <select class =" form-control "onchange =" $ ('# txtmenubuttonvalue '). attr ('holder', $ (this ). find ('option: selected '). attr ('pl ') "data-bind =" value: type "> <option value =" v Iew "pl =" Enter Url "> jump URL </option> <option value =" click "pl =" Enter Key "> click push event </option> <option value = "scancode_push" pl = "Enter Key"> scan code events </option> <option value = "scancode_waitmsg" pl = "Enter Key"> scan code events in addition, the message receiving prompt box is displayed. </option> <option value = "pic_sysphoto" pl = "Enter the Key"> the system photo and delivery diagram is displayed. </option> <option value = "pic_photo_or_album" pl = "Enter Key"> pop-up photo or album photos </option> <option value = "pic_weixin" pl = "Enter Key"> pop-up photo album photos </option> <optio N value = "location_select" pl = "Enter Key"> pop-up location selector </option> </select> </div> <div class = "form-group col-xs-8"> <input type = "text" id = "txtMenuButtonValue" name = "value" class = "form-control" placeholder = "Enter Url" data-bind = "value: value "> </div> <div class =" form-group col-xs-12 "> <button type =" submit "class =" btn-primary "data-bind =" click: $ root. menuSave "> OK </button> <button type =" submit "class =" btn -Danger "data-bind =" visible: $ root. isEditMenu, click: $ root. deleteMenu "> Delete </button> <button type =" button "class =" btn-default "title =" Move Up "data-bind =" visible: $ root. isEditMenu (), disable :! $ Root. isUp (), click: $ root. up "> <I class =" fa-chevron-circle-up "aria-hidden =" true "> </I> </button> <button type =" button" class = "btn-default" title = "Move Down" data-bind = "visible: $ root. isEditMenu (), disable :! $ Root. isDown (), click: $ root. down "> <I class =" fa-chevron-circle-down "aria-hidden =" true "> </I> </button> <button type =" button" class = "btn-default" title = "Left shift" data-bind = "visible: $ root. isEditMenu (), disable :! $ Root. isLeft (), click: $ root. left "> <I class =" fa-chevron-circle-left "aria-hidden =" true "> </I> </button> <button type =" button" class = "btn-default" title = "right shift" data-bind = "visible: $ root. isEditMenu (), disable :! $ Root. isRight (), click: $ root. right "> <I class =" fa-chevron-circle-right "aria-hidden =" true "> </I> </button> <button type =" button" class = "btn-default" title = "Copy menu" data-bind = "visible: $ root. isEditMenu (), click: $ root. copy "> Copy </button> <button type =" button "class =" btn-default "title =" paste menu "data-bind =" click: $ root. paste "> Paste </button> <button type =" submit "class =" btn-default "data-bind =" click: $ root. cancelMenuSave "> close </button> </div> </form> </div> <div class =" clearfix "> </div>

Finally, add the query function and release function of the menu. Because menu editing is convenient, the menu object does not correspond to the json format required by the custom menu interface. Therefore, when querying existing menus and publishing menus, you need to change the json data format .,

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 ("Enter AppId"); return;} if (appSecret = undefined | $. trim (appSecret ). length = 0) {alert ("Enter AppSecret"); return ;}} else if (type = "2" & tokenType = "2 ") {if (corpId = undefined | $. trim (corpId ). length = 0) {alert ("Enter CorpId"); return;} if (permanentCode = undefined | $. trim (permanentCode ). length = 0) {alert ("Enter the permanent authorization code"); return;} if (agentId = undefined | $. trim (agentId ). length = 0) {alert ("Please enter AgentId"); return;} if (suiteId = undefined | $. trim (suiteId ). length = 0) {alert ("Enter SuiteId"); return;} if (suiteSecret = undefined | $. trim (suiteSecret ). length = 0) {alert ("Enter SuiteSecret"); return;} if (suiteTicket = undefined | $. trim (suiteTicket ). length = 0) {alert ("Please enter SuiteTicket"); return ;}} else if (tokenType = "1 ") {if (accessToken = undefined | $. trim (accessToken ). length = 0) {alert ("Enter AccessToken"); return ;}$ ("# btnQueryMenu "). button ("querying... "); $. ajax ({url: "", datatype: "JSON", type: "POST", async: true, data: JSON. stringify ({appId: appId, appSecret: appSecret, accessToken: accessToken, type: type, authorization: tokenType, corpId: corpId, permanentCode: permanentCode, agentId: agentId, signature: Signature, 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 ("Enter AppId"); return;} if (appSecret = undefined | $. trim (appSecret ). length = 0) {alert ("Enter AppSecret"); return ;}} else if (type = "2" & tokenType = "2 ") {if (agentId = undefined | $. trim (agentId ). length = 0) {alert ("Please enter AgentId"); return;} if (suiteId = undefined | $. trim (suiteId ). length = 0) {alert ("Enter SuiteId"); return;} if (suiteSecret = undefined | $. trim (suiteSecret ). length = 0) {alert ("Enter SuiteSecret"); return;} if (suiteTicket = undefined | $. trim (suiteTicket ). length = 0) {alert ("Please enter SuiteTicket"); return ;}} else if (tokenType = "1 ") {if (accessToken = undefined | $. trim (accessToken ). length = 0) {alert ("Enter AccessToken"); return ;}$ ("# btnSubmitMenu "). button ("releasing... "); $. ajax ({url: "", datatype: "JSON", type: "POST", async: true, data: JSON. stringify ({appId: appId, appSecret: appSecret, accessToken: accessToken, type: type, tokenType: tokenType, agentId: agentId, identifier: suiteId, identifier: entity, identifier: entity, menu: JSON. stringify (menus)}), contentType: "application/json; charset = UTF-8", success: function (obj) {$ ("# btnSubmitMenu "). button ("reset"); if (obj. success) {alert ("published successfully");} else {alert (obj. messages) ;}}, error: function (xmlHttpRequest, textStatus, errorThrown) {$ ("# btnSubmitMenu "). button ("reset"); console. error (errorThrown );}});}

The final result is as follows:

The above section describes how to use asp.net mvc, bootup, and knockout. js development custom menu editing tool, hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!