订阅消息发送消息时需要用到模板id,开发者登录微信公众平台在【基础功能-订阅消息-公共模版库-一次性订阅】中查询可以申请的模板,审核通过后可使用。
订阅消息界面,进入页面先判断是否已订阅过消息,选择展示按钮打开或关闭状态。
使用wx.requestSubscribeMessage发送订阅消息时,需要先使用wx.getSetting判断是否已经授权消息推送,设置withSubscriptions为true时才获取用户订阅消息的订阅状态,默认是不获取的,可以看一下文档。
设置withSubscriptions为true时,会返回res.subscriptionsSetting,mainSwitch是订阅消息的总开关,在subscriptionsSetting的itemSettings对象里会展示已同意或拒绝过的订阅消息模板id,accept是接收通知的模板id,reject是拒收的模板id。
可以选择接收或不接受。
返回的res如下图:
wx.getSetting({
withSubscriptions: true,
success (res) {
console.log(res.authSetting)
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// }
console.log(res.subscriptionsSetting)
// res.subscriptionsSetting = {
// mainSwitch: true, // 订阅消息总开关
// itemSettings: { // 每一项开关
// 模板id1: 'reject', // 拒收通知的订阅消息
// 模板id2: 'accept', // 允许接收通知的订阅消息
// }
// }
}
})
接下来判断是否订阅过,选择展示按钮状态。
wx.getSetting({
withSubscriptions: true,
success: (res) => {
console.log(res, 'setting')
if (res.subscriptionsSetting.itemSettings) { // 用户同意或拒绝后模板id会出现在itemSettings里, 以后不会再拉起推送消息的授权弹窗
//这里是两个订阅模板id,只要有一个接受过就打开按钮
if (res.subscriptionsSetting.itemSettings['模板id1'] == 'accept' || res.subscriptionsSetting.itemSettings['模板id2'] == 'accept') {
//判断用户允许订阅后的操作...
this.setData({ isDingyue: true })
} else {
//拒绝订阅后操作...
this.setData({ isDingyue: false })
}
}
}
})
判断完展示状态后,如果用户是第一次使用点击需要授权允许或拒绝接收消息,注意要勾选总是保持以上选项,允许或拒绝后模板id才会保存再subscriptionsSetting中,才可以用上面的判断,否则不生效。
代码如下:
dingyue() {
//如果已开启通知的话需要跳转设置页手动选择不接收,上面有图
if (this.data.isDingyue) {
wx.openSetting({
withSubscriptions: true,
});
return
}
wx.getSetting({
withSubscriptions: true,
success: (res) => {
console.log('subscriptionsSetting', res.subscriptionsSetting)
let tmplIds = ['模板id1', '模板id2']
// 判断用户允许或拒绝总是保持是否推送消息的选择, 如果选择过的话再点击就不显示 了,判断有没有itemSettings并且有没有这个订阅消息的模板id,我用的俩订阅模板,再一个弹窗上所有判 断其中一个有没有出现就可以
if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings['模板id1']) {
// 判断用户允许接收订阅通知
if (res.subscriptionsSetting.itemSettings['模板id2'] == 'accept' || res.subscriptionsSetting.itemSettings['模板id2'] == 'accept') {
this.setData({ isDingyue: true })
wx.requestSubscribeMessage({
tmplIds: tmplIds,
success(res) {
// wx.showToast({
// title: '不会再拉起推送消息的授权,订阅成功',
// })
},
})
} else {
console.log('拒绝了消息推送');
//如果第一次拒绝的话,需要跳转到设置页手动选择接收
wx.openSetting({
withSubscriptions: true,
});
}
} else if (res.subscriptionsSetting.mainSwitch) {
//用户只开启接收总通知,并没有这个订阅消息,弹出订阅消息
wx.requestSubscribeMessage({
tmplIds: tmplIds,
complete: (res) => {
console.log(res, '订阅')
if (res['模板id1'] == 'accept' || res['模板id2'] == 'accept') {
this.setData({ isDingyue: true })
}
}
})
} else {
//用户没有开启通知也没有订阅该消息,跳转设置页打开通知
wx.openSetting({
success(res) {
console.log(res.authSetting)
}
})
}
}
})
},
到这里微信小程序订阅消息的前端就完成了,希望对你有帮助!