原文链接https://blog.csdn.net/zxg_1991/article/details/79918100
1 微信小程序模板消息说明
- 基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。
- 模板推送位置:服务通知
- 模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见下发条件说明
- 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面
以上是微信小程序开发文档介绍,详细资料可以打开查看。下面的手机截图显示的是模板消息,在微信的服务通知显示我们定义的内容,当前图片是麦当劳的服务通知截图。
image
2 发送模板消息代码
直接上一段发送模板消息的代码,后台服务是nodejs写的。
function sendTemplateMessage(param) {
return new Promise((resolve, reject) => {
let opts = {
touser: param.openId,
template_id: param.template_id,
form_id: param.formId,
data: {
"keyword1": {
"value": param.user,
"color": "#1d1d1d"
},
"keyword2": {
"value": param.result,
"color": "#1d1d1d"
},
"keyword3": {
"value": param.time,
"color": "#1d1d1d"
}
}
}
let data = {
method: 'POST',
url: `https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=${param.accessToken}`,
body: JSON.stringify(opts),
header: {
'content-type': 'application/json' // 默认值
}
}
url.post(data).then(result => {
result = JSON.parse(result)
if (result.errcode == '0' && result.errmsg === 'ok') {
resolve(result)
}
else {
reject(result)
}
}).catch(err => {
reject(err)
})
})
}
函数返回promise对象,参数param实现了全部的发送模板消息需要的参数。
3 发送模板消息接口参数
通过官方文档我们可以看到必要的参数有:
参数 | 说明 |
---|---|
touser | 接收者(用户)的 openid |
template_id | 所需下发的模板消息的id |
form_id | 表单提交场景下,为 submit 事件带上的 formId;支付场景下,为本次支付的 prepay_id |
data | 模板内容,不填则下发空模板 |
- touser,接收者的openid,用来识别接收消息。
- template_id,是在小程序模板消息的个人模板库中定义模板消息的id。
- form_id,这个是小程序界面表单提交场景下,为 submit 事件带上的 formId;支付场景下,为本次支付的 prepay_id。这里主要说明form_id,prepay_id如果你做了微信支付接口,就会了解。
- data模板内容,如下代码,定义了3行数据。
data: {
"keyword1": {
"value": param.user,
"color": "#1d1d1d"
},
"keyword2": {
"value": param.result,
"color": "#1d1d1d"
},
"keyword3": {
"value": param.time,
"color": "#1d1d1d"
}
}
4 表达提交场景下的form_id
小程序界面组件使用form时,添加report-submit='true'属性,在bindsubmit回调里会出现form_id,所以你需要将form_id上传到后台发送模板消息的地方来使用,注意一个用户对应的form_id只能为该用户推送模板消息,不能为其他用户使用,也就是说form_id是和openid绑定使用的,并且有效期是7天。下面是一个简单的登录界面。
<view class="login-body">
<form class="form" bindsubmit="formSubmit" report-submit='true'>
<view class="section">
<text class='title-text1'>欢迎使用</text>
</view>
<view class="section">
<text class='title-text2'>{{title}}</text>
</view>
<view class="section">
<text class='content-text'>帐号 : </text>
<input class='input' name="username" type="text" />
</view>
<view class="section">
<text class='content-text'>密码 : </text>
<input class='input' name="password" password type="text" />
</view>
<view class='section'>
<button type='primary' form-type='submit'>登录</button>
</view>
</form>
<form class='section' bindsubmit="toRegister" report-submit='true'>
<button type='default' form-type='submit'>注册</button>
</form>
</view>
formSubmit: function (e) {
// 显示当前formId
console.log(e.detail.formId)
}
再次注意,在实际使用中,模拟器的formId: "the formId is a mock one",只有真机下才会得到正确的formId。
5 无限次推送,打破微信接口限制
由于模板消息必须得到用户的formId才可以为用户推送消息,所以限制了为用户推送的次数。所以我们可以预先收集用户提交表单的formId,在需要推送表单的地方使用。
前端提交用户formId和openid数据,后台保存到服务器中,注意formId的有效期是7天,这样就可以达到伪无限次推送,打破微信接口的限制。
formSubmit: function (e) {
util.unloadFormId(e.detail.formId, app.globalData.openId)
}
网友评论