小程序消息推送x微搭低代码，微信消息推送快速上手实操教程
原创
近期有很多同学关注小程序消息推送的问题，今天就简单介绍下微搭低代码开发的小程序应用如何实现微信订阅消息的推送，目前方案有两种：
下面我们就基于这两种方案分别展开介绍一下，大家可按需选取适用方案。
一 使用微搭自定义APIs发送小程序消息
该方案基于微搭自定义API来完成，填入appid/secret等完成OAuth鉴权信息即可，可以做到几乎不写任何后端逻辑代码，主要的特点如下：
- 优势，整体流程操作简单，不需要自己写逻辑代码
- 不足，自定义程度有限，但针对大部分场景足够，目前主推这种方式
1 依赖资源
- 开通一个企业主体下的微信小程序，并且授权给微搭低代码，完成绑定操作（也可以在微搭控制台直接申请小程序）
- 申请小程序相应的消息模板（小程序后台申请）undefined
2 操作步骤
2.1 新建数据源的自定义APIs
在数据源中，新建 小程序消息 的自定义API
配置OAuth2.0的鉴权信息，注意相关字段的设置和映射关系，重点关注红框内的字段
2.2 添加小程序消息发送方法
完成数据源APIs新建后，添加一个自定义方法，如发送消息，也可以进行方法测试，以验证接口出入参的调试效果
设置好消息API的相关入参，以及对应的模板id以及根据模板的格式要求，填入对应的测试数据。
参考格式如下所示：
{
"touser": "{{params.openid}}",
"page": "pages/xxxx/index",
"lang": "zh_CN",
"data": {
"thing1": {
"value": "微搭编辑器YYDS"
},
"date2": {
"value": "2022-10-12"
},
"date3": {
"value": "20:00"
},
"thing4": {
"value": "您今日有新消息，请留意"
}
},
"template_id": "xxxx",
"miniprogram_state": "trial"
}如需了解更多相关API参数可参考小程序订阅消息文档
2.3 在微搭编辑器调用上述API方法
根据小程序消息推送机制要求，在调用消息发送接口之前，需要先发起订阅消息的授权，我们通过按钮调用自定义方法
自定义方法的代码参考如下：
export default function({event, data}) {
try{
wx.requestSubscribeMessage({
//申请到的小程序消息模板ID
tmplIds: ['xxx'],
success (res) {
$app.dataset.state.wxrun = "auth success";
console.log({res})
},
fail(res){
$app.dataset.state.wxrun = "auth failed";
console.log({res})
}
})
}catch (e) {
console.log('错误代码', e.code, '错误信息', e.message);
}
}授权成功后，调用消息API发送
export default async function({event, data}) {
try{
const openid = $app.dataset.state.openid;
const res = await app.cloud.callConnector({
name: 'zdy_xxxx',
methodName: 'sendMsgAPI',
params: {
"openid": openid
}, // 自定义API方法入参
});
console.log("res", res)
$app.dataset.state.wxrun = "sendByAPI success: " + JSON.stringify(res);
}catch(e){
console.log('错误代码', e.code, '错误信息', e.message);
}
}P.S.: 上述该步骤的自定义API方法目前已支持可视化调用，调用方式参考如下：
二 使用云开发云调用发送小程序消息
该方案基于微信云开发的云调用来实现，不需要搭建后端服务，即可完成消息发送。
- 优势，相对灵活，可以在云函数加入更多自定义逻辑
- 不足，需要了解一定的nodejs代码，开通云函数运行环境（可复用低代码的运行环境）
1 依赖资源
与第一种方案的依赖资源类似，主要以下两种：
- 开通一个企业主体下的微信小程序，并且授权给微搭低代码，完成绑定操作（也可以在微搭控制台直接申请小程序）
- 申请小程序相应的消息模板（小程序后台申请）
2 操作步骤
2.1 新建云函数，调用发送消息接口
打开对应的低代码环境，选择云函数并新建一个如sendSCFMSG的云函数
完成云函数新建后，相关内容参考如下：
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
console.log("event: ",event)
try {
const result = await cloud.openapi({appid: wxContext.FROM_APPID}).subscribeMessage.send({
"touser": event.openid,
"page": 'pages/xxxx/index', // 小程序页面id
"lang": 'zh_CN',
"data": {
"thing1": {"value": "微搭编辑器YYDS"},
"date2": {"value": "2022-11-01"},
"date3": {"value": "20:00"},
"thing4": {"value": "您今日有新消息，请留意"}
},
// 小程序模板id
"templateId": "xxxx",
//小程序版本说明：developer为开发版；trial为体验版；formal为正式版
"miniprogramState": 'trial'
});
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
result,
}
} catch (err) {
return err;
}
}最后，保存云函数并完成相关依赖安装（如依赖的require('wx-server-sdk')，需要新建package.json），保存后可在前端页面中进行调用。
2.2 在编辑器调用云函数方法
同样的，调用消息发送之前，需要先发起订阅消息的授权，通过按钮调用自定义方法
自定义方法代码参考如下：
export default function({event, data}) {
try{
wx.requestSubscribeMessage({
//申请到的小程序消息模板ID
tmplIds: ['xxx'],
success (res) {
$app.dataset.state.wxrun = "auth success";
console.log({res})
},
fail(res){
$app.dataset.state.wxrun = "auth failed";
console.log({res})
}
})
}catch (e) {
console.log('错误代码', e.code, '错误信息', e.message);
}
}授权成功后，调用云函数的消息发送方法sendWxSCF
其中的自定义方法内容参考如下：
export default async function({event, data}) {
const wxcloud = await app.cloud.getCloudInstance();
const openid = $app.dataset.state.openid;
wxcloud.callFunction({
name: "senWxMsg",
data:{
openid: openid
},
success: res => {
console.log(res)
$app.dataset.state.wxrun = "sendSCF send success";
},
fail: res=>{
console.log('callFunction fail: ', res)
},
complete: res => {
console.log('callFunction complete: ', res)
}
})
}好了，以上两种方案都介绍完了，虽然两种方案实现路径上有一定差异，但是整体流程和思路相同，大家有空也可以都试试。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
