点击观看大咖分享
消息能力是小程序能力中的重要组成部分，微信官方提供了订阅消息能力，以便实现开发者实现服务的闭环和更优的体验。可以支持在用户自主订阅后，推送消息到用户端（服务通知），用户点击查看详情可跳转至小程序的页面，实现服务的闭环，提高活跃度和用户粘性。
本期腾讯云大学大咖分享邀请腾讯云高级前端工程师 赵兵，将会演示如何使用云开发快速为小程序加入订阅消息能力，在实战环节会带领大家搭建一个具备用户订阅、消息去重、定时发送、用户退订等订阅消息管理能力的开课提醒小程序。
本次分享内容：
1、功能解析 2、开发 3、实战
1. 功能解析
本次实战中开课提醒小程序功能具体实现的是：用户订阅开课提醒、课程开始前自动发送订阅消息通知用户、用户可退订开课提醒。
2. 开发
“小程序·云开发”由微信团队和腾讯云联合打造的“应用服务中台”，秉承高效、易用、安全、低成本的服务理念，整合了微信公众平台和腾讯云的核心技术，提供云数据库、云存储、云函数、日志和监控等开发运维能力。通过“小程序·云开发”，开发者可无缝安全调用小程序的开放服务，提升开发效率，快速试错和落地产品。
以前开发小程序后端需要购买服务器、搭建数据库、存储等一系列工作，而2019年了，可以利用云开发完成一系列工作，开发员只需要关注自己的业务逻辑，便可以实现稳定高效的后端开发。
微信订阅消息能力，需要用户授权，可以帮助开发者实现服务的闭环和更优的体验。微信官方为提升小程序模板消息能力的使用体验，对模板消息的下发条件进行了调整。原有的小程序模板消息接口于 2020 年 1 月 10 日下线，届时将无法使用旧的小程序模板消息接口发送模板消息，取而代之的是新的一次性订阅消息和长期订阅消息。
下图是微信小程序开放服务端的能力，也就是开发者可以从小程序中操作的内容。
在以前调用小程序开放能力的流程复杂，而现在只需要利用云调用，便可简化流程，当然这两种方式现在都是可以用的。
微信目前提供了14类API，一共有60多种。开发者可以调用这些进行小程序开发。
如果是传统模式，具体流程如下图所示，较为复杂。
如果是云调用，那么流程如下图所示，简单快捷。小程序·云开发最近支持了通过云调用免 access_token 发送订阅消息，还新增支持了在定时触发器中实现云调用，这些能力可以帮助开发者轻松玩转小程序订阅消息。
以订阅消息为具体的例子，左边是配置需要的开放能力的权限，右边是函数调用。
可以看出云开发相比传统开发更有优势。
3. 实战
3.1 环境准备
- 注册小程序账号
- 开通云开发服务
3.2 获取订阅消息模板 ID
在微信小程序管理后台中，新增一个订阅消息的模板，这里我们新增了一个开课提醒的模板。
3.3 引导用户订阅
微信小程序提供了wx.requestSubscribeMessage 接口来发起申请订阅权限界面。
在 "订阅开课提醒" 的按钮上绑定 tap 事件，事件处理器我们这里用的 onSubscribe。
index.wxml
代码语言：txt复制<button
class="btn"
data-item="{{ item }}"
bindtap="onSubscribe"
hover-class="btn-hover"
>
订阅开课提醒
</button>在onSubscribe 函数内，我们会调用微信 APIwx.requestSubscribeMessage 申请发送订阅消息权限，当用户在弹窗同意订阅之后，我们会收到success 回调，将订阅的课程信息调用云函数subscribe 存入云开发数据库，云函数 subscribe 的实现在下文会讲。
index.js
代码语言：txt复制onSubscribe: function(e) {
// 获取课程信息
const item = e.currentTarget.dataset.item;
// 调用微信 API 申请发送订阅消息
wx.requestSubscribeMessage({
// 传入订阅消息的模板id，模板 id 可在小程序管理后台申请
tmplIds: [lessonTmplId],
success(res) {
// 申请订阅成功
if (res.errMsg === 'requestSubscribeMessage:ok') {
// 这里将订阅的课程信息调用云函数存入云开发数据
wx.cloud
.callFunction({
name: 'subscribe',
data: {
data: item,
templateId: lessonTmplId,
},
})
.then(() => {
wx.showToast({
title: '订阅成功',
icon: 'success',
duration: 2000,
});
})
.catch(() => {
wx.showToast({
title: '订阅失败',
icon: 'success',
duration: 2000,
});
});
}
},
});
},3.4 将订阅消息存入云开发数据库
接下来我们创建一个云函数subscribe ，这个云函数的作用是将用户的订阅信息存入云开发数据库的集合messages 中，等待将来需要通知用户时进行调用。
创建一个subscribe 云函数，在云函数中我们将小程序端发送过来的课程订阅信息，存储在云开发数据库集合中，开发完成后，在微信开发者工具中右键上传并部署云函数。
在微信开发者工具的云开发面板中创建数据库集合messages。
cloudfunctions/subscribe/index.js
代码语言：txt复制const cloud = require('wx-server-sdk');
cloud.init();
const db = cloud.database();
exports.main = async (event, context) => {
try {
const {OPENID} = cloud.getWXContext();
// 在云开发数据库中存储用户订阅的课程
const result = await db.collection('messages').add({
data: {
touser: OPENID, // 订阅者的openid
page: 'index', // 订阅消息卡片点击后会打开小程序的哪个页面
data: event.data, // 订阅消息的数据
templateId: event.templateId, // 订阅消息模板ID
done: false, // 消息发送状态设置为 false
},
});
return result;
} catch (err) {
console.log(err);
return err;
}
};3.5 利用定时触发器来定期发送订阅消息
接下来我们需要实现一个定时执行的云函数send，来检查数据库中是否有需要发送给用户的订阅消息。如果有需要发送的订阅消息，会通过云调用cloud.openapi.subscribeMessage.send 将订阅消息发送给用户。
创建一个名叫send 的云函数，首先要配置云函数，在config.json 的permissions 中新增 subscribeMessage.send的云调用权限，然后新增一个sendMessagerTimer 的定时触发器，定时触发器的语法和linux 的crontab 类似，比如，我们配置的"0 * * * * * *" 代表每分钟执行一次云函数。
cloudfunctions/send/config.json
代码语言：txt复制{
"permissions": {
"openapi": ["subscribeMessage.send"]
},
"triggers": [
{
"name": "sendMessagerTimer",
"type": "timer",
"config": "0 * * * * * *"
}
]
}接下来是实现发送订阅消息的云函数，这个云函数会从云开发数据库集合messages中查询等待发送的消息列表，检查数据库中是否有需要发送给用户的订阅消息，发送条件可以根据自己的业务实现，比如开课提醒可以根据课程开课日期来检查是否需要发送订阅消息，在我们下面的代码示例里做了简化，筛选条件只检查了状态为未发送。
查询到待发送的消息列表之后，我们会循环消息列表，依次发送每条订阅消息，发送成功后将数据库中消息的状态改为已发送。
cloudfunctions/send/index.js
代码语言：txt复制const cloud = require('wx-server-sdk');
exports.main = async (event, context) => {
cloud.init();
const db = cloud.database();
try {
// 从云开发数据库中查询等待发送的消息列表
const messages = await db
.collection('messages')
// 查询条件这里做了简化，只查找了状态为未发送的消息
// 在真正的生产环境，可以根据开课日期等条件筛选应该发送哪些消息
.where({
done: false,
})
.get();
// 循环消息列表
const sendPromises = messages.data.map(async message => {
try {
// 发送订阅消息
await cloud.openapi.subscribeMessage.send({
touser: message.touser,
page: message.page,
data: message.data,
templateId: message.templateId,
});
// 发送成功后将消息的状态改为已发送
return db
.collection('messages')
.doc(message._id)
.update({
data: {
done: true,
},
});
} catch (e) {
return e;
}
});
returnPromise.all(sendPromises);
} catch (err) {
console.log(err);
return err;
}
};3.6 最终效果
实战源码：https://github.com/binggg/tcb-subscribe-demo
问卷
为了给广大开发者提供最实用、最热门前沿、最干货的视频教程，请让我们听到你的需要，感谢您的时间！点击填写 问卷
关注“腾讯云大学”公众号，回复【加群】进入交流群腾讯云大学是腾讯云旗下面向云生态用户的一站式学习成长平台。腾讯云大学大咖分享邀请行业技术大咖，为你提供免费、专业、行业最新技术动态分享。
