Node.js 微信公众号开发:自定义菜单创建与删除详解

作者:慢半拍时间:2026-10-22 03:05:20浏览:229

本文详解基于 Node.js 的微信公众号自定义菜单开发。介绍菜单结构限制(3个一级、5个二级),演示如何通过 API 创建和删除菜单,并提供完整的代码实现与测试注意事项,帮助开发者快速掌握菜单功能集成。

Node.js 微信公众号自定义菜单开发概述

在上一篇文章“nodejs微信公众号开发——5.素材管理接口”中,我们完成了新增临时素材及管理永久素材接口的实现,这些功能为向用户推送多样化消息奠定了基础。本节将重点介绍自定义菜单的开发与配置。

自定义菜单介绍与限制

1. 自定义菜单的介绍

自定义菜单能够丰富公众号的界面展示,帮助用户更直观、快速地理解公众号的功能。在使用自定义菜单前,需掌握以下关键要点:

  1. 每个公众号最多可设置 3 个一级菜单,每个一级菜单下最多包含 5 个二级菜单。
  2. 一级菜单名称限制为最多 4 个汉字,二级菜单名称限制为最多 7 个汉字。若超出字数限制,多余部分将以“...”显示。
  3. 创建自定义菜单后,由于微信客户端存在缓存机制,新菜单通常需等待 24 小时才会生效。在测试阶段,若需立即查看效果,可尝试取消关注公众号后重新关注,此时即可看到更新后的菜单。

更多详细信息可查阅官方文档:自定义菜单创建接口。

创建自定义菜单实现

2. 创建自定义菜单

2.1 首先列出相关操作的请求地址:


var api = {
  ...
  menu:{
    create:prefix+'/menu/create?', //access_token=ACCESS_TOKEN 创建菜单
    get:prefix+'/menu/get?', //access_token=ACCESS_TOKE 获取菜单,GET请求
    delete:prefix+'/menu/delete?', //access_token=ACCESS_TOKEN 删除菜单,GET请求
    getInfo:prefix+'get_current_selfmenu_info?' //access_token=ACCESS_TOKEN 获取自定义菜单配置接口
  }
}

2.2 定义 createMenu 函数


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

参数 menu 由外部业务层传入。为便于管理,我们将自定义菜单的具体内容单独封装在 menu.js 文件中:


/*
 * 配置自定义菜单
 */
'use strict'

module.exports = {
  'button':[
  {
    'name':'最新',
    'type':'click',
    'key':'menu_click'
  },
  {
    'name':'类别',
    'sub_button':[
      {
        'name':'科幻',
        'type':'view',
        'url':'music.163.com'
      },
      {
        'name':'悬疑',
        'type':'scancode_push',
        'key':'qr_scan'
      },
      {
        'name':'爱情',
        'type':'scancode_waitmsg',
        'key':'qr_scan_wait'
      },
      {
        'name':'教育',
        'type':'pic_photo_or_album',
        'key':'pic_photo_album'
      }
    ]
  },
  {
    'name':'地域',
    'sub_button':[
      {
        'name':'大陆',
        'type':'pic_weixin',
        'key':'pic_weixin'
      },
      {
        'name':'欧美',
        'type':'location_select',
        'key':'location_select'
      }
    ]
  }]
}

在业务层 weixin.js 中实现自定义菜单的具体调用逻辑:


wechatApi.deleteMenu().then(function(){
  return wechatApi.createMenu(menu);
}).then(function(msg){
  console.log(msg);
});

为确保菜单配置生效,建议先删除原有菜单,再重新创建新的菜单结构。

删除菜单功能与测试注意事项

2.3 定义 deleteMenu 函数


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

实际测试发现,即使取消关注后重新关注,微信测试号也不会立即显示自定义菜单,仍需等待一段时间,这一点在实际开发中需注意。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章