小程序发送模板消息给用户 —— 一次性模板实现“长期订阅”

布满荆棘的人生 2023-10-08 17:19 6阅读 0赞

> 大家好！我是**我玩亚索我会C**，在写小程序时，我们会有向用户发送消息的需求，比如发送提醒通知，或者是一些重要通知来形成一个服务的闭环。这就要用到微信的**发送消息**功能了，下面我使用Java语言来详细演示下如何使用一次性订阅消息发送消息给用户。

## 1.微信发消息流程 ##

![在这里插入图片描述][c7f026f21c1d43c292f14746629318ed.png_pic_center]

因为微信算是比较正式的社交软件，主动向用户发信息这个动作很容易被一些商家作为推销的手段，为了避免用户被骚扰所以就由用户直接来决定是否要接受该消息，这样设计很不错！

## 2.订阅消息 ##

### 2.1 消息模板 ###

发送消息必须使用微信小程序官方提供的消息模板。消息模板可以在[微信公众号平台][Link 1]获取（前提是你得注册过了），如下图：  
![在这里插入图片描述][43e179d72eb6407189bd58b4e8fff61f.png]  
选好模板后，点击操作栏的选用按钮即可。如下图：  
![在这里插入图片描述][41df7951de234bcab4a02b8b3a2615f7.png]

![在这里插入图片描述][36725af5e814479fab74bead422c9fff.png]

#### 2.1.1 消息内容说明： ####

![在这里插入图片描述][7dc2728b49ef469da13d7e9d6f867089.png]

**（1）模板id：** 模板的唯一标识，`微信小程序端`和`服务器端`都需使用，来确定使用那个模板。  
**（2）详细内容：** 这里就是消息的内容，上图所示中的 **温馨提示** 就是标题，`{ {ting6.DATA}}`就是值。

*剩余模板中的内容都不重要，在此不作赘述。*

### 2.2 消息类型 ###

**（1）一次性订阅**：用户自主订阅后，可不限时间地下发一条对应的服务消息；每次订阅只能发送一条消息。

**（2）长期订阅**：用户订阅一次后，可长期下发多条消息。长期订阅对资质的要求很高，`目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。`本文选用的时一次性订阅。

### 2.3 消息发送 ###

**（1）方法：**`wx.requestSubscribeMessage(Object object)`[（微信官方文档入口）][Link 2]该`wx.requestSubscribeMessage()`用在`微信小程序端`，用于调起订阅消息界面。如下图：  
![在这里插入图片描述][b40a86024de84e388261d3c624bfdda6.jpeg_pic_center]

#### 2.3.1 注意事项： ####

**（1）触发方式：** `wx.requestSubscribeMessage(Object object)`只能用于点击按钮触发。

**（2）一次性消息：** 在消息类型中提及到，`一次性订阅消息`在用户自主订阅后，只能发送一次消息。

## 3.前端端代码 ##

### 3.1 前端代码 ###

**（1）前端Html代码：**

...
      //由点击事件调出订阅消息界面
      <button bindtap="subScriptionMessage"></button>
      ...

**（2） 前端JS代码：**

...
    //调出 模板消息界面
     subScriptionMessage(){
        
    	 wx.requestSubscribeMessage({
        
    	  	//模板id，可以写多个
    		tmplIds:['sn12-c51f_1PCY52t0u5UZbqKaS7z4G7U1mV-4ZH']
    		//成功回调
    		success(res){
        
    	        console.log(res);
    	    },
    	    //失败回调
    	    fail(res){
        
    	        console.log(res);
    	    }
      	})
     } 
    ...

### 3.2 后端代码 ###

**（1）代码**

import lombok.extern.slf4j.Slf4j;
      	//微信小程序id
        private final String appId = "xxx";
        //微信小程序密钥
        private final String appSecret = "xxx";
        //模板id
        private final String templateId = "xxx";
        //用户openid
        private final String openUserId = "xxxx";
        //消息内容-温馨提示
        private final String warmTip = "hello,tough gay!";
        //跳转页面地址
        private final String pageUrl = "pages/index/index";
        //获取token接口
        private final String getTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appId + "&secret=" + appSecret;
        //发送消息接口
        private final String sendWxUserMsgUrl = "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=";
     
        public void sendMessage(){
        
            //获取token
            String accessTokenResult = HttpClientUtil.doGet(getTokenUrl);
            String accessToken = JSONObject.parseObject(accessTokenResult).getString("access_token");
            SendMsgToWxUserRequestDTO sendMsgToWxUserRequestDTO = new SendMsgToWxUserRequestDTO();
            sendMsgToWxUserRequestDTO.setAccessToken(accessToken);
            sendMsgToWxUserRequestDTO.setTouser(openUserId);
            sendMsgToWxUserRequestDTO.setTemplate_id(templateId);
            JSONObject key = new JSONObject();
            //温馨提醒
            JSONObject thing6OfValue = new JSONObject();
            thing6OfValue.put("value",warmTip);
            key.put("thing6",thing6OfValue);
            //当前时间
            JSONObject time2 = new JSONObject();
            time2.put("value", DateUtil.dateToString(new Date(),DateUtil.DATETIME_FORMATTER));
            key.put("time2",time2);
            sendMsgToWxUserRequestDTO.setData(key);
            sendMsgToWxUserRequestDTO.setPage(pageUrl);
            String sendMessageUrl = sendWxUserMsgUrl + accessToken;
            log.info("发送消息参数:{}",JSONObject.toJSONString(sendMsgToWxUserRequestDTO));
            String s = HttpClientUtil.doPost(sendMessageUrl, JSONObject.toJSONString(sendMsgToWxUserRequestDTO));
            log.info("发送消息参数,返回值:{}",s);
        }

`SendMsgToWxUserRequestDTO`类：

import com.alibaba.fastjson.JSONObject;
    import lombok.Getter;
    import lombok.Setter;
    
    @Getter
    @Setter
    public class SendMsgToWxUserRequestDTO {
        
        /**
         * token
         */
        private String accessToken;
        /**
         * 接收方openId
         */
        private String touser;
    
    
        private String template_id;
    
        private String page;
    
        /**
         * 小程序模板数据
         */
        private Object data;
    
        private String miniprogram_state;
    }

**（2）发送消息效果：**

![在这里插入图片描述][3e876f3d4b1642be8385ca9f23b9c2da.png]

#### 3.2.1 步骤分解： ####

**（1）调用获取token接口：**

接口：

> `GET`： https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=APP\_ID&secret=APP\_SECRET

请求参数：

<table> 
 <thead> 
  <tr> 
   <th>appid</th> 
   <th>secret</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>小程序id</td> 
   <td>小程序密钥</td> 
  </tr> 
 </tbody> 
</table>

参数说明：

`appid`和`secret`两个的值，可以在微信小程序后台找到。![在这里插入图片描述][ab18799b0b7a4d81a4cad775c2607163.png]

**返回值：**

<table> 
 <thead> 
  <tr> 
   <th>access_token</th> 
   <th>expires_in</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>token值</td> 
   <td>有效时间</td> 
  </tr> 
 </tbody> 
</table>

**（2）调用发送消息接口：**

接口：

> `POST` : https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access\_token=TOKEN

请求参数：

<table> 
 <thead> 
  <tr> 
   <th>accessToken</th> 
   <th>touser</th> 
   <th>template_id</th> 
   <th>page</th> 
   <th>data</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>token</code></td> 
   <td>消息接收人</td> 
   <td>消息模板<code>id</code></td> 
   <td>点击消息详情跳转页面</td> 
   <td>消息内容</td> 
  </tr> 
 </tbody> 
</table>

参数说明：

`token`: 通过`步骤1`获取

`toUser：`是微信用户的`openId`，在微信小程序登陆获取用户信息时可以拿到。

`page：`是点击消息`进入小程序查看`后跳转的页面。

![在这里插入图片描述][a1423f9da64249969eef3e0e23892801.png]  
`data：`是消息模板中的内容。需要注意消息模板中的内容都是以`key`和`value`的形式进行赋值并且展示的，拿下面的一个`工作通知`模板做例子：  
![在这里插入图片描述][9f33afe3806540889651922bd06c800d.png]  
我们可以看到该消息模板中的消息内容只有两个：`温馨提示`和`时间`，分别对应的`key`是`thing6`和`time2`。

切记，`key`一定要保持和模板中的一致！！！

### 3.3 可能遇到的问题 ###

#### 3.3.1 参数不合法： ####

**错误内容：**

{
        "errcode":47003,"errmsg":"argument invalid! data.thing6.value invalid rid: 63904a7c-774dbdca-33bce62d"}

**原因：**

（1）消息模板中的值为空。凡是在消息模板中展示的字段都是必填的。  
（2）代码中的`key`和目标中的不对应。  
（3）`key`对应的`value`内容过长。

## 4.实际应用 ##

通过上述介绍，我想大家对`微信小程序`发送`模板消息`有两个大概的认识。  
我们知道用户同意`订阅消息`后，服务器端只能发`一条`消息给用户，后面如果想再次发送，还需要去询问用户是否订阅。那么如果我们想持续的给用户发消息呢？我们该如何应对这样的场景呢？

### 4.1 “总是保持以上选择” ###

在询问用户是否同意接收消息时，下方有个`总是保持以上选择`，如果用户`勾选了`，并点击`确定`，那么后面如果再次询问用户是否同意接收消息时，就不会弹出`订阅消息界面`。  
![在这里插入图片描述][ad447a2be6c94d63aed5e56b202d70ed.png_pic_center]

我们该如何判断用户`勾选了保持以上选择`呢?

可以通过微信小程序的`wx.getSetting({})`方法。这个方法会在`勾选了保持以上选择`后，会打印出模板id。所以我们需要在`订阅界面`成功回调方法中，判断下`setting`中是否包含模板id。  
![在这里插入图片描述][a9c1423fc7e74780b54ab3c9f20acd3e.png]

### 4.2 实现思路 ###

*  在后台数据库中给微信用户添加一个`字段:check_flag`表示，表示是否勾选 `总是保持以上选择`，`true:勾选了`，`false:未勾选`。
 *  在`wx.requestSubscribeMessage()`成功回调方法中调用`wx.setting()`中判断用户是否勾选了`总是保持以上选择`。
 *  如果是，修改`check_flag=true`。
 *  在`微信小程序`中必点击的地方，添加调用`wx.requestSubscribeMessage()`方法。
 *  如果`check_flag`为`true`时调用`wx.requestSubscribeMessage()`。

然后就可以实现用户在登陆界面点击一次发送多条消息给用户。如果用户不想再次接收消息。可以在我小程序右上角三个点`设置`中修改即可。

### 4.3 代码： ###

//在用户必点的地方，调用订阅消息方法
    clickSubscribeMessage(){
        
       let flag = wx.getStorageSync('checkFlag');
       console.log(false);
       //订阅消息
       if(flag == 1){
        
         let workTaskTemplateId = app.globalData.workTaskTemplateId;
         wx.requestSubscribeMessage({
        
           tmplIds: [workTaskTemplateId],
           success(res){
        
             console.log(res);
           },
           fail(res){
        
             console.log(res);
           }
         })
       }
     }
    ...
    //订阅消息
      subScriptionMessage(){
        
        var that = this;
        //模板id
        let workTaskTemplateId = 'xxx';
        wx.requestSubscribeMessage({
        
          tmplIds: [workTaskTemplateId],
          success (res) {
         
            if(JSON.stringify(res).indexOf("reject") != -1){
        
              console.log("拒绝")
            } 
            if(JSON.stringify(res).indexOf("accept") != -1){
        
              console.log("接受")
              wx.getSetting({
        
                withSubscriptions: true,
                success (res) {
        
                  console.log(res.subscriptionsSetting)
                  if(JSON.stringify(res.subscriptionsSetting).indexOf(workTaskTemplateId) != -1){
        
                    console.log("用户选择了“保持以上选择”")
                    that.checkFlag();
                  }
                }
              })
            } 
          },
          fail(res){
        
            console.log(res);
          }
        })
      },
     ...
     //请求后台接口，修改check_flag 
     checkFlag(){
        
     	//请求后台修改check_flag 字段为true
        wx.request({
        
          url: 'xxxx',
          ...
          success:function(res){
        
            //如果修改成功将check_status字段放到storage中
            wx.setStorageSync("checkFlag",true)
          },
          fail:function(res){
        },
        })
     }

**如果大家有更好的方法请留言。上面截图例子来自于我做的一个微信小程序`TaskPlan`。链接如下，欢迎来参观：**

[☞ ☞ ☞ 人总会改变的，那为什么不往好处变呢？—— TaskPlan ][_ _ _ TaskPlan]

[c7f026f21c1d43c292f14746629318ed.png_pic_center]: https://img-blog.csdnimg.cn/c7f026f21c1d43c292f14746629318ed.png#pic_center
[Link 1]: https://mp.weixin.qq.com/wxamp/index/index?lang=zh_CN&token=1227674317
[43e179d72eb6407189bd58b4e8fff61f.png]: https://img-blog.csdnimg.cn/43e179d72eb6407189bd58b4e8fff61f.png
[41df7951de234bcab4a02b8b3a2615f7.png]: https://img-blog.csdnimg.cn/41df7951de234bcab4a02b8b3a2615f7.png
[36725af5e814479fab74bead422c9fff.png]: https://img-blog.csdnimg.cn/36725af5e814479fab74bead422c9fff.png
[7dc2728b49ef469da13d7e9d6f867089.png]: https://img-blog.csdnimg.cn/7dc2728b49ef469da13d7e9d6f867089.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html
[b40a86024de84e388261d3c624bfdda6.jpeg_pic_center]: https://img-blog.csdnimg.cn/b40a86024de84e388261d3c624bfdda6.jpeg#pic_center
[3e876f3d4b1642be8385ca9f23b9c2da.png]: https://img-blog.csdnimg.cn/3e876f3d4b1642be8385ca9f23b9c2da.png
[ab18799b0b7a4d81a4cad775c2607163.png]: https://img-blog.csdnimg.cn/ab18799b0b7a4d81a4cad775c2607163.png
[a1423f9da64249969eef3e0e23892801.png]: https://img-blog.csdnimg.cn/a1423f9da64249969eef3e0e23892801.png
[9f33afe3806540889651922bd06c800d.png]: https://img-blog.csdnimg.cn/9f33afe3806540889651922bd06c800d.png
[ad447a2be6c94d63aed5e56b202d70ed.png_pic_center]: https://img-blog.csdnimg.cn/ad447a2be6c94d63aed5e56b202d70ed.png#pic_center
[a9c1423fc7e74780b54ab3c9f20acd3e.png]: https://img-blog.csdnimg.cn/a9c1423fc7e74780b54ab3c9f20acd3e.png
[_ _ _ TaskPlan]: https://blog.csdn.net/qq_42785250/article/details/123017105?spm=1001.2014.3001.5502