WeChat public accounts (including service accounts and subscription accounts) can customize menu settings. In order to facilitate management, we generally manage and maintain the menu data locally first. When updates are needed, they are updated to the WeChat server. That's it. Based on this method, this article introduces the operation of submitting menus to the WeChat server in my WeChat portal platform management system. The WeChat portal application management system adopts a route based on MVC+EasyUI. Since most domain name servers can only support .NET4.0, it uses MVC3 and C#4.0 as the development basis and can basically be deployed on any .NET server.

1. WeChat menu requirements and related interface design

We can manage the menu of WeChat public accounts locally through the website and maintain the hierarchical relationship between them. The menu requirements are relatively strict. The following are WeChat's requirements for custom menus:

Currently, custom menus include up to 3 first-level menus, and each first-level menu contains up to 5 second-level menus. The first-level menu can contain up to 4 Chinese characters, and the second-level menu can contain up to 7 Chinese characters. The extra parts will be replaced by "...".

Therefore, we follow the agreement and do not cross the boundary. Otherwise, when submitting the menu to the server, some errors may be returned. We should pay attention to these details when creating local menu management. I also introduced some contents of custom menus in an early article. If you need to, you can review "C# Development of WeChat Portal and Application (6)--Management Operations of WeChat Portal Menu". This article mainly introduces it in my In the platform management system, the menu interface API introduced earlier is called to implement the operation of submitting the menu to the server.

According to WeChat’s custom menu requirements, I designed several basic interfaces for WeChat’s menu in the management system as follows.

The main menu management interface is as follows.

The interface design for adding a menu is as follows

The modification interface for the WeChat menu is as follows

The WeChat menu definition is stored in the database. If it needs to be submitted to the WeChat server and take effect, it needs to call the WeChat API interface for processing. I add a submission in the Controller of the page. The processing method to the server.

2. Operation of submitting the menu to the WeChat server

The above interfaces are mainly based on the properties of the WeChat menu. For menu maintenance and management, our ultimate goal is to put them on the server for us to handle customer-related event operations.

To submit the menu, we can submit it using JQuery's Ajax in the MVC View page (provided that we add corresponding processing in the controller, which will be introduced later). The interface script code is as follows.

????????//綁定提交按鈕的的點(diǎn)擊事件
????????function?BindSubmitEvent()?{
????????????$("#btnSubmit").click(function?()?{
????????????????$.messager.confirm("提交菜單確認(rèn)",?"您確認(rèn)需要提交菜單到微信服務(wù)器嗎？",?function?(action)?{????????????????????if?(action)?{????????????????????????//提交數(shù)據(jù)????????????????????????$.ajax({
????????????????????????????url:?'/Menu/UpdateWeixinMenu',
????????????????????????????type:?'post',
????????????????????????????dataType:?'json',
????????????????????????????success:?function?(data)?{????????????????????????????????if?(data.Success)?{
????????????????????????????????????$.messager.alert("提示",?"提交微信菜單成功");
????????????????????????????????}????????????????????????????????else?{
????????????????????????????????????$.messager.alert("提示",?"提交微信菜單失敗:"?+?data.ErrorMessage);
????????????????????????????????}
????????????????????????????},
????????????????????????????data:?''
????????????????????????});
????????????????????}
????????????????});
????????????});
????????}

The red code above is the method we defined in the MVC controller. We only need to call the controller method through the POST method. The menu can be submitted to the WeChat server. As for the specific details, we can just move it to the controller or a lower level for processing. The page does not need to involve too much logic.

The UpdateWeixinMenu method code of the Menu controller above is as follows (mainly based on the development model I introduced earlier).

????????///?<summary>
????????///更新微信菜單
????????///?</summary>
????????///?<returns></returns>????????public?ActionResult?UpdateWeixinMenu()
????????{
????????????string?token?=?base.GetAccessToken();
????????????MenuListJson?menuJson?=?GetWeixinMenu();

????????????IMenuApi?menuApi?=?new?MenuApi();
????????????CommonResult?result?=?menuApi.CreateMenu(token,?menuJson);????????????return?ToJsonContent(result);
????????}

The above methods are introduced one by one here. GetAccessToken is mainly to obtain the access token for the current operation. The operations here can be cached. Otherwise, the AccessToken is obtained frequently. After reaching the specified number of times per day, it cannot be used again that day.

The GetWeixinMenu method is mainly for convenience. It encapsulates a function to obtain the custom menu data of WeChat. The specific code is as follows.

???????///?<summary>
????????///?生成微信菜單的Json數(shù)據(jù)????????///?</summary>
????????///?<returns></returns>
????????private?MenuListJson?GetWeixinMenu()
????????{
????????????MenuListJson?menuJson?=?new?MenuListJson();

????????????List<MenuNodeInfo>?menuList?=?BLLFactory<Menu>.Instance.GetTree();????????????foreach?(MenuNodeInfo?info?in?menuList)
????????????{
????????????????ButtonType?type?=?(info.Type?==?"click")???ButtonType.click?:?ButtonType.view;????????????????string?value?=?(type?==?ButtonType.click)???info.Key?:?info.Url;

????????????????MenuJson?weiInfo?=?new?MenuJson(info.Name,?type,?value);
????????????????AddSubMenuButton(weiInfo,?info.Children);

????????????????menuJson.button.Add(weiInfo);
????????????}????????????return?menuJson;
????????}

????????private?void?AddSubMenuButton(MenuJson?menu,?List<MenuNodeInfo>?menuList)
????????{????????????if?(menuList.Count?>?0)
????????????{
????????????????menu.sub_button?=?new?List<MenuJson>();
????????????}????????????foreach?(MenuNodeInfo?info?in?menuList)
????????????{
????????????????ButtonType?type?=?(info.Type?==?"click")???ButtonType.click?:?ButtonType.view;????????????????string?value?=?(type?==?ButtonType.click)???info.Key?:?info.Url;

????????????????MenuJson?weiInfo?=?new?MenuJson(info.Name,?type,?value);
????????????????menu.sub_button.Add(weiInfo);

????????????????AddSubMenuButton(weiInfo,?info.Children);
????????????}
????????}

上面的代碼，就是把本地存儲(chǔ)的MenuNodeInfo數(shù)據(jù)，通過遞歸遍歷的方式，轉(zhuǎn)換為微信的自定義菜單實(shí)體MenuJson，這樣我們調(diào)用API就非常方便了，這個(gè)函數(shù)主要負(fù)責(zé)構(gòu)造對(duì)應(yīng)的實(shí)體信息就是了。至于調(diào)用微信API提交菜單的事情，還是讓API自己親自處理為好，他們的代碼如下所示（也就是上面函數(shù)的部分代碼）。

????????IMenuApi?menuApi?=?new?MenuApi();
????????CommonResult?result?=?menuApi.CreateMenu(token,?menuJson);????????return?ToJsonContent(result);

最終的結(jié)果是返回一個(gè)通用的結(jié)果CommonResult，這個(gè)結(jié)果對(duì)象，非常方便腳本的處理，如果有錯(cuò)誤，則提示錯(cuò)誤，否則也方便判斷布爾值，也就是上面的頁(yè)面代碼腳本。

success:?function?(data)?{????????if?(data.Success)?{
??????????????????$.messager.alert("提示",?"提交微信菜單成功");
???????????}??????????else?{
????????????????????$.messager.alert("提示",?"提交微信菜單失敗:"?+?data.ErrorMessage);
????????????}
???????},

通過以上幾部分的代碼，我們就可以實(shí)現(xiàn)前臺(tái)MVC的視圖界面，調(diào)用后臺(tái)封裝好的微信API，實(shí)現(xiàn)菜單的提交處理了。

如果感興趣或者體驗(yàn)相關(guān)的客服應(yīng)答功能，可以關(guān)注我的微信了解下。具體效果可以關(guān)注我的微信門戶：廣州愛奇迪，也可以掃描下面二維碼進(jìn)行關(guān)注了解。

?更多C#開發(fā)微信門戶及應(yīng)用-微信門戶菜單管理及提交到微信服務(wù)器相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！