微服務架構【SpringBoot+SpringCloud+VUE】五 || 實戰項目-微信公眾號自定義開發

目錄

• 1、自定義菜單
• 2、微信網頁開發
  • 2.1、獲取code
  • 2.2、通過code換取網頁授權access_token
  • 2.3、刷新access_token
  • 2.4、拉取用戶信息
• 3、模板消息推送
• 4、學習交流QQ群【883210148】
• 5、關注微信公眾號，免費獲取文檔及資源

本章主要講解微信公眾號自定義菜單、微信網頁開發、模板消息推送等功能的實現；

發福利了，下方關注公眾號，就能免費獲取項目源碼

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、關注微信公眾號，免費獲取文檔及資源