微服务架构【SpringBoot+SpringCloud+VUE】五 || 实战项目-微信公众号自定义开发
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>1、自定义菜单</li><li>2、微信网页开发<ul><li>2.1、获取code</li><li>2.2、通过code换取网页授权access_token</li><li>2.3、刷新access_token</li><li>2.4、拉取用户信息</li></ul></li><li>3、模板消息推送</li><li>4、学习交流QQ群【883210148】</li><li>5、关注微信公众号，免费获取文档及资源</li></ul></div><br>本章主要讲解微信公众号自定义菜单、微信网页开发、模板消息推送等功能的实现；<p></p>
<p><strong>发福利了，下方关注公众号，就能免费获取项目源码</strong></p>
<h2 id="1自定义菜单">1、自定义菜单</h2>
<p>开发前需要了解以下几点：</p>
<p>1、微信公众号的自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。</p>
<p>2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。</p>
<p>3、自定义菜单接口可实现多种类型按钮，本教程主要实现以下两个按钮，更多按钮参照官方文档：</p>
<ul>
<li>click：点击推事件按钮</li>
<li>view：跳转URL按钮</li>
</ul>
<p>创建自定义菜单接口调用请求说明</p>
<p>http请求方式：POST（请使用https协议） https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN</p>
<p>click和view的请求示例如下所示：</p>
<pre><code class="language-json">{
"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"
}]
}]
}
</code></pre>
<p>下面我们基于mp框架创建公众号菜单：<strong>需要项目源码的请下方关注公众号获取</strong></p>
<p>现在我们要实现如图所示的菜单，我们应该如何去实现？</p>
<p><img src="https://mmbiz.qpic.cn/mmbiz_png/a7cysOYUpy3F9oHCCXEdJrq6goLclQ8J6GWamib3tkOKxyUd4ASWbicfHDEh8wibMxDdU85Yw6FztVpZOw5gNTZiaQ/0?wx_fmt=png" alt="weixin01" loading="lazy"></p>
<p>我们只用调用WxMpService的getMenuService()方法，获取WxMpMenuService，该类下封装了菜单的查询、删除、创建等方法，调用menuCreate方法可以创建自定义菜单，方法如下：</p>
<pre><code class="language-java">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);
</code></pre>
<h2 id="2微信网页开发">2、微信网页开发</h2>
<p>我们现在要实现这么一个功能，用户点击菜单，进入到我们自己开发的H5页面，同时要获取用户的信息，应该如何去实现？</p>
<p>下面我看一个官方文档：如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。步骤如下：</p>
<p>1 第一步：用户同意授权，获取code</p>
<p>2 第二步：通过code换取网页授权access_token</p>
<p>3 第三步：刷新access_token（如果需要）</p>
<p>4 第四步：拉取用户信息(需scope为 snsapi_userinfo)</p>
<p>5 附：检验授权凭证（access_token）是否有效</p>
<h3 id="21获取code">2.1、获取code</h3>
<p>应用授权作用域有两种方式：snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）</p>
<p>我们只需要按照字段顺序组装如下url地址，</p>
<p>redirect_uri为你自己服务端的回调地址；</p>
<p>scope可以选择snsapi_base或者snsapi_userinfo；</p>
<p>response_type固定填写code；</p>
<p>state重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值；</p>
<p><code>#wechat_redirect</code> 无论直接打开还是做页面302重定向时候，必须带此参数</p>
<pre><code>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></pre>
<p>我们在微信端访问该地址，会通过回调地址把code带过来</p>
<p>后端代码实现如下所示:</p>
<pre><code class="language-java">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);
</code></pre>
<h3 id="22通过code换取网页授权access_token">2.2、通过code换取网页授权access_token</h3>
<p>请求方法:</p>
<pre><code>https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
</code></pre>
<p>后端代码实现比较简单，通过以下方法就能获取到用户信息：</p>
<pre><code class="language-java">WxMpOAuth2AccessToken accessToken = wxService.getOAuth2Service().getAccessToken(code);
WxMpUser user = wxService.getOAuth2Service().getUserInfo(accessToken, null);
</code></pre>
<h3 id="23刷新access_token">2.3、刷新access_token</h3>
<p>由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。</p>
<pre><code>获取第二步的refresh_token后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
</code></pre>
<p>我们只用调用<strong>wxService.getOAuth2Service().refreshAccessToken(refresh_token)</strong>方法就可以实现刷新token，是不是非常的简单。</p>
<h3 id="24拉取用户信息">2.4、拉取用户信息</h3>
<p>如果网页授权作用域为snsapi_userinfo，则可以通过access_token和openid获取用户信息。</p>
<pre><code>http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
</code></pre>
<p>同样，后端方法也非常简单，只用调用<strong>wxService.getOAuth2Service().getUserInfo();</strong>即可。</p>
<h2 id="3模板消息推送">3、模板消息推送</h2>
<p>我们需要实现一个功能，公众号平台需要给用户主动推送消息，例如：支付的通知、通知、公告等；如下图所示，我需要给用户推送如下信息，该如何实现？</p>
<p><img src="https://mmbiz.qpic.cn/mmbiz_png/a7cysOYUpy3F9oHCCXEdJrq6goLclQ8JibI1cjQ1e85dRErNZdwf3unUyzfdS22qhteuFJibAOjIQLibmpibNQexDw/0?wx_fmt=png" alt="weixin02" loading="lazy"></p>
<p>首先，我们进入到公众平台创建模板消息，点击新增测试模板</p>
<p><img src="https://mmbiz.qpic.cn/mmbiz_png/a7cysOYUpy3F9oHCCXEdJrq6goLclQ8J5aibH4tibiciapcBErR9esMt3vP0oRtXqg2UYogc7sAyMrk5qlymxTFXMg/0?wx_fmt=png" alt="weixin03" loading="lazy"></p>
<p>进入模板添加页面后，需要填写模板标题和内容，标题就是上图所示的<strong>重要通知</strong>，而模板内容我们想写成动态，如何实现？我们只用按{{first.DATA}}这样的格式，就可以通过后端传入我们需要的内容：我们模板方法中有两个动态参数，分别是{{first.DATA}}，和{{remark.DATA}}，后端代码实现如下：</p>
<pre><code class="language-java">@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);
}
</code></pre>
<p>其中.toUser为发送给哪个用户，参数为openId，如何获取openId，就需要通过上面的网页授权获取了</p>
<p>.templateId()为模板id，我们在传教了模板之后会有一个id，把该id填入到该参数里面</p>
<p>first模板中的{{first.DATA}}参数，同理remark为模板中的{{remark.DATA}}参数，可以把{{XX.DATA}}理解为占位符，调用以上方法，就会把内容通知到用户的公众号。</p>
<p><strong>本章内容就讲解到这，微信公众号更多的个性化开发查看官方文档以及开源框架文档，下一期带大家学习如何通过mq实现消息的阶梯式通知。</strong></p>
<h2 id="4学习交流qq群883210148">4、学习交流QQ群【883210148】</h2>
<p><img src="https://img2018.cnblogs.com/blog/1666887/202002/1666887-20200222202354692-1724827.png" alt="alt QQ群" loading="lazy"></p>
<h2 id="5关注微信公众号免费获取文档及资源">5、关注微信公众号，免费获取文档及资源</h2>
<p><img src="https://img2020.cnblogs.com/blog/1666887/202101/1666887-20210106213837290-332551769.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/kevin-ying/p/12392721.html
頁:
[1]