老版本的訂閱訊息在2020年1月10日就下線了,相信不少人在接入新版本訂閱系統的時候,或多或少會遇到一些問題,這裡智庫君跟大家介紹下新版訂閱的機制和不需要node/後端的情況下 獨立完成功能開發。
一、新版訂閱的機制
其實開發過程不難,但是要理清楚它裡面的機制,智庫君還是花了一些時間的,也踩了不少坑
先來看下官方介紹:

- 可以設定多個訂閱選項
- 感嘆號裡面可以看到詳情
- 有個預設不被選中的“總是”選項
這些就是新不同的地方,智庫君在開發的時候也有很多疑問,點了“總是”再點“取消”按鈕會怎樣?部分選擇訂閱會怎樣?下面為大家一一梳理
(1)部分選中


舉例:

從這裡看出,微信系統會自動記錄使用者點選的次數,並且做累加記錄,如果使用者只允許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);
}
})
複製程式碼
顯示內容僅一個選項:


(3)使用者點選“總是”後,獲取狀態

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)配置雲函式


// 雲函式入口檔案
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為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函式,實現定時傳送
- 配置雲函式中的資料庫,實現內容的自定義傳送
最後,希望這篇文章能幫助到大家,一起學習,一起進步!
往期回顧:
![[填坑手冊]小程式新版訂閱訊息+雲開發實戰與跳坑](https://i.iter01.com/images/705d3b88152fa315ea6aaaa2ac40b9e8a898557acf2e941a84187f195f051998.jpg)