微信小程序模板消息
因公司业务需求:扫码开锁/关锁等, 实现消息推送通知, 这里就不截流程图,大概流程
ps: 以下是个人使用方案(仅供参考),欢迎大神们指教…
模板消息.官方文档
效果图
介绍
微信6.5.2及以上版本支持
基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。
- 模板推送位置:服务通知
- 模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见 下发条件说明
- 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面
1. 配置消息推送
- 登录微信公众平台,在左侧侧边栏—>设置—>开发设置—>消息推送—> 启用
2. 消息模板
- 消息模板只有在我的模板中才可以使用,首先我们可以根据自己需求在模板库中查找适合自己的,如果没有,就申请新的模板,选择模板时要注意,至少选择两个参数
3. 发送模板消息
页面的 form 组件,属性
report-submit
为true
时,可以声明为需要发送模板消息,此时点击按钮提交表单可以获取formId
,用于发送模板消息。或者当用户完成 支付行为,可以获取prepay_id
用于发送模板消息。
注意:
- 需要用户先在小程序内通过
交互行为触发事件
,可允许开发者向用户在7天内推送有限条数的模板消息 - 表单提交:获取
formId
(1次提交表单可下发1条
,多次提交下发条数独立,互相不影响) - 支付: 获取
prepay_id
(1次支付可下发3条
,多次支付下发条数独立,互相不影响) - 在开发者工具中测试,得到的formId值为
the formId is a mock one
。测试场景务必在真机中调试
场景描述:
-
在本项目中场景,仅供参考(每个开发都所需异同)
-
前端
获取 formId
发送给后台,由后台实现模板消息的发送【此处由于formId
只能由用户触发表单提交操作产生,因此前端需要将每次产生的formId
发送至后台,由后台保存并在适当时候调用微信接口向用户发送模板消息】
wxml
<form bindsubmit="submitInfo" report-submit='true' >
<button class='commButton' bindtap="toRecharge" form-type="submit">充值</button>
</form>
// bindtap="toRecharge"事件个人所需,我这里需要实现一些业务
js
表单提交
/**
* 表单提交获取formId
*/
submitInfo: function(e) {
//获取formId
this.setData({
formId: e.detail.formId
})
var params = {
formid: this.data.formId,
type: 'button'
}
// 调用封装方法,请求后台 表单提交需 传入formId
http.sendTemplateMessage('users/form-id测试', params, function(res) {
})
},
支付
/**
* 支付: 获取 prepay_id
* 调用支付api: 返回package参数值
* 例: package: "prepay_id=wx26161813154655126912df98d1c31d...."
*/
paySuccessFormId: function(prepayId) {
//截取prepay_id=后面的值(也就是: wx26161813154655126912df98d1c31d....)
let tmpPrepayId = this.getQueryVariable(prepayId, 'prepay_id');
var params = {
formid: tmpPrepayId,
type: 'pay'
}
// 调用封装方法,请求后台 支付传入 prepay_id
http.sendTemplateMessage('users/form-id测试', params, function(res) {
})
},
截取url参数
/**
* 截取url 参数
*/
getQueryVariable: function(query, variable) {
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair.length == 2) {
return pair[1];
}
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
},
css修改button样式
button {
&::after {
border: none;
outline: none;
}
}
button[disabled] {
color: #ccc !important;
background: #ededed !important;
}
4. 后台收集/下发等业务
收集(前端提交formId)/调用下发模板消息等相关业务