Tutorial on custom menu development on WeChat public platform

I. Overview of custom menus

The custom menu can help users enrich the interface of public accounts and help them better understand the functions of public accounts. After the custom menu is enabled, the public account interface is shown in the following figure:

II. Apply for a custom menu

Personal subscription numbers use Weibo certification and Enterprise subscription numbers use WeChat certification. You can apply for custom menu qualifications.

The service number has the menu permission by default.

3. Obtain AppId and AppSecert

Find advanced features-development mode in WeChat background

After you become a developer, you can see appid and appsecert.

If there is no url or Token, you can first pass the test below by Fang times Studio

URL: http://discuz.comli.com/test.php
Token: weixin

4. Obtain Access TokeN

Use appid and appsecert to obtain the access token. The interface is

Https://api.weixin.qq.com/cgi-bin/token? Grant_type = client_credential & appid = APPID & secret = APPSECRET

The program implementation is as follows:

$ Appid = "";
$ Appsecret = "";
$ Url = "https://api.weixin.qq.com/cgi-bin/token? Grant_type = client_credential & appid = $ appid & secret = $ appsecret ";
 
$ Ch = curl_init ();
Curl_setopt ($ ch, CURLOPT_URL, $ url );
Curl_setopt ($ ch, CURLOPT_SSL_VERIFYPEER, FALSE );
Curl_setopt ($ ch, CURLOPT_SSL_VERIFYHOST, FALSE );
Curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1 );
$ Output = curl_exec ($ ch );
Curl_close ($ ch );
$ Jsoninfo = json_decode ($ output, true );
$ Access_token = $ jsoninfo ["access_token"];
You can also splice the address in the address bar of your browser and obtain the following data.

{"Access_token": "N2L7KXa084WvelONYjkJ_traBMCCvy_UKmpUUzlrQ0EA2yNp3Iz6eSUrRG0bhaR_viswd50vDuPkY5nG43d1gbm-olT2KRMxOsVE08RfeD9lvK9lMguNG9kpIkKGZEjIf8Jv2m9fFhf8bnNa-yQH3g", "expires_in": 7200}
Parameters are described as follows:

 

Parameters are described as follows:

The

The code is as follows:	Copy code
N2L7KXa084WvelONYjkJ_traBMCCvy_UKmpUUzlrQ0EA2yNp3Iz6eSUrRG0bhaR_viswd50vDuPkY5nG43d1gbm-olT2KRMxOsVE08RfeD9lvK9lMguNG9kpIkKGZEjIf8Jv2m9fFhf8bnNa-yQH3g

Is the access token.

Or use the official interface debugging tool:

Use a Web Debugging Tool to debug custom menu interfaces

Click to check the problem.

In this way, the access token is also obtained.

5. Organize menu content

Currently, a custom menu can contain up to three level-1 menus, and each level-1 menu can contain up to five level-2 menus. A level-1 menu can contain up to four Chinese characters and a level-2 menu can contain up to seven Chinese characters. . Note: After creating a custom menu, it takes 24 hours for the WeChat client to be displayed because of the WeChat client cache. We recommend that you try to remove the public account and follow it again during the test to see the effect after creation.

Currently, the custom menu interface supports two types of buttons:

Click:
After you click the click type button, the WeChat server pushes the structure of the message type "event" to the developer (reference Message Interface Guide) through the message interface, and carries the key value filled by the developer in the button, developers can interact with users through custom key values;
View:
After you click the view type button, the WeChat client will open the url value (web page link) filled in by the developer in the button to open the webpage, we recommend that you use the webpage authorization interface to obtain the user's personal login information.

API call request description

Http request method: POST (please use https protocol) https://api.weixin.qq.com/cgi-bin/menu/create? Access_token = ACCESS_TOKEN

Request example

 {
"Button ":[
     {   
"Type": "click ",
"Name": "Today's songs ",
"Key": "V1001_TODAY_MUSIC"
},
      {
"Type": "click ",
"Name": "Introduction to singers ",
"Key": "V1001_TODAY_SINGER"
},
      {
"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": "Like Us ",
"Key": "V1001_GOOD"
}]
}]
 }
Parameter description

Returned results

The returned JSON data packet is as follows:

{"Errcode": 0, "errmsg": "OK "}
When an error occurs, the returned JSON data packet is as follows (in this example, the menu name length is invalid ):

{"Errcode": 40018, "errmsg": "invalid button name size "}

6. Submit the menu content to the server

The JSON structure of the menu is

1
{"Button": [{"name": "Weather Forecast", "sub_button": [{"type": "click", "name": "Beijing weather ", "key": "Beijing weather" },{ "type": "click", "name": "Shanghai weather", "key": "Shanghai weather "}, {"type": "click", "name": "Guangzhou weather", "key": "Guangzhou weather" },{ "type": "click ", "name": "Shenzhen weather", "key": "Shenzhen weather" },{ "type": "view", "name": "Local Weather ", "url": "http://m.hao123.com/a/tianqi"}] },{ "name": "Fang times Studio", "sub_button": [{"type": "click", "name ": "company Profile", "key": "company" },{ "type": "click", "name": "NLP games", "key": "Games "}, {"type": "click", "name": "joke", "key": "joke"}]}
Save the following code as menu. php and run the file (such as http: // 127.0.0.1/menu. php) in the browser. The menu will be submitted directly to the WeChat server,

<? Php
 
$ Access_token = "";
 
$ Jsonmenu = '{
"Button ":[
      {
"Name": "Weather Forecast ",
"Sub_button ":[
            {
"Type": "click ",
"Name": "Beijing weather ",
"Key": "weather in Beijing"
},
            {
"Type": "click ",
"Name": "Shanghai weather ",
"Key": "Weather Shanghai"
},
            {
"Type": "click ",
"Name": "Guangzhou weather ",
"Key": "weather in Guangzhou"
},
            {
"Type": "click ",
"Name": "Shenzhen weather ",
"Key": "Shenzhen weather"
},
            {
"Type": "view ",
"Name": "Local Weather ",
"Url": "http://m.hao123.com/a/tianqi"
}]
 
 
},
       {
"Name": "Fang times Studio ",
"Sub_button ":[
            {
"Type": "click ",
"Name": "Company Profile ",
"Key": "company"
},
            {
"Type": "click ",
"Name": "NLP games ",
"Key": "Games"
},
            {
"Type": "click ",
"Name": "telling a joke ",
"Key": "joke"
}]
 
 
}]
}';
 
 
$ Url = "https://api.weixin.qq.com/cgi-bin/menu/create? Access_token = ". $ access_token;
$ Result = https_request ($ url, $ jsonmenu );
Var_dump ($ result );
 
Function https_request ($ url, $ data = null ){
$ Curl = curl_init ();
Curl_setopt ($ curl, CURLOPT_URL, $ url );
Curl_setopt ($ curl, CURLOPT_SSL_VERIFYPEER, FALSE );
Curl_setopt ($ curl, CURLOPT_SSL_VERIFYHOST, FALSE );
If (! Empty ($ data )){
Curl_setopt ($ curl, CURLOPT_POST, 1 );
Curl_setopt ($ curl, CURLOPT_POSTFIELDS, $ data );
    }
Curl_setopt ($ curl, CURLOPT_RETURNTRANSFER, 1 );
$ Output = curl_exec ($ curl );
Curl_close ($ curl );
Return $ output;
}
 
?>
Or use the official debugging interface to debug this interface using the webpage debugging tool.

 

After the submission is successful, you can view the menu after paying attention to it.

We strongly recommend that you use the official webpage debugging tool to debug this interface.