微服务架构【SpringBoot+SpringCloud+VUE】五 || 实战项目-微信公众号自定义开发
本章主要讲解微信公众号自定义菜单、微信网页开发、模板消息推送等功能的实现；
发福利了，下方关注公众号，就能免费获取项目源码
1、自定义菜单
开发前需要了解以下几点：
1、微信公众号的自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。
2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。
3、自定义菜单接口可实现多种类型按钮，本教程主要实现以下两个按钮，更多按钮参照官方文档：
- click：点击推事件按钮
- view：跳转URL按钮
创建自定义菜单接口调用请求说明
http请求方式：POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
click和view的请求示例如下所示：
{
"button":[
{
"type":"click",
"name":"今日歌曲",
"key":"V1001_TODAY_MUSIC"
},
{
"name":"菜单",
"sub_button":[
{
"type":"view",
"name":"搜索",
"url":"http://www.soso.com/"
},
{
"type":"miniprogram",
"name":"wxa",
"url":"http://mp.weixin.qq.com",
"appid":"wx286b93c14bbf93aa",
"pagepath":"pages/lunar/index"
},
{
"type":"click",
"name":"赞一下我们",
"key":"V1001_GOOD"
}]
}]
}
下面我们基于mp框架创建公众号菜单：需要项目源码的请下方关注公众号获取
现在我们要实现如图所示的菜单，我们应该如何去实现？
我们只用调用WxMpService的getMenuService()方法，获取WxMpMenuService，该类下封装了菜单的查询、删除、创建等方法，调用menuCreate方法可以创建自定义菜单，方法如下：
WxMenu menu = new WxMenu();
WxMenuButton button1 = new WxMenuButton();
button1.setType(WxConsts.MenuButtonType.CLICK);
button1.setName("今日热点");
button1.setKey("V1001_TODAY_MUSIC");
WxMenuButton button2 = new WxMenuButton();
button2.setType(WxConsts.MenuButtonType.CLICK);
button2.setName("发布信息");
button2.setKey("V1001_TODAY_MUSIC");
WxMenuButton button3 = new WxMenuButton();
button3.setName("用户中心");
menu.getButtons().add(button1);
menu.getButtons().add(button2);
menu.getButtons().add(button3);
WxMenuButton button31 = new WxMenuButton();
button31.setType(WxConsts.MenuButtonType.VIEW);
button31.setName("搜索");
button31.setUrl("http://www.soso.com/");
WxMenuButton button32 = new WxMenuButton();
button32.setType(WxConsts.MenuButtonType.VIEW);
button32.setName("视频");
button32.setUrl("http://v.qq.com/");
WxMenuButton button33 = new WxMenuButton();
button33.setType(WxConsts.MenuButtonType.CLICK);
button33.setName("个人信息");
button33.setKey("V1001_GOOD");
WxMenuButton button34 = new WxMenuButton();
button34.setType(WxConsts.MenuButtonType.VIEW);
button34.setName("获取用户信息");
ServletRequestAttributes servletRequestAttributes =
(ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
if (servletRequestAttributes != null) {
HttpServletRequest request = servletRequestAttributes.getRequest();
URL requestURL = new URL(request.getRequestURL().toString());
String url = this.wxService.switchoverTo(appid).getOAuth2Service().buildAuthorizationUrl(
String.format("%s://%s/wx/redirect/%s/greet", requestURL.getProtocol(), requestURL.getHost(), appid),
WxConsts.OAuth2Scope.SNSAPI_USERINFO, null);
button34.setUrl(url);
}
button3.getSubButtons().add(button31);
button3.getSubButtons().add(button32);
button3.getSubButtons().add(button33);
button3.getSubButtons().add(button34);
this.wxService.switchover(appid);
return this.wxService.getMenuService().menuCreate(menu);
2、微信网页开发
我们现在要实现这么一个功能，用户点击菜单，进入到我们自己开发的H5页面，同时要获取用户的信息，应该如何去实现？
下面我看一个官方文档：如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。步骤如下：
1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
5 附：检验授权凭证（access_token）是否有效
2.1、获取code
应用授权作用域有两种方式：snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
我们只需要按照字段顺序组装如下url地址，
redirect_uri为你自己服务端的回调地址；
scope可以选择snsapi_base或者snsapi_userinfo；
response_type固定填写code；
state重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值；
#wechat_redirect 无论直接打开还是做页面302重定向时候，必须带此参数
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
我们在微信端访问该地址，会通过回调地址把code带过来
后端代码实现如下所示:
HttpServletRequest request = servletRequestAttributes.getRequest();
URL requestURL = new URL(request.getRequestURL().toString());
String url = this.wxService.switchoverTo(appid).getOAuth2Service().buildAuthorizationUrl(
String.format("%s://%s/wx/redirect/%s/greet", requestURL.getProtocol(), requestURL.getHost(), appid),
WxConsts.OAuth2Scope.SNSAPI_USERINFO, null);
2.2、通过code换取网页授权access_token
请求方法:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
后端代码实现比较简单，通过以下方法就能获取到用户信息：
WxMpOAuth2AccessToken accessToken = wxService.getOAuth2Service().getAccessToken(code);
WxMpUser user = wxService.getOAuth2Service().getUserInfo(accessToken, null);
2.3、刷新access_token
由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。
获取第二步的refresh_token后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
我们只用调用wxService.getOAuth2Service().refreshAccessToken(refresh_token)方法就可以实现刷新token，是不是非常的简单。
2.4、拉取用户信息
如果网页授权作用域为snsapi_userinfo，则可以通过access_token和openid获取用户信息。
http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
同样，后端方法也非常简单，只用调用wxService.getOAuth2Service().getUserInfo();即可。
3、模板消息推送
我们需要实现一个功能，公众号平台需要给用户主动推送消息，例如：支付的通知、通知、公告等；如下图所示，我需要给用户推送如下信息，该如何实现？
首先，我们进入到公众平台创建模板消息，点击新增测试模板
进入模板添加页面后，需要填写模板标题和内容，标题就是上图所示的重要通知，而模板内容我们想写成动态，如何实现？我们只用按{{first.DATA}}这样的格式，就可以通过后端传入我们需要的内容：我们模板方法中有两个动态参数，分别是{{first.DATA}}，和{{remark.DATA}}，后端代码实现如下：
@GetMapping("/send")
public void testSendTemplateMsg() throws WxErrorException {
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
.toUser("oiAsTwtKx4qzbwuRozjSO7NvXD_A")
.templateId("-sJvjdzIpKyH4MTi-c0A5HAfrxgWCyvmrHhcQB1fk-Q")
.url(" ")
.build();
templateMessage.addData(new WxMpTemplateData("first", dateFormat.format(new Date()), "#FF00FF"))
.addData(new WxMpTemplateData("remark", "公众号上线啦", "#FF00FF"));
String msgId = this.wxService.getTemplateMsgService().sendTemplateMsg(templateMessage);
}
其中.toUser为发送给哪个用户，参数为openId，如何获取openId，就需要通过上面的网页授权获取了
.templateId()为模板id，我们在传教了模板之后会有一个id，把该id填入到该参数里面
first模板中的{{first.DATA}}参数，同理remark为模板中的{{remark.DATA}}参数，可以把{{XX.DATA}}理解为占位符，调用以上方法，就会把内容通知到用户的公众号。
本章内容就讲解到这，微信公众号更多的个性化开发查看官方文档以及开源框架文档，下一期带大家学习如何通过mq实现消息的阶梯式通知。
4、学习交流QQ群【883210148】
5、关注微信公众号，免费获取文档及资源
