免費直播課預告：搭建小程式訂閱消息系統

小程式·雲開發介紹

小程式·雲開發實戰直播課是由騰訊雲雲開發和微信極客WeGeek 聯合舉辦的免費課程，旨在為微信小程式開發者提供雲到端的一站式解決方案，降低技術門檻、減少研發成本、提升開發效率，以協助開發者快速搭建穩定高品質的微信小程式應用。

本次直播課将會示範如何使用雲開發快速為小程式加入訂閱消息能力，在實戰環節會帶領大家搭建一個具備訂閱消息管理能力的開課提醒小程式。

基礎知識點

1、小程式·雲開發介紹

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

2、訂閱消息介紹

微信官方提供了訂閱消息能力，以便實作開發者實作服務的閉環和更優的體驗。可以支援在使用者自主訂閱後，推送消息到使用者端（服務通知），使用者點選檢視詳情可跳轉至小程式的頁面，實作服務的閉環，提高活躍度和使用者粘性

準備工作

1、準備小程式賬号和開發工具

溫馨提示：本次的實戰的案例裡用到了“訂閱課程開課提醒”這個訂閱消息模闆，需要小程式服務類目裡包含 “教育 > 線上教育”，可以在服務類目中加入此類目。後續生産環境中可根據自己的場景選擇合适的服務類目和訂閱消息模闆。

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

免費直播課預告：搭建小程式訂閱消息系統

2、下載下傳并導入初始項目的源代碼

此次課程的項目源代碼壓縮包可在公衆号【騰訊雲雲開發】回複"訂閱"獲得。解壓源代碼壓縮包後，可以看到 “第六期課程資料”⽂件夾下有兩個⽂件夾，分别為 init（此次活動的實戰初始代碼）和 intact（完成後的完整代碼）。

點選開發者工具工具欄項目-導入項目，項目名稱可以任意填寫比如“小程式訂閱消息系統”，項目路徑為之前解壓出來的 “第六期課程資料”檔案夾裡面的 init 檔案夾，AppID 使用之前準備好的小程式 AppID。

3、配置項目

打開雲開發控制台，在資料庫管理頁建立⼀個 messages 集合。
修改 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,
        });
      });

實作完這兩個方法之後，在真機上面點選訂閱的時候，會首先發起訂閱消息的授權，成功之後會請求我們的

subscribe

雲函數，在退訂時會請求我們的

unsubscribe

雲函數。

2、實作訂閱消息存儲

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

集合，并且做到了防止同一門課程重複訂閱的問題。

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

加入這個配置之後，需要使用前面下載下傳的開發版的開發者工具，部署一下函數，将定時觸發器釋出出去。根據我們的配置，每分鐘都運作一次 send 函數，在 send 函數中，我們會将消息集合中滿足發送條件的訂閱消息通過雲調用推送出去。

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 進行直播演練，歡迎大家掃碼進微信群觀看，并參與交流。

雲開發（CloudBase）是一款雲端一體化的産品方案，采用 serverless 架構，免環境搭建等運維事務，支援一雲多端，助力快速建構小程式、Web應用、移動應用。

技術文檔：https://www.cloudbase.net/

微信搜尋：騰訊雲雲開發，擷取項目最新進展

免費直播課預告：搭建小程式訂閱消息系統

小程式·雲開發介紹

基礎知識點

準備工作

搭建步驟

參與直播

繼續閱讀

【微信小程式】選擇寶——選擇困難症的拯救者

微信小程式開發規範（初稿）

微信小程式傳值的坑

微信小程式傳值

小程式switchTab傳值

小程式父子元件傳值

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

小程式回傳值

小程式url頁面傳值

微信小程式父子傳值

小程式元件傳值通訊

214情人節，使用微信小程式【信鴿相知】寫情書吧

微信小程式npm如何引用Vant Weapp

簡單封裝一個微信小程式的ajax請求

微信小程式的cover-image 無法覆寫的問題！注意一定是位址的問題之前試了好多次！首先要在cover-view 标簽裡面外層是 map chart，camera 等原始元件

微信小程式前端解密擷取使用者資訊