自定义菜单url不能带_微服务架构【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实现消息的阶梯式通知。