自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。
我这里不一一说明接口内容以及注意事项了，因为官方文档随着更新会有变化，所以没必要一一列明，最好就是随时查看官方文档，会更加准确。下面我们来从当前文档中摘出来我们想要测试的功能。
1.菜单创建接口：http请求方式：POST https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
2.菜单查询接口：http请求方式：GET https://api.weixin.qq.com/cgi-bin/menu/get?access_token=ACCESS_TOKEN
3.菜单删除接口：http请求方式：GET https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=ACCESS_TOKEN
4.获取自定义菜单配置接口：GET https://api.weixin.qq.com/cgi-bin/get_current_selfmenu_info?access_token=ACCESS_TOKEN
我们在wechat.js文件配置一下url变量：
//自定义菜单
menu: {
create: prefix + 'menu/create?',
fetch: prefix + 'menu/get?',
del: prefix + 'menu/delete?',
current: prefix + 'get_current_selfmenu_info?'
}然后依然在wechat.js文件中，添加菜单的相关方法：
//在weChat的原型链上增加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发起请求
request({
method: 'POST',
url: url,
body: menu,
json: true
})
.then(function(response) {
var _data = response.body;
if (_data) {
resolve(_data);
} else {
throw new Error('create menu fail');
};
})
.catch(function(err) {
reject(err);
});
});
});
};
//在weChat的原型链上增加getMenu方法 用来获取自定义菜单
weChat.prototype.getMenu = function() {
var that = this;
return new Promise(function(resolve, reject) {
that
.fetchAccessToken()
.then(function(data) {
var url = api.menu.fetch + 'access_token=' + data.access_token;
//使用request发起请求
request({
url: url,
json: true
})
.then(function(response) {
var _data = response.body;
if (_data) {
resolve(_data);
} else {
throw new Error('get menu fail');
};
})
.catch(function(err) {
reject(err);
});
});
});
};
//在weChat的原型链上增加delMenu方法 用来删除自定义菜单
weChat.prototype.delMenu = function() {
var that = this;
return new Promise(function(resolve, reject) {
that
.fetchAccessToken()
.then(function(data) {
var url = api.menu.del + 'access_token=' + data.access_token;
//使用request发起请求
request({
url: url,
json: true
})
.then(function(response) {
var _data = response.body;
if (_data) {
resolve(_data);
} else {
throw new Error('delete menu fail');
};
})
.catch(function(err) {
reject(err);
});
});
});
};
//在weChat的原型链上增加getCurrentMenu方法 用来删除自定义菜单
weChat.prototype.getCurrentMenu = function() {
var that = this;
return new Promise(function(resolve, reject) {
that
.fetchAccessToken()
.then(function(data) {
var url = api.menu.current + 'access_token=' + data.access_token;
//使用request发起请求
request({
url: url,
json: true
})
.then(function(response) {
var _data = response.body;
if (_data) {
resolve(_data);
} else {
throw new Error('get current menu fail');
};
})
.catch(function(err) {
reject(err);
});
});
});
};在项目的根目录下，新建menu.js文件，用于存放菜单模板：
'use strict';
module.exports = {
'button': [{
'name':'点击事件',
'type':'click',
'key':'menu_click'
},{
'name':'点出菜单1',
'sub_button':[{
'name':'跳转URL',
'type':'view',
'url':'https://www.baidu.com'
},{
'name':'扫码推送事件',
'type':'scancode_push',
'key':'qr_scan'
},{
'name':'扫码推送',
'type':'scancode_waitmsg',
'key':'qr_scan_wait'
},{
'name':'弹出系统拍照',
'type':'pic_sysphoto',
'key':'pic_photo'
},{
'name':'弹出拍照或者相册',
'type':'pic_photo_or_album',
'key':'pic_photo_album'
}]
},{
'name':'点出菜单2',
'sub_button':[{
'name':'微信相册发图',
'type':'pic_weixin',
'key':'pic_weixin'
},{
'name':'地理位置',
'type':'location_select',
'key':'location_select'
}
// ,{
// 'name':'下发消息（除文本消息）',
// 'type':'media_id',
// 'media_id':''
// },{
// 'name':'跳转图文消息',
// 'type':'view_limited',
// 'media_id':''
// }
]
}]
}现在我们来生成菜单，打开weixin.js文件，在文件上方引入menu.js，同时初始化菜单：
var menu = require('./menu');
//初始化weChat 并传入配置信息
var wechatApi = new weChat(config.wechat);
//重置并初始化菜单
wechatApi.delMenu().then(function(){
return wechatApi.createMenu(menu);
})
.then(function(msg){
console.log(msg);
});之后，回复函数内，在message.MsgType === 'event'的条件里，添加菜单事件的判断：
//判断用户行为 是事件推送还是普通消息 先判断的是事件推送
if (message.MsgType === 'event') {
//订阅事件 分为搜索订阅和二维码订阅
if (message.Event === 'subscribe') {
if (message.EventKey) {
console.log('扫描二维码进来' + message.EventKey + ' ' + message.ticket);
}
//通过this.body设置回复消息
this.body = '欢迎订阅我的公众号';
}
//取消订阅事件
else if (message.Event === 'unsubscribe') {
console.log('用户取消了关注');
this.body = '';
}
//地理位置事件
else if (message.Event === 'LOCATION') {
this.body = '您上报的位置是：' + message.Latitude + '/' + message.Longitude + '-' + message.Precision;
}
//点击事件 自定义菜单事件
else if (message.Event === 'CLICK') {
this.body = '您点击了菜单：' + message.EventKey;
}
//跳转链接事件 点击菜单跳转链接时的事件推送
else if (message.Event === 'VIEW') {
this.body = '您点击了菜单中的链接：' + message.EventKey;
}
//扫描事件
else if (message.Event === 'SCAN') {
console.log('关注后扫描二维码' + message.EventKey + ' ' + message.Ticket);
this.body = '看到你扫一下哦';
}
//扫码推送事件
else if (message.Event === 'scancode_push') {
console.log(message.ScanCodeInfo.ScanType);
console.log(message.ScanCodeInfo.ScanResult);
this.body = '您点击了菜单中的链接：' + message.EventKey;
}
//扫码推送
else if (message.Event === 'scancode_waitmsg') {
console.log(message.ScanCodeInfo.ScanType);
console.log(message.ScanCodeInfo.ScanResult);
this.body = '您点击了菜单中的：' + message.EventKey;
}
//弹出系统拍照
else if (message.Event === 'pic_sysphoto') {
console.log( message.SendPicsInfo.PicList);
console.log( message.SendPicsInfo.Count);
this.body = '您点击了菜单中的：' + message.EventKey;
}
//弹出拍照或者相册
else if (message.Event === 'pic_photo_or_album') {
console.log( message.SendPicsInfo.PicList);
console.log( message.SendPicsInfo.Count);
this.body = '您点击了菜单中的：' + message.EventKey;
}
//微信相册发图
else if (message.Event === 'pic_weixin') {
console.log( message.SendPicsInfo.PicList);
console.log( message.SendPicsInfo.Count);
this.body = '您点击了菜单中的：' + message.EventKey;
}
//地理位置选择器
else if (message.Event === 'location_select') {
console.log(message.SendLocationInfo.Location_X);
console.log(message.SendLocationInfo.Location_Y);
console.log(message.SendLocationInfo.Scale);
console.log(message.SendLocationInfo.Label);
console.log(message.SendLocationInfo.Poiname);
this.body = '您点击了菜单中的：' + message.EventKey;
}
}这时我们取消关注，会报两个错误，第一个错误：Cannot read property 'then' of undefined ，这个错误解决，我们在this.getAccessToken()前面加上return就可以解决。如下图：
第二个错误：TypeError: Cannot read property 'type' of undefined ，这个错误是因为事件触发时，服务器会推送两条不同类型的事件，解决方法是，打开tools.js文件，在格式化回复体时，对content多加一个判断：
现在我们的自定义菜单就可以跑通啦~
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
