小程序·云开发实战直播课是腾讯云云开发与陌陌极客WeGeek联合举办的免费课程。 致力于为陌陌小程序开发者提供云到端的一站式解决方案,降低技术门槛和开发成本,提高开发效率,协助开发者快速构建稳定、优质的陌陌小程序应用。
本次直播课将演示如何利用云开发快速为小程序添加订阅消息能力。 在实战环节,它将带领你构建一个具有订阅消息管理功能的上课提醒小程序。
基础知识点
1 小程序云开发简介
“小程序云开发”是陌陌团队与腾讯云共同打造的“应用服务中间平台”。 它秉承高效、易用、安全、低成本的服务理念,融合了陌陌公共平台和腾讯云的核心技术。 ,提供云数据库、云存储、云功能、日志、监控等开发和维护能力。 通过“小程序云开发”,开发者可以无缝、安全地调用小程序的开放服务,提高开发效率,并快速试错和实现产品。
2订阅新闻介绍
陌陌官方提供了订阅新闻的能力,方便开发者实现服务闭环,获得更好的体验。可以支持用户自主订阅后向用户端推送消息(服务通知),用户可以点击查看详情跳转小程序页面,实现服务闭环,提高活跃度和用户粘性
计划工作
1 规划小程序账号和开发工具
温馨提示:本实际案例中使用的是订阅消息模板“订阅课程开始提醒”。 小程序的服务类别中需要包含“教育>在线教育”,可以添加到服务类别中。 在后续的生产环境中小程序平台如何搭建网站,您可以根据自己的场景选择合适的服务类别和订阅消息模板。
1.已申请陌陌小程序(服务类别添加“教育>在线教育”)获取小程序AppID
2.下载Momo开发者工具开发版(NightlyBuild(Windows64, Windows32, macOS))
3、在陌陌公众平台“订阅新闻”中申请上课提醒订阅消息模板,并获取消息模板ID。 数组的内容和顺序必须如右图所示:
2 下载并导出初始项目的源码
本课程的项目源码压缩包可通过公众号回复“订阅留言”获取。 解压源码包后,可以看到“第六期课程资料”文件夹下有两个文件夹,分别是init(本次活动的实际初始代码)和intact(完成后的完整代码)。
点击开发者工具工具栏项——导出项目,项目名称可以任意填写,比如“小程序订阅消息系统”,项目路径为之前解压的“第六课资料”文件夹上面的init文件夹,AppID使用前 预期的小程序 AppID。
3个配置项
1. 打开云开发控制台,在数据库管理页面新建消息集合。
2.将pages/index/index上面的lessonTmplId变量的值修改为想要的消息模板ID
4 了解本次实战整体流程图
构建步骤
1 小程序后端实现订阅和退订交互
打开miniprogram/pages/index/index.js小程序平台如何搭建网站,在“@todo实现订阅逻辑”下粘贴以下代码:
// 获取课程信息
const item = e.currentTarget.dataset.item;
// 调用微信 API 申请发送订阅消息
wx.requestSubscribeMessage({
// 传入订阅消息的模板id,模板 id 可在小程序管理后台申请
tmplIds: [lessonTmplId],
success(res) {
// 申请订阅成功
if (res.errMsg === 'requestSubscribeMessage:ok') {
// 这里将订阅的课程信息调用云函数存入db
wx.cloud
.callFunction({
name: 'subscribe',
data: {
...item,
data: {
thing2: {value: item.title},
date5: {value: item.startTimeString},
phrase4: {value: item.teacher},
thing3: {value: item.description},
},
templateId: lessonTmplId,
},
})
.then(() => {
wx.showToast({
title: '订阅成功',
icon: 'success',
duration: 2000,
});
})
.catch(() => {
wx.showToast({
title: '订阅失败',
icon: 'success',
duration: 2000,
});
});
}
将以下代码粘贴到“@todo 实现取消订阅逻辑”下:
// 获取课程信息
const item = e.currentTarget.dataset.item;
// 这里将订阅的课程信息调用云函数存入db
wx.cloud
.callFunction({
name: 'unsubscribe',
data: {
id: item.id,
templateId: lessonTmplId,
},
})
.then(() => {
wx.showToast({
title: '取消订阅成功',
icon: 'success',
duration: 2000,
});
})
.catch(() => {
wx.showToast({
title: '取消订阅失败',
icon: 'success',
duration: 2000,
});
});
实现这两个方法后,当你在真实设备面前点击订阅时,会首先发起订阅消息的授权。 成功后会请求我们的订阅云函数,取消订阅时会请求我们的取消订阅云函数。
2 实现订阅消息存储
打开 cloudfunctions/subscribe/index.js,并将以下代码粘贴到“@todo 将消息内容存储在消息集合中并对其进行重复数据删除”下:
// 防止重复存储
let message = await db
.collection('messages')
.where({
id: event.id,
touser: OPENID,
templateId: event.templateId,
})
.get();
if (message.data.length) {
return message;
}
// 在云开发数据库中存储用户订阅的信息
const result = await db.collection('messages').add({
data: {
...event,
touser: OPENID,
page: 'index',
done: false, // 消息发送状态设置为 false
},
});
return result;
这里我们已经实现了用户订阅信息存储在消息集合中,但是我们避免了重复订阅同一课程的问题。
3 实现订阅消息的定时发送
打开cloudfunctions/send/index.js,在“@todo实现定时发送订阅消息的逻辑”下粘贴以下代码:
try {
// 从云开数据库中查询等待发送的消息列表
const messages = await db
.collection('messages')
.where({
done: false,
// 课程开始时间前半小时之内
startTime: _.lte(new Date().getTime() + 30 * 60 * 1000),
})
.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;
}
});
return Promise.all(sendPromises);
} catch (err) {
console.log(err);
return err;
}
打开 cloudfunctions/send/config.json 并添加以下配置:
"triggers": [
{
"name": "sendMessagerTimer",
"type": "timer",
"config": "0 * * * * * *"
}
]
添加此配置后,需要使用上面下载的开发者工具的开发版来部署功能并发布定时触发器。 根据我们的配置,发送功能每分钟运行一次。 在发送函数中,我们会通过云调用的方式推送消息集合中符合发送条件的订阅消息。
4 实现订阅消息的取消订阅
打开 cloudfunctions/unsubscribe/index.js,并将以下代码粘贴到“@todo 删除订阅的消息”下:
// 删除订阅的消息
const result = await db
.collection('messages')
.where({
touser: OPENID,
templateId: event.templateId,
id: event.id,
})
.remove();
return result;
实现了指定用户订阅某个课程,并且定时触发时不会向用户发送消息,并实现取消订阅的功能。
参与直播
搭建过程大致是这样的,但是还有一些细节文中没有提到。 关于项目的具体实操,我们将于11月28日(周日)20:00进行直播演练。 欢迎您扫描二维码进入陌陌群观看并参与交流。
推荐阅读:
发表评论