重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。
目录
本系列博文还包含了下面的博客：
- 【微信公众号开发】一、运作及配置流程简介
- 【微信公众号开发】二、解析微信请求及响应消息
- 【微信公众号开发】三、解析微信事件XML数据消息及响应
- 【微信公众号开发】四、公众号按钮设置及自己的微信按钮编辑器（本文）
- 【微信公众号开发】五、微信网页授权获取用户openId
- 【微信公众号开发】六、微信JS的使用
- 【微信公众号开发】七、微信JS需要注意的坑
- 【微信公众号开发】八、微信JS发起支付
微信公众号提供了许多API接口用于完成一些配置，或者获取公众号相关的信息。但是每一个接口都需要一个凭据参数，叫access_token, 所以在调用微信的API接口之前，都必须要先准备好自己的access_token。
一、准备 access_token
access_token 的获取就比较简单，它不需要复杂的加密参数，只需要几个必要的信息参数就可以获取：
- grant_type: 获取 access_token 就一直填写 client_credential
- appid: 公众号的appid
- secret：公众号后台配置的appsecret
使用这些参数，用GET方式请求地址：
https://api.weixin.qq.com/cgi-bin/token
就可以获取到 access_token 了， 不过要注意，微信后台有ip白名单设定，你必须要先将你的服务器IP地址配置到白名单里，你的请求才能正常的获取到 access_token。一个非常简单的示列请求方式如下：
// 准备参数
Map<String, String> param = new HashMap<>();
param.put("grant_type", "client_credential");
param.put("appid", "自己公众号的appid");
param.put("secret", "自己公众号的appsecret");
// 执行请求
String result = HttpUtil.get("https://api.weixin.qq.com/cgi-bin/token", param);
// 不出意外的话，就会得到下面的返回：
// {
// "access_token": "ACCESS_TOKEN",
// "expires_in":7200
// }
代码中出现了 HttpUtil 来帮助我快速的完成了一个Get请求，这个工具类帮我完成了不小的代码量，如果你也想直接使用，你可以直接在你的maven项目里面加入下面的依赖即可：
<dependency>
<groupId>cn.microanswer</groupId>
<artifactId>HttpUtil</artifactId>
<version>1.0.1</version>
</dependency>
当我们顺利的拿到了 access_token 的值后，就可以进行想要的API接口请求了。不过要注意，获取 access_token 接口每天调用次数是有限制的，如果每次想要调用某个API时，都去获取一遍 access_token 的话，很快，你就会发现接口调用次数超过限制了。所以，每当获取完成access_token时，应该将其保存下来，每个 access_token 最多坚持2小时，2小时过后，你就必须重新获取另一个access_token了，在这两小时内，你都可以放心的使用它。
二、使用自定义菜单创建接口
这个功能是一个可选项，它可以允许开发人员使用程序来修改微信公众号按钮内容和按钮事件值。在开发者从未使用过时，微信后台管理页面是提供了一个图形化按钮编辑器的，用起来十分方便。
那为什么还要接入这个接口？
em~~~，我不得不说一个根本无法令人信服的理由吧！如果每次想要修改的时候(虽然这种时候不多)，你都要登录一遍微信后台，然后进去设置按钮情况。你认为这个登录流程十分麻烦，希望有个东西可以直接修改，这时候你可以接入这个接口。或者、 我就是单纯的想要接入~~。
在了解接口调用方式前，先了解微信按钮有哪些类型是十分必要的，下表列出了微信按钮支持的类型和它们的作用：
| 类型 | 作用 |
|---|---|
| click | 点击推事件，用户点击click类型按钮后，微信服务器会通过消息接口推送消息类型为event的结构给开发者，并且带上按钮中开发者填写的key值，开发者可以通过自定义的key值与用户进行交互 |
| view | 跳转URL，用户点击view类型按钮后，微信客户端将会打开开发者在按钮中填写的网页URL，可与网页授权获取用户基本信息接口结合，获得用户基本信息。 |
| scancode_push | 扫码推事件，用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后显示扫描结果（如果是URL，将进入URL），且会将扫码的结果传给开发者，开发者可以下发消息。 |
| scancode_waitmsg | 扫码推事件，且弹出“消息接收中”提示框用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后，将扫码的结果传给开发者，同时收起扫一扫工具，然后弹出“消息接收中”提示框，随后可能会收到开发者下发的消息。 |
| pic_sysphoto | 弹出系统拍照发图，用户点击按钮后，微信客户端将调起系统相机，完成拍照操作后，会将拍摄的相片发送给开发者，并推送事件给开发者，同时收起系统相机，随后可能会收到开发者下发的消息。 |
| pic_photo_or_album | 弹出拍照或者相册发图用，户点击按钮后，微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。 |
| pic_weixin | 弹出微信相册发图器用，户点击按钮后，微信客户端将调起微信相册，完成选择操作后，将选择的相片发送给开发者的服务器，并推送事件给开发者，同时收起相册，随后可能会收到开发者下发的消息。 |
| location_select | 弹出地理位置选择器，用户点击按钮后，微信客户端将调起地理位置选择工具，完成选择操作后，将选择的地理位置发送给开发者的服务器，同时收起位置选择工具，随后可能会收到开发者下发的消息。 |
| media_id | 下发消息（除文本消息），用户点击media_id类型按钮后，微信服务器会将开发者填写的永久素材id对应的素材下发给用户，永久素材类型可以是图片、音频、视频、图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。 |
| view_limited | 跳转图文消息URL，用户点击view_limited类型按钮后，微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL，永久素材类型只支持图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。 |
这些类型中，click 和 view 是使用率高达 99% 的两种类型，其余的按钮类型几乎不会使用。
在了解了按钮类型之后，便可以开始入手接口调用了，而微信按钮是支持1级按钮设定和2级按钮设定的，这样的设定结构便产生了有别于普通请求的参数格式。通常一个请求传递参数是以键值对的方式传递，就像这样：
name=Jack&age=10&from=china&weight=98
而设定微信按钮的参数则不是这种格式的，况且这种格式对于设定微信按钮的需求，实现起来稍微显得捉襟见。因此微信按钮接口需要的参数是json格式的数据，这个json数据有下面的格式：
{
"button": [
{
"type": "click",
"name": "今日歌曲",
"key": "V1001_TODAY_MUSIC"
},
{
"name": "菜单",
"sub_button": [
{
"type": "view",
"name": "搜索",
"url": "http://www.soso.com/"
},
{
"type": "click",
"name": "赞一下我们",
"key": "V1001_GOOD"
}]
}]
}
这样的数据提交给设定按钮接口，则微信公众号会将微信按钮按格式设定。如果用户不在微信公众号界面，再次进入微信公众号界面与上次进入微信公众号界面时间差大于5分钟，则微信会更新一次按钮设定情况，就会将你最新设立的微信公众号按钮应用到微信公众号里。如果希望立刻生效，只有取关再立刻关注公众号。
使用POST请求微信提供的按钮设定接口：
https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
同样使用上方提及的HTTP工具类：
String result = HttpUtil.postApplicationJson(
"https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN",
"{" +
" \"button\": [" +
" {" +
" \"type\": \"click\"," +
" \"name\": \"今日歌曲\"," +
" \"key\": \"V1001_TODAY_MUSIC\"" +
" }," +
" {" +
" \"name\": \"菜单\"," +
" \"sub_button\": [" +
" {" +
" \"type\": \"view\"," +
" \"name\": \"搜索\"," +
" \"url\": \"http://www.soso.com/\"" +
" }," +
" {" +
" \"type\": \"click\"," +
" \"name\": \"赞一下我们\"," +
" \"key\": \"V1001_GOOD\"" +
" }]" +
" }]" +
"}"
);
其中 access_token 就需要换成之前拿到的。执行完成后即完成了微信按钮的设置。但是我想信你不会喜欢这样去设定微信按钮的，比起自己构建一个这样的配置数据，直接使用微信后台的图形化工具进行配置显得十分方便。
三、自己建立图形化配置工具
如果你的时间足够充裕，当然可以自己实现一个图形化配置微信按钮的页面，这样的功能也显得十分具有挑战性，而且相当有乐趣！先不妨一睹我自己实现的图形化微信按钮配置页面:
使用这个图形化配置工具，点击【下载配置】按钮，即可得到如下的按钮配置原文：
{
"button": [
{
"name": "新按钮",
"sub_button": [
{"type": "view", "name": "新按钮", "url": ""},
{"type": "view", "name": "新按钮", "url": ""}
]
},
{ "type": "click", "name": "新按钮", "key": "event_value"},
{
"name": "新按钮",
"sub_button": [
{"type": "view", "name": "新按钮", "url": ""},
{"type": "view", "name": "新按钮", "url": ""},
{"type": "view", "name": "新按钮", "url": ""},
{"type": "view", "name": "新按钮", "url": ""}
]
}
]
}
有了这个工具，结合微信设置按钮接口，以后想改微信公众号界面时，就变得极其方便，甚至可以随时修改。
秀了一波过后，必须要将这个实现分享出来，独乐乐不如众乐乐。
你可以通过此链接下载到这个“微信按钮编辑器”的代码: 百度网盘， 密码：nisd。然后你可以十分方便的引入到你的页面当中。下面简单介绍使用方法：
<div id="wxEditer"></div>
<!-- 引入编辑器js -->
<script src="./wxBtnEditer.min.js"></script>
<script>
// 初始化为编辑器.
var wxEditer = window.initWxBtnEditer("wxEditer");
// 或者你已有一个微信按钮配置，希望用这个配置渲染出来：
var wxCfg = {button: [{name: "新按钮",type:"click",key:"newBtnEvent"}]};
var wxEditer = window.initWxBtnEditer("wxEditer", wxCfg);
// 第二个参数也支持字符串的的格式
var wxCfg = "{\"button\":[{\"name\":\"新按钮\",\"type\":\"click\",\"key\":\"newBtnEvent\"}]}";
var wxEditer = window.initWxBtnEditer("wxEditer", wxCfg);
// 获取当前的配置，此方法将返回你在编辑器内所有操作结果。返回的是一个js对象。
// 只需要使用 JSON.stringify() 方法转换为字符串，即可提交给微信后台接口。
wxEditer.getCfg();
// 方法返回了原始的配置。 如果你没有传原始配置，将返回undefined。
wxEditer.getOriginCfg();
</script>
微信按钮编辑器试玩
也许你对这个编辑器兴趣不大，别急，不如先体验体验：