小程序·云开发实战:搭建小程序订阅消息系统

直接加入直播课程分享群,与讲师零距离沟通。
1
课程PPT
1
课程源码
  • 1
    关注“学习君”微信号 "TcloudM"
  • 2
    向学习君回复口令 “5”
  • 3
    获得课程福利包
学习君微信公众号
“学习君”微信号

讲师简介

赵兵

腾讯云高级前端工程师

腾讯云开发(TCB)团队高级前端工程师,目前负责云开发函数、云调用等方面工作。长期从事前端架构升级、工程提效、性能优化等研发工作。开源项目有 mrn.js、vue-lazy-component、vuex-connector 等,在前端架构、移动端多终端开发、NodeJS 和容器化等方面有丰富的经验。

课程简介

消息能力是小程序能力中的重要组成部分,微信官方提供了订阅消息能力,以便实现开发者实现服务的闭环和更优的体验。可以支持在用户自主订阅后,推送消息到用户端(服务通知),用户点击查看详情可跳转至小程序的页面,实现服务的闭环,提高活跃度和用户粘性

课程讲义

本次课程会演示如何使用云开发快速为小程序加入订阅消息能力,在实战环节会带领大家搭建一个具备用户订阅、消息去重、定时发送、用户退订等订阅消息管理能力的开课提醒小程序,学习完成后同学们将掌握:

  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

<button
  class="btn"
  data-item="{{ item }}"
  bindtap="onSubscribe"
  hover-class="btn-hover"
>
  订阅开课提醒
</button>

在onSubscribe 函数内,我们会调用微信 APIwx.requestSubscribeMessage 申请发送订阅消息权限,当用户在弹窗同意订阅之后,我们会收到success 回调,将订阅的课程信息调用云函数subscribe 存入云开发数据库,云函数 subscribe 的实现在下文会讲。

index.js

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

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

{
  "permissions": {
    "openapi": ["subscribeMessage.send"]
  },
  "triggers": [
    {
      "name": "sendMessagerTimer",
      "type": "timer",
      "config": "0 * * * * * *"
    }
  ]
}

接下来是实现发送订阅消息的云函数,这个云函数会从云开发数据库集合messages中查询等待发送的消息列表,检查数据库中是否有需要发送给用户的订阅消息,发送条件可以根据自己的业务实现,比如开课提醒可以根据课程开课日期来检查是否需要发送订阅消息,在我们下面的代码示例里做了简化,筛选条件只检查了状态为未发送。

查询到待发送的消息列表之后,我们会循环消息列表,依次发送每条订阅消息,发送成功后将数据库中消息的状态改为已发送。

cloudfunctions/send/index.js

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

全部评论
讲师/助教

评论