快捷導(dǎo)航

詳解nodejs微信公眾號開發(fā)——6.自定義菜單

更新時間：2017年04月13日 10:27:35 作者：芒果屋里的貓

這篇文章主要介紹了詳解nodejs微信公眾號開發(fā)——6.自定義菜單，自定義菜單能夠幫助公眾號豐富界面，讓用戶更好更快地理解公眾號的功能。

上一篇文章：nodejs微信公眾號開發(fā)——5.素材管理接口，我們實現(xiàn)了新增臨時素材、管理永久素材的接口，這些接口的實現(xiàn)，使我們能夠推送多樣的消息給用戶。本節(jié)介紹的內(nèi)容是關(guān)于自定義菜單

1. 自定義菜單的介紹

自定義菜單能夠幫助公眾號豐富界面，讓用戶更好更快地理解公眾號的功能。關(guān)于自定義菜單需要掌握以下幾點內(nèi)容：

自定義菜單最多包括3個一級菜單，每個一級菜單最多包含5個二級菜單。
一級菜單最多4個漢字，二級菜單最多7個漢字，多出來的部分將會以“...”代替。
創(chuàng)建自定義菜單后，由于微信客戶端緩存，需要24小時微信客戶端才會展現(xiàn)出來。測試時可以嘗試取消關(guān)注公眾賬號后再次關(guān)注，則可以看到創(chuàng)建后的效果。

更多信息查看官方文檔：自定義菜單創(chuàng)建接口

2. 創(chuàng)建自定義菜單

2.1 首先羅列以下操作的請求地址：

var api = {
  ...
  menu:{
    create:prefix+'/menu/create?', //access_token=ACCESS_TOKEN 創(chuàng)建菜單
    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函數(shù)

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);
      });
    });
  });
}

參數(shù)menu由外部業(yè)務(wù)層傳入。為了方便管理，將自定義菜單的內(nèi)容單獨寫在一個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'
      }
    ]
  }]
}

里面的類型暫時隨意寫的。我們在業(yè)務(wù)層weixin.js里面實現(xiàn)自定義菜單的使用：

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

保險起見先把原有的菜單刪了，重新建立自己新的菜單。

2.3 定義deleteMenu函數(shù)

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);
      });
    });
  });
}

測試了一下，取關(guān)重新關(guān)注后微信測試號并沒有立即呈現(xiàn)自定義菜單，要等一段時間，略坑。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: