SoFunction
Updated on 2025-03-10

Detailed explanation of nodejs WeChat official account development-6. Custom menu

Previous article:nodejs WeChat official account development——5. Material management interface, We have implemented interfaces to add temporary materials and manage permanent materials. The implementation of these interfaces allows us to push diverse messages to users. This section introduces content about custom menu

1. Introduction to custom menus

Custom menus can help the public account enrich the interface and allow users to understand the functions of the public account better and faster. Regarding the custom menu, you need to master the following:

  1. Custom menus include up to 3 first-level menus, each first-level menu contains up to 5 second-level menus.
  2. The first-level menu has up to 4 Chinese characters, and the second-level menu has up to 7 Chinese characters. The extra parts will be replaced by "...".
  3. After creating a custom menu, it takes 24 hours for the WeChat client to display due to the cache of WeChat client. During the test, you can try to unfollow the public account and follow it again, and you can see the effect after creation.

For more information, see the official documentation:Customize menu creation interface

2. Create a custom menu

2.1 First list the request address for the following operations:

var api = {
  ...
  menu:{
    create:prefix+'/menu/create?', //access_token=ACCESS_TOKEN Create menu    get:prefix+'/menu/get?', //access_token=ACCESS_TOKE Get menu, GET request    delete:prefix+'/menu/delete?', //access_token=ACCESS_TOKEN Delete menu, GET request    getInfo:prefix+'get_current_selfmenu_info?' //access_token=ACCESS_TOKEN Get the custom menu configuration interface  }
}

2.2 Defining the createMenu function

 = function(menu){
  var that = this;
  return new Promise(function(resolve,reject){
    ().then(function(data){
      var url =  + 'access_token=' + data.access_token;
      request({url:url,method:'POST',body:menu,json:true}).then(function(response){
        var _data = ;
        if(_data.errcode === '0'){
          resolve();
        }else{
          throw new Error('create menu failed!');
        }
      }).catch(function(err){
        reject(err);
      });
    });
  });
}

The parameter menu is passed in by the external service layer. For easy management, write the contents of the custom menu in a file:

/*
  * Configure custom menu
  */
'use strict'

 = {
  'button':[
  {
    'name':'up to date',
    'type':'click',
    'key':'menu_click'
  },
  {
    'name':'category',
    'sub_button':[
      {
        'name':'Science Fiction',
        'type':'view',
        'url':'music.'
      },
      {
        'name':'Suspense',
        'type':'scancode_push',
        'key':'qr_scan'
      },
      {
        'name':'love',
        'type':'scancode_waitmsg',
        'key':'qr_scan_wait'
      },
      {
        'name':'educate',
        'type':'pic_photo_or_album',
        'key':'pic_photo_album'
      }
    ]
  },
  {
    'name':'area',
    'sub_button':[
      {
        'name':'mainland',
        'type':'pic_weixin',
        'key':'pic_weixin'
      },
      {
        'name':'European and American',
        'type':'location_select',
        'key':'location_select'
      }
    ]
  }]
}

The types inside are written at will for the time being. We implement the use of custom menus in the business layer:

().then(function(){
  return (menu);
}).then(function(msg){
  (msg);
});

On the safe side, delete the original menu first and re-create your own new menu.

2.3 Defining the deleteMenu function

 = function(){
  var that = this;
  return new Promise(function(resolve,reject){
    ().then(function(data){
      var url =  + 'access_token=' + data.access_token;
      request({url:url,json:true}).then(function(response){
        var _data = ;
        if(_data.errcode === '0'){
          resolve();
        }else{
          throw new Error('delete menu failed!');
        }
      }).catch(function(err){
        reject(err);
      });
    });
  });
}

After testing, after unclosing the clearance and following again, the WeChat test account did not immediately present the custom menu. It would take some time to wait, which was a little tricky.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.