微信公众号H5订阅消息开发 uniapp订阅消息

古城微笑少年丶 2022-12-20 08:54 291阅读 0赞

简单说一下流程：

在页面带参数跳转到 https://mp.weixin.qq.com/mp/subscribemsg ，然后用户授权确认或者取消以后，会返回参数里面 redirect\_url 的地址，并且带上openid 等相应参数，在前端的页面判断链接里面携带了相关参数后就告诉后端，用户订阅消息的结果，最后由后端触发订阅消息的发送，后端调用 https://api.weixin.qq.com/cgi-bin/message/template/subscribe?access\_token=ACCESS\_TOKEN 去发送订阅消息。

下面看看代码：

1.让用户授权订阅消息：

2.在页面接收用户授权订阅消息的回调信息

onLoad: function(options) {
    		const { openid, action } = options;
    		if (action == 'confirm') {
    			const { class_id } = JSON.parse(uni.getStorageSync('courseInfo') || '{}');
    
                //subscribe() 是封装的接口请求，用户告诉后端授权结果
    			subscribe({ class_id: class_id }).then(res => {
    				if (res.data.code == 0) {
    					uni.navigateTo({
    						url: '/pages/classRoom/courseList/courseList?id=' + class_id
    					});
    				} else {
    					uni.showToast({
    						title: res.data.msg,
    						icon: 'none'
    					});
    				}
    			});
    		}
    }

下面看看官方文档的介绍

公众号或网页使用一次性订阅消息流程如下：

**第一步：需要用户同意授权，获取一次给用户推送一条订阅模板消息的机会**

在确保微信公众帐号拥有订阅消息授权的权限的前提下（已认证的公众号即有权限，可登录公众平台在接口权限列表处查看），引导用户在微信客户端打开如下链接：

> https://mp.weixin.qq.com/mp/subscribemsg?action=get\_confirm&appid=wxaba38c7f163da69b&scene=1000&template\_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect\_url=http%3a%2f%2fsupport.qq.com&reserved=test\#wechat\_redirect

**参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>是</td> 
   <td>直接填get_confirm即可</td> 
  </tr> 
  <tr> 
   <td>appid</td> 
   <td>是</td> 
   <td>公众号的唯一标识</td> 
  </tr> 
  <tr> 
   <td>scene</td> 
   <td>是</td> 
   <td>重定向后会带上scene参数，开发者可以填0-10000的整形值，用来标识订阅场景值</td> 
  </tr> 
  <tr> 
   <td>template_id</td> 
   <td>是</td> 
   <td>订阅消息模板ID，登录公众平台后台，在接口权限列表处可查看订阅模板ID</td> 
  </tr> 
  <tr> 
   <td>redirect_url</td> 
   <td>是</td> 
   <td>授权后重定向的回调地址，请使用UrlEncode对链接进行处理。 注：要求redirect_url的域名要跟登记的业务域名一致，且业务域名不能带路径。 业务域名需登录公众号，在设置-公众号设置-功能设置里面对业务域名设置。</td> 
  </tr> 
  <tr> 
   <td>reserved</td> 
   <td>否</td> 
   <td>用于保持请求和回调的状态，授权请后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验，开发者可以填写a-zA-Z0-9的参数值，最多128字节，要求做urlencode</td> 
  </tr> 
  <tr> 
   <td>#wechat_redirect</td> 
   <td>是</td> 
   <td>无论直接打开还是做页面302重定向时，必须带此参数</td> 
  </tr> 
 </tbody> 
</table>

**用户同意或取消授权后会返回相关信息**

如果用户点击同意或取消授权，页面将跳转至：

> redirect\_url/?openid=OPENID&template\_id=TEMPLATE\_ID&action=ACTION&scene=SCENE

**参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>openid</td> 
   <td>用户唯一标识，只在用户确认授权时才会带上</td> 
  </tr> 
  <tr> 
   <td>template_id</td> 
   <td>订阅消息模板ID</td> 
  </tr> 
  <tr> 
   <td>action</td> 
   <td>用户点击动作，"confirm"代表用户确认授权，"cancel"代表用户取消授权</td> 
  </tr> 
  <tr> 
   <td>scene</td> 
   <td>订阅场景值</td> 
  </tr> 
  <tr> 
   <td>reserved</td> 
   <td>请求带入原样返回</td> 
  </tr> 
 </tbody> 
</table>

**第二步：通过API推送订阅模板消息给到授权微信用户**

**接口请求说明**

http请求方式: post

> https://api.weixin.qq.com/cgi-bin/message/template/subscribe?access\_token=ACCESS\_TOKEN

**post数据示例**

{
        "touser":"OPENID",
        "template_id":"TEMPLATE_ID",
        "url":"URL",
        "miniprogram":{
        "appid":"xiaochengxuappid12345",
        "pagepath":"index?foo=bar"    
    },
        "scene":"SCENE",
        "title":"TITLE",
        "data":{
        "content":{
        "value":"VALUE",
        "color":"COLOR"
    }
    }
    }

**参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>是否必须</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>touser</td> 
   <td>是</td> 
   <td>填接收消息的用户openid</td> 
  </tr> 
  <tr> 
   <td>template_id</td> 
   <td>是</td> 
   <td>订阅消息模板ID</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>否</td> 
   <td>点击消息跳转的链接，需要有ICP备案</td> 
  </tr> 
  <tr> 
   <td>miniprogram</td> 
   <td>否</td> 
   <td>跳小程序所需数据，不需跳小程序可不用传该数据</td> 
  </tr> 
  <tr> 
   <td>appid</td> 
   <td>是</td> 
   <td>所需跳转到的小程序appid（该小程序appid必须与发模板消息的公众号是绑定关联关系，并且小程序要求是已发布的）</td> 
  </tr> 
  <tr> 
   <td>pagepath</td> 
   <td>是</td> 
   <td>所需跳转到小程序的具体页面路径，支持带参数,（示例index?foo=bar）</td> 
  </tr> 
  <tr> 
   <td>scene</td> 
   <td>是</td> 
   <td>订阅场景值</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>是</td> 
   <td>消息标题，15字以内</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>是</td> 
   <td>消息正文，value为消息内容文本（200字以内），没有固定格式，可用\n换行，color为整段消息内容的字体颜色（目前仅支持整段消息为一种颜色）</td> 
  </tr> 
 </tbody> 
</table>

注：url和miniprogram都是非必填字段，若都不传则模板无跳转；若都传，会优先跳转至小程序。开发者可根据实际需要选择其中一种跳转方式即可。当用户的微信客户端版本不支持跳小程序时，将会跳转至url。

**返回说明**

在调用接口后，会返回JSON数据包。正常时的返回JSON数据包示例：

{
    "errcode":0,
    "errmsg":"ok"
    }