微信小程序订阅消息
一、模板选择
-
打开登录微信小程序的平台
-
在左侧面板中找到
功能
->订阅消息
-
从
我的模板
页面点击选用
按钮,进入到公共订阅消息模板页面 -
搜索自己所需的提醒消息模板,点击
选用
按钮,进入到通知消息各项调整页面 -
左侧为订阅消息预览,右侧为映射的数据项
-
勾选完毕,并填写好场景说明即可生成自己所需的模板
-
在
我的模板
页面,可以点击详情,查看当前模板的信息,包括模板ID、数据项 ,这两项是代码配置中需要用到的 -
详细内容
项,请见本文最后一份代码提示
二、代码实现
忽略云开发细节
1、获取用户openid(可以耦合在发送消息云函数里面,但这里我拆分出来)
- 订阅消息的发送,是以用户的openid为target,指定发送给某个用户
- 云函数:getOpenId
云函数的创建需要上传部署,改动可以使用增量上传更新
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
- 业务代码中获取openid的方法,
res.result.openid
就是当前用户的openid
getOpenId: function (e) {
wx.cloud.callFunction({
name: 'getOpenId' // 上文中的云函数名
}).then(res => {
console.log("获取openid成功", res.result.openid)
}).catch(err => {
console.log("获取openid失败", err)
})
},
- 可以存为data,在发送消息时作为参数传递
2、触发消息订阅
- 消息订阅是小程序端请求用户授权的操作
- 对应的API是:
wx.requestSubscribeMessage({ tmplIds: ['消息模板id1'] })
- 可以看到模板id是一个数组格式,那就意味着可以请求用户授权多个消息模板
- 在业务代码中请求授权:
subscribeMsg: function (e) {
wx.requestSubscribeMessage({
tmplIds: ['填上选用的模板id'],
success(res) {
console.log("订阅成功", res)
},
fail(err) {
console.log("订阅失败", err)
}
})
},
- 授权失败情况:
我的模板
中未选用id
- 订阅成功:
编辑器端效果
示例(此处可以自行使用真机预览效果)
3、订阅结果查询
- 无论用户点击了上图中的
【取消】
还是【允许】
wx.requestSubscribeMessage
这个API都会提示调用成功- 结果获取:res中模板id作为key的值,分为:
reject
、accept
- 这里的图片只作为展示结果用,模板id与上下文无关
4、订阅消息发送
- 在用户点击了
【允许】
后,执行发送订阅消息逻辑 - 这里将发送逻辑写在云函数中
- 业务代码中,调用云函数,将openid和模板id作为参数传递
send2one: function (e) {
let that = this;
wx.cloud.callFunction({
name: 'sendSubscribeMsg',
data: {
openid: 'xxxxxxxxxx', // 测试的时候,可以直接写死openid
tmplid: 'xxxxxxxxxx',
}
}).then(res => {
console.log("发送给单个用户成功", res)
}).catch(err => {
console.log("发送给单个用户失败", err)
})
},
- 云函数:sendSubscribeMsg,需要参数:当前用户
openid
- 需要注意的是:发送的订阅消息的数据结构
必须和选用的模板字段key一致
!!!
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
try {
const result = await cloud.openapi.subscribeMessage.send({
touser: event.openid,
page: 'pages/index/index',
data: {
date1: { // 对应模板中第一个key
value: '2022年07月19日'
},
phrase2: { // 对应模板中第二个key
value: '广州'
}
},
"templateId": event.tmplid,
"miniprogramState": 'developer'
})
return result.errCode;
} catch (err) {
return err
}
}
- 部署好云函数后,就可以真机预览操作来见证订阅消息的来到了