Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis on the development of a custom menu on Wechat official account. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

There are two ways to implement a custom menu

1. Edit mode

2. Development mode

The editing mode is very simple, so I won't go into it.

Development mode to realize custom menu

1. Implement by using Wechat public platform interface debugging tool.

2. Use the official interface to implement

Preparation in advance

Note:

1. At present, Subscription account can only use editing mode and cannot add hyperlinks. Wechat can only use development mode after Wechat certification.

2. Edit mode and development mode cannot be opened at the same time.

3. The generated menu will not be displayed immediately (the next day). If you want to see the effect immediately, you can cancel your attention and follow it again.

Add plug-in

K8WTIEI86W9W5XERD`MRD {6.png

Using Wechat public platform interface debugging tool to implement

Customize menu-Interface Debug tool .png

You can see that two parameters are required and both are required for access_token body

Some people want to ask, how can these two parameters be obtained?

Body is actually to generate the menu of the JSON object officially provides a chestnut to refer to.

{"button": [{"type": "click", "name": "Today's song", "key": "V1001_TODAY_MUSIC"}, {"name": "menu", "sub_button": [{"type": "view" "name": "search", "url": "http://www.soso.com/"}, {" type ":" view "," name ":" Video "," url ":" http://v.qq.com/"} {"type": "click", "name": "praise us", "key": "V1001_GOOD"}]}]}

The acquisition of access_token is as follows

Custom menu-get access_token.png

Using the official interface to implement

Students who first understand the custom menu of Wechat are advised to take a look at the official documents 3 times first.

In Jfinal-weixin, there are encapsulation menu creation, query, deletion, and personalized menu creation, query, deletion, and test personalized menu matching results.

Custom menu-menu encapsulated interface .png

So the question is, how do you use it when it's sealed?

Here are the interfaces that provide encapsulation

/ / query custom menu public static ApiResult getMenu () {String jsonResult = HttpUtils.get (getMenu + AccessTokenApi.getAccessTokenStr ()); return new ApiResult (jsonResult);} / / create custom menu public static ApiResult createMenu (String jsonStr) {String jsonResult = HttpUtils.post (createMenu + AccessTokenApi.getAccessTokenStr (), jsonStr); return new ApiResult (jsonResult) } / / Delete custom menus public static ApiResult deleteMenu () {String jsonResult = HttpUtils.get (deleteMenuUrl + AccessTokenApi.getAccessTokenStr ()); return new ApiResult (jsonResult);} / / create personalized custom menus public static ApiResult addConditional (String jsonStr) {String jsonResult = HttpUtils.post (addConditionalUrl + AccessTokenApi.getAccessTokenStr (), jsonStr); return new ApiResult (jsonResult) } / / Delete personalized custom menu public static ApiResult delConditional (String menuid) {HashMap params = new HashMap (); params.put ("menuid", menuid); String url = delConditionalUrl + AccessTokenApi.getAccessTokenStr (); String jsonResult = HttpUtils.post (url, JsonUtils.toJson (params)); return new ApiResult (jsonResult) } / / Test personalized menu matching results public static ApiResult tryMatch (String userId) {HashMap params = new HashMap (); params.put ("user_id", userId); String url = tryMatchUrl + AccessTokenApi.getAccessTokenStr (); String jsonResult = HttpUtils.post (url, JsonUtils.toJson (params)); return new ApiResult (jsonResult) } public static ApiResult getCurrentSelfMenuInfo () {String jsonResult = HttpUtils.get (getCurrentSelfMenuInfoUrl + AccessTokenApi.getAccessTokenStr ()); return new ApiResult (jsonResult);}

Detailed use of Demo is provided in the com.javen.weixin.menu.MenuManager class in the open source project weixin_guide

Public static void main (String [] args) {/ / convert the menu object to the json string String jsonMenu = JsonKit.toJson (getTestMenu ()). ToString (); System.out.println (jsonMenu); ApiConfig ac = new ApiConfig (); / / configure Wechat API related constants, please use your own official account ac.setAppId ("wx614c453e0d1dcd12") Ac.setAppSecret ("19a02e4927d346484fc70327970457f9"); / / ac.setAppId (PropKit.get ("appId")); / / ac.setAppSecret (PropKit.get ("appSecret")); ApiConfigKit.setThreadLocalApiConfig (ac); / / create menu ApiResult apiResult=MenuApi.createMenu (jsonMenu); System.out.println (apiResult.getJson ());}

You can see that MenuApi.createMenu (jsonMenu) is called in the main method

So where did jsonMenu come from?

In fact, this is to convert the entity object of the custom menu into JSON

String jsonMenu = JsonKit.toJson (getTestMenu ()) .toString ()

Packaging / * assembling menu data * * @ return * / private static Menu getTestMenu () {ClickButton btn11 = new ClickButton (); btn11.setName ("Wechat album"); btn11.setType ("pic_weixin"); btn11.setKey ("rselfmenu_1_1") ClickButton btn12 = new ClickButton (); btn12.setName ("take pictures or send pictures from albums"); btn12.setType ("pic_photo_or_album"); btn12.setKey ("rselfmenu_1_2"); ClickButton btn13 = new ClickButton (); btn13.setName ("system photos") Btn13.setType ("pic_sysphoto"); btn13.setKey ("rselfmenu_1_3"); ClickButton btn21 = new ClickButton (); btn21.setName ("scan tape hint"); btn21.setType ("scancode_waitmsg"); btn21.setKey ("rselfmenu_2_1"); ClickButton btn22 = new ClickButton () Btn22.setName ("scan event"); btn22.setType ("scancode_push"); btn22.setKey ("rselfmenu_2_2");; ViewButton btn23 = new ViewButton (); btn23.setName ("my device"); btn23.setType ("view") Btn23.setUrl ("https://hw.weixin.qq.com/devicectrl/panel/device-list.html?appid=wx614c453e0d1dcd12"); ViewButton btn31 = new ViewButton (); btn31.setName (" micro-community "); btn31.setType (" view "); btn31.setUrl (" http://whsf.tunnel.mobi/whsf/msg/wsq"); ClickButton btn32 = new ClickButton ()) Btn32.setName ("send location"); btn32.setType ("location_select"); btn32.setKey ("rselfmenu_3_2"); / / http://tencent://message/?uin=572839485&Site= online consultation & Menu=yes / / http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes ViewButton btn33 = new ViewButton () Btn33.setName ("online consultation"); btn33.setType ("view"); btn33.setUrl ("http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes"); ViewButton btn34 = new ViewButton (); btn34.setName (" my blog "); btn34.setType (" view ") Btn34.setUrl ("http://www.cnblogs.com/zyw-205520"); ClickButton btn35 = new ClickButton (); btn35.setName (" click event "); btn35.setType (" click "); btn35.setKey (" rselfmenu_3_5 "); ComButton mainBtn1 = new ComButton (); mainBtn1.setName (" send picture ") MainBtn1.setSub_button (new Button [] {btn11, btn12, btn13}); ComButton mainBtn2 = new ComButton (); mainBtn2.setName ("scan code"); mainBtn2.setSub_button (new Button [] {btn21, btn22, btn23}); ComButton mainBtn3 = new ComButton (); mainBtn3.setName ("personal center") MainBtn3.setSub_button (new Button [] {btn31, btn32, btn33, btn34, btn35}); / * this is the current menu structure of the official account xiaoqrobot, and each first-level menu has secondary menu items.

* * how should menu be defined if there is no second-level menu under a certain first-level menu?

* for example, if the third level 1 menu item is not "more experience" but directly "humorous joke", then menu should define it as follows:

* menu.setButton (new Button [] {mainBtn1, mainBtn2, btn33}); * / Menu menu = new Menu (); menu.setButton (new Button [] {mainBtn1, mainBtn2, mainBtn3}); return menu;}

Executing the main method outputs the JSON of the generated menu and the status of the response

JSON: {"button": [{"sub_button": [{"name": "Wechat album", "type": "pic_weixin", "key": "rselfmenu_1_1"}, {"name": "photo album", "type": "pic_photo_or_album", "key": "rselfmenu_1_2"}, {"name": "system photo album", "type": "pic_sysphoto" "key": "rselfmenu_1_3"}], "name": "Picture", "type": null}, {"sub_button": [{"name": "Code scan Tip", "type": "scancode_waitmsg", "key": "rselfmenu_2_1"}, {"name": "Code scan event", "type": "scancode_push", "key": "rselfmenu_2_2"}, {"name": "my device", "type": "view" "url": "https://hw.weixin.qq.com/devicectrl/panel/device-list.html?appid=wx614c453e0d1dcd12"}],"name":" scan Code", "type": null}, {"sub_button": [{"name": "Micro Community", "type": "view", "url": "http://whsf.tunnel.mobi/whsf/msg/wsq"},{"name":" send location", "type": "location_select" "key": "rselfmenu_3_2"}, {"name": "online consultation", "type": "view", "url": "http://wpa.qq.com/msgrd?v=3&uin=572839485&site=qq&menu=yes"},{"name":" my blog", "type": "view", "url": "http://www.cnblogs.com/zyw-205520"},{"name":" Click event", "type": "click" "key": "rselfmenu_3_5"}], "name": "personal Center", "type": null}], "matchrule": null} response status: {"errcode": 0, "errmsg": "ok"} "sample analysis of the custom menu developed by Wechat official account" ends here. Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.