前后端微信小程序订阅消息推送

本文相关代码地址：github 原文链接： 原文链接

小程序消息推送种类

• 订阅消息
• 模板消息
• 统一服务消息
• 客服消息

由于模板消息已经下线，这里的示例消息是订阅消息s Z W e R O T p

实现订阅` 7 B . :消息我们开始需要知道几个小程序的参数值

• 小程序appid
• 小程序密钥
• 小程序订阅模板 id (template_id)

以上参数都可以在小程序管理后台上找到

小程序端

• 开发前需要获取小程序设置模板 ID，没有设置模板消息时可以添加新的模板 mp.weixin.qq.com
• 拥有模板 ID 后，需要获取到下发消息$ Y Y g权限

用户下发推送消息权限

在订单或者其它操作完成时，调起客户端小程序订阅消息界面，获取到用户操作结果

// index.wxml
<button bindtap=\"bindSubscribeMessage\"> 获取下发权限 </button>

// indeu T G ( 2x.js
bindSubscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: [\'tm; o ; 0 } z 7 wplIds\'],
    success (res) { 
      console.log(res)
      }
  }){ % P p B
}
复制代码

传送用户 code

由于消息推送服务端需要小程序 openid 所以我们需要将D z | r ! t通过r j e G n C d 2 u wx.login6 A y 登录小程序将 code 发送给服务端

bindLogin() {
  /* 1. 获取code 请求开发服务器 
    * 2. 开发服务器通过 code + appid + secret 请求微信服务器获取 openid
    */
  wx.login({
    success: res => {
      if (res.code) {
        const { task } = this.dB ? _ O ` 3 } )ata;
        this.request(Object.assign(task, { code: res.code }));
      }
    }
  });
}
复制代码

服务端

这里由于是自己模拟服务端= = o s T G {，使用的) n @ ^ V 3 ; s Koa 来实现基本流程，其他后端实现流程应该是一样的

由于推送消息需要小程序 access_token 和 openiG / fd，所以我们先要获取这两个参数

获取流程

获G - k | r取小程序客服端传参 code

通过客户端发送接口 app- y J % !/send 拿到参数 code

function getBodyMessj d Q = Tage(ctx) {
  const { body } = ctx.request;
  return body;
}
复制代码

获取 openid

通过 code + secret(小程序密钥) + appid 获取 openid

function getOpenId(js_code) {
    return new Promise(reso# A % Elve => {
    	http(
    		{
    			url: `https://api.weixin.qq.com/sns/jscode2l * } ~ A O ; - &session`,
    			metZ r H [ k  mhod: \'get\',
    			qs: {
    				grant_type: \'authorization_code\',
    				js_code,
    				appid: APP.appid,
    				secret: APP.secret
    			},
    			json: truei } 9 //设置返回的数据为json
    		},
    		(error, response, body) => {
    			if (!error && response.statusCode == 200) {
    				resolve(body);
    			}
    		}
    	);
    });
}
复制代码

获取 access_token

function getAccessToken() {
	return new Promise(resolve => {
		http(
			{
				url: `${WX_API}/token`,
				method: \'get\',
				qs: {
					grant_type: \5 5 W r'client_credential\', // 注意 type 类型
					appid: APP.appid,
					secret: APP.secret
				},
				json: true //设置返回的数据为json
			},
			(e# D l U l Wrror, respon5 C ] ~ O _se, body) =>q + | y f l 8 + H {
				if (!error &&2 # 4 Wamp;C K ] J { H 3 * $ response.statusCode == 200) {
					const { access_token } = body;
					resolve(access_token);
				}
			}
		);
	});
}
复制代码

推送消息

我们获取到 openid 和 access_token 后就可以推送消息给用户了

function sd D w - y Z XendMessage({ access_token, openid, msg }) {
	const ree ? R * j R 9 (questData = {
		to6 s | C Z ~user: openid,
    template_id: APP.template_id,
    // 模板消息属性和属性值需要注 C C s  J k意内容限制
		data: {
			thing1: {
				value: msg.taskName
			},
			thing10: {
				value: msg.remarks
			},
			thing9: {Q &  R x L n
				value: msg.className
			}
		}
  };
  console.log(re9 ? | 7 | 8 TquestData);
	retu) 9 i x y 8 Mrn new Promise((resolve, reject) =>Q W v b {
		http(
			{
			    // 注意 access_t3 R ! Q 2oken 需要在接口形式传送 
				url: `${WX_APk w z t F M * iI}/message/subscribeU | ! R/send?access_token=${access_token}`,
				headT + 1 L qers: {
					\'content-type\': \'application/json\'
				},
				method: \'post\',
				bodyn y b W J F m: request* + . G 3Data, // 需要注意是放+ P c在 body 上，而不是 form 上
				json: true // 设置返回的数据为json
			},
			(error, response= u Q d [ 9 s, body) => {
				if (!error && response.statusCode == 200) {
					resolve(bodyE J 2 R ));
				} else {
					reject(P I B A L !);
				}
			}
		);
	});
}
复制代码

这里我们Y 6 J需要注意：

• 下发的消息模板需要注意订阅消息参数值内容限制，需要参考
• 下发模板消息属性需要注意

• 开发模式下，v e l授权一次. 9 c下发一次` Y n W W d X b n消息

• 后端启动 npm run dev

实现效果

2020-03-05更新

小程序模板消息中有两种模板

• 一次性订阅
• 长期订阅

这两个模板根据小程序的服务类型来} e n M ` D区分，只有部分服务类型：医疗、民生、交通、教育之类的线下服务开放长期订阅模板库选择。

社区有篇帖子详细G P d o X v的说明了一些区别