小程序 · 雲開發實戰：搭建小程序訂閱消息系統

時間 2020-01-16

標籤程序開發實戰搭建訂閱消息系統简体版

原文原文鏈接

消息能力是小程序能力中的重要組成部分，微信官方提供了訂閱消息能力，以便實現開發者實現服務的閉環和更優的體驗。能夠支持在用戶自主訂閱後，推送消息到用戶端（服務通知），用戶點擊查看詳情可跳轉至小程序的頁面，實現服務的閉環，提升活躍度和用戶粘性html

本次課程會演示如何使用雲開發快速爲小程序加入訂閱消息能力，在實戰環節會帶領你們搭建一個具有用戶訂閱、消息去重、定時發送、用戶退訂等訂閱消息管理能力的開課提醒小程序，學習完成後同窗們將掌握：前端

雲調用調用微信開放能力相比傳統模式有哪些優勢
如何基於雲開發快速接入小程序訂閱消息
如何結合雲開發的雲函數、定時觸發器、數據庫和雲調用開發完整的功能

基礎知識點

小程序·雲開發介紹

「小程序·雲開發」由微信團隊和騰訊雲聯合打造的「應用服務中臺」，秉承高效、易用、安全、低成本的服務理念，整合了微信公衆平臺和騰訊雲的核心技術，提供雲數據庫、雲存儲、雲函數、日誌和監控等開發運維能力。經過「小程序·雲開發」，開發者可無縫安全調用小程序的開放服務，提高開發效率，快速試錯和落地產品。數據庫

訂閱消息介紹

微信官方提供了訂閱消息能力，以便實現開發者實現服務的閉環和更優的體驗。能夠支持在用戶自主訂閱後，推送消息到用戶端（服務通知），用戶點擊查看詳情可跳轉至小程序的頁面，實現服務的閉環，提升活躍度和用戶粘性json

準備工做

準備小程序帳號和開發工具

舒適提示：本次的實戰的案例裏用到了 「訂閱課程開課提醒」 這個訂閱消息模板，須要小程序服務類目裏包含 「教育 > 在線教育」，能夠在服務類目中加入此類目。後續生產環境中可根據本身的場景選擇合適的服務類目和訂閱消息模板。

已經申請微信小程序（在服務類目中加入「教育 > 在線教育」），獲取小程序 AppID
下載 開發版 微信開發者工具( Nightly Build (Windows 64、Windows 32、macOS))
在微信公共平臺的 "訂閱消息"中申請一個開課提醒訂閱消息模板，得到消息模板ID，字段的內容和順序須要按下圖所示：

下載並導入初始項目的源代碼

這次活動的項目源代碼壓縮包可關注公衆號 [微信極客WeGeek] 回覆"訂閱消息"得到。解壓源代碼壓縮包後，能夠看到「第六期課程資料」⽂件夾下有兩個⽂件夾，分別爲 init（這次活動的實戰初始代碼）和 intact（完成後的完整代碼）。小程序

點擊開發者工具工具欄項目-導入項目，項目名稱能夠任意填寫好比「小程序訂閱消息系統」，項目路徑爲以前解壓出來的「第六期課程資料」文件夾裏面的 init 文件夾，AppID 使用以前準備好的小程序 AppID。微信小程序

配置項目api

打開雲開發控制檯，在數據庫管理頁新建⼀個 messages 集合。
修改 pages/index/index 裏面的 lessonTmplId 變量的值爲準備好的消息模板ID

瞭解本次實戰的總體流程圖

搭建步驟

小程序前端實現訂閱和退訂交互

打開 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,
        });
      });

實現完這兩個方法以後，在真機上面點擊訂閱的時候，會首先發起訂閱消息的受權，成功以後會請求咱們的 subscribe 雲函數，在退訂時會請求咱們的 unsubscribe 雲函數，微信開發

實現訂閱消息存儲

打開 cloudfunctions/subscribe/index.js, 在「@todo 將消息內容存儲在 messages 集合，並作去重」下方粘貼以下代碼：

// 防止重複存儲
    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;

在這裏咱們實現了用戶訂閱信息存儲在 messages 集合，而且作到了防止同一門課程重複訂閱的問題。

實現訂閱消息的定時發送

打開 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 * * * * * *"
        }
  ]

加入這個配置以後，須要使用前面下載的開發版的開發者工具，部署一下函數，將定時觸發器發佈出去。根據咱們的配置，每分鐘都運行一次 send 函數，在 send 函數中，咱們會將消息集合中知足發送條件的訂閱消息經過雲調用推送出去。

實現訂閱消息的退訂

打開 cloudfunctions/unsubscribe/index.js, 在 "@todo 刪除訂閱的消息" 下方粘貼如下代碼

// 刪除訂閱的消息
    const result = await db
      .collection('messages')
      .where({
        touser: OPENID,
        templateId: event.templateId,
        id: event.id,
      })
      .remove();
    return result;

實現了對指定用戶對某個課程的訂閱，定時觸發時不會再給該用戶發送消息，實現了退訂的功能