9 微信公众平台--自定义菜单
自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。
我这里不一一说明接口内容以及注意事项了，因为官方文档随着更新会有变化，所以没必要一一列明，最好就是随时查看官方文档，会更加准确。下面我们来从当前文档中摘出来我们想要测试的功能。
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多加一个判断：
现在我们的自定义菜单就可以跑通啦~
