[填坑手冊]小程式新版訂閱訊息+雲開發實戰與跳坑

前端智酷方程發表於2020-02-26

老版本的訂閱訊息在2020年1月10日就下線了，相信不少人在接入新版本訂閱系統的時候，或多或少會遇到一些問題，這裡智庫君跟大家介紹下新版訂閱的機制和不需要node/後端的情況下 獨立完成功能開發。

一、新版訂閱的機制

其實開發過程不難，但是要理清楚它裡面的機制，智庫君還是花了一些時間的，也踩了不少坑

先來看下官方介紹：

image

  1. 可以設定多個訂閱選項
  2. 感嘆號裡面可以看到詳情
  3. 有個預設不被選中的“總是”選項

這些就是新不同的地方，智庫君在開發的時候也有很多疑問，點了“總是”再點“取消”按鈕會怎樣？部分選擇訂閱會怎樣？下面為大家一一梳理

（1）部分選中

訂閱“部分選中”
比如現在有三個選項 A,B,C，使用者**“部分選中”**返回的情況：
系統返回值
這裡用真機除錯可以看到，有個返回值狀態為“reject”。 如果我們反覆幾點點選同一個訂閱後，這些值是如何計算的呢？

舉例：

訂閱次數累積

從這裡看出，微信系統會自動記錄使用者點選的次數，並且做累加記錄，如果使用者只允許2次傳送，而開發者傳送了3次，最後一次將會被拒絕。

（2）點選“總是保持以上選擇，不再詢問”的情況

點選“總是”後

當使用者點選“總是”之後，同一個型別的訂閱將不再彈出，那如果有多個訂閱模板選項呢？

舉例

訂閱AAA 三個訂閱模板為 X Y Z

訂閱BBB 二個訂閱模板為 Y W

這時候如果“訂閱AAA”按鈕選擇了“總是”，那麼再點選“訂閱BBB”按鈕，將只會彈出一個選項“W”,不會有**“Y”的模板，因為在之前“訂閱AAA”**按鈕中已經包含了。

wx.requestSubscribeMessage({
  tmplIds: ["MECDDOdhbC3SrQmMY5XrfqiIGbMTzpEN8Z7ScXJfcd0", "iSb2NIlNnnO60wlI-8Wx5Pe82jR7TRdwjotSXtM1-ww"],
  success(res) {
    console.log(res);
  }
})
複製程式碼

顯示內容僅一個選項：

彈窗顯示結果
這裡需要注意，“總是”選項是全域性有效，不區分頁面，選中“總是”的 W,X,Y,Z的模板，在全域性任意頁面中再次呼叫，再次呼叫將不再會顯示！
選擇“總是”後返回值
可以看到返回值無提示，使用者是否選中“總是”。

（3）使用者點選“總是”後，獲取狀態

wx.getSetting獲取狀態

wx.getSetting({
  withSubscriptions: true,
  success(res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.subscribeMessage": true
    // }
    console.log(res.subscriptionsSetting)
    // res.subscriptionsSetting = {
    //   SYS_MSG_TYPE_INTERACTIVE: 'accept',
    //   SYS_MSG_TYPE_RANK: 'accept',
    //   zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject',
    //   ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban',
    // }
  }
});
複製程式碼

獲取訂閱狀態返回值

這裡可以呼叫wx.getSetting方法，但是需要注意：如果使用者第一次選“總是”後點選“取消”按鈕或者訂閱模板全部是未選中/reject的，那將獲取不到狀態（這裡可能是BUG，期待官方未來修復）。

（4）使用者點選“總是”後，讓使用者手動修改

前面說到使用者點選“總是”後，系統將不再彈窗，但是我們可以通過**“wx.openSetting”**引導使用者手動修改。

wx.openSetting({
  success(res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})
複製程式碼

呼叫小程式設定
設定訂閱

當然使用者自己也可以修改

使用者自己修改訂閱位置

總結

  • 使用者點選次數系統會自動累加，直接影響後臺傳送通知的次數。
  • 使用者選擇“總是”後，小程式介面不再彈窗，但仍然有回撥/callback。
  • 任意訂閱模板在使用者選中“總是”（包括接受/拒絕2個狀態）後，全域性有效，就算其他訂閱包含“此模板”也不再顯示/彈出
  • 當使用者選擇“總是”中“accept/選中/接受”的狀態後，可以在wx.getSetting查詢到使用者是否選擇“總是”。
  • 當使用者選擇“總是”中“reject/未選中/拒絕”的狀態後，返回值“無感知”（這裡可能是BUG）

二、功能開發

使用微信自帶的雲開發，可以在沒有node/後端開發支援下，完成整個訂閱流程的開發。

（1）微信後臺設定訂閱模板和獲取模板ID

1、開啟小程式後臺，找到訂閱訊息設定

微信後臺訂閱模板設定
2、在公共模板庫找模板或者自己申請新模板，建議能用現成模板用現成的，因為申請週期可能較長，且容易被拒
申請模板
3、選好模板後，點選詳情
模板詳情
4、檢視模板內容和傳送DA他的結構
訂閱模板結構
5、複製模板ID

（2）配置雲函式

配置雲函式路徑
新建雲函式
1、新建getOpenId雲函式，用於獲取使用者的openID

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
複製程式碼

2、新建訂閱推送通知雲函式

// 雲函式入口檔案

const cloud = require('wx-server-sdk')
cloud.init()

//訂閱推送通知
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.subscribeMessage.send({
      touser: event.openid, //接收使用者的openId
      page: 'pages/my/index', //訂閱通知 需要跳轉的頁面
      data: {   //設定通知的內容
        thing1: {
          value: '小程式訂閱填坑'
        },
        thing2: {
          value: '智庫方程式'
        },
        thing3: {
          value: '一起學習，一起進步'
        }
      },
      templateId: '5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac' //模板id
    })
    console.log(result)
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}
複製程式碼

寫完雲函式記得右鍵部署下！！！

（3）小程式程式碼部分

<!------------html ------------->
<button bindtap="getOpenId" type='primary'>獲取openId</button>

<view class="subBtn" catch:tap="sub">訂閱AAA</view>

<view class="subBtn" catch:tap="send">訂閱推送測試</view>

<view class="subBtn" catch:tap="setting">設定“總是”後，跳轉修改</view>
複製程式碼
//JS 部分
//獲取使用者的openid
  getOpenId() {
    wx.cloud.callFunction({
      name: "getOpenId"
    }).then(res => {
      let openid = res.result.openid
      console.log("獲取openid成功", openid)
    }).catch(res => {
      console.log("獲取openid失敗", res)
    })
  },
//傳送模板訊息給指定的openId使用者
  send(openid){
      wx.cloud.callFunction({
        name: "sendSub",
        data: {
          openid: openid
        }
      }).then(res => {
        console.log("傳送通知成功", res)
      }).catch(res => {
        console.log("傳送通知失敗", res)
      });
  },
//訊息訂閱
  sub: function () {
    wx.requestSubscribeMessage({
      tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"],
      success(res) {
        console.log("訂閱授權成功："+res);
      },
      fail(res){
        console.log("訂閱授權失敗：" + res);
      }
    })
  },
//幫助使用者跳轉修改訂閱狀態
  setting:function(){
    wx.openSetting({
      success(res) {
        console.log(res.authSetting)
        // res.authSetting = {
        //   "scope.userInfo": true,
        //   "scope.userLocation": true
        // }
      }
    })
  },
複製程式碼

（4）測試流程

點選傳送通知後，獲得這樣的效果：

通知成功
通知訊息

獲得對應返回值：

推送訊息結果
當errCode為0時，即傳送通知成功。
當errCode為43101，說明使用者只授權了一次，但是你傳送了2次，超過使用者授權次數。

錯誤引數提示

三、進階與思考

1、當你有多個訂閱模板同時需要使用者選擇時，你可以通過以下程式碼記錄，使用者哪些選了，哪些沒選。

wx.requestSubscribeMessage({
  tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac", "OBB_Z10eh_Inm9p8EU6Ml_NS_mijXgTz3T07cxgKvX0","5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"],
  success(res) {
    //console.log(res);
    if (res.errMsg == "requestSubscribeMessage:ok") {
      let acceptArray = [];  //使用者授權模板列表
      for (let i = 0; i < tmplIds.length; i++) {
        const element = tmplIds[i];
        if (res[element] == "accept") {
          acceptArray.push(element);
        }
      };
      console.log(acceptArray);
      if (acceptArray.length > 0) {
      //執行下一步函式
      }
    }
  }
})
複製程式碼

2、一個關於是否需要記錄使用者對某個“訂閱模板授權的次數”，以控制後臺“傳送的次數”，智庫君在實戰中認為，其實沒有必要，頂多就是你傳送返回一個錯誤碼，微信之所有記錄使用者授權次數，也是為了保護使用者不被騷擾。

3、你只需要記錄使用者點選了哪些需要授權的模板就行，為了是使用者點選訂閱後，改變按鈕的狀態，避免訂閱按鈕反覆彈窗的問題，同時當檢測到使用者點錯“總是”按鈕後，可以自動跳轉到“設定”介面。

4、這次智庫君主要給大家簡單介紹了下訂閱全流程。後面大家可以根據自己的需要，新增和改進這些程式碼。比如：

  • 配置雲函式中的node函式，實現定時傳送
  • 配置雲函式中的資料庫，實現內容的自定義傳送

最後，希望這篇文章能幫助到大家，一起學習，一起進步！

往期回顧：

[填坑手冊]小程式新版訂閱訊息+雲開發實戰與跳坑

相關文章