微信小程序发送模板消息(待付款提醒)
- 首先在公众平台开通模板消息
从模板库中搜索选择自己需要的模板消息 保存 即可以到我的模板里看到对应模板ID 此ID要拿来做模板信息发放的依据
开通好了可以点击详情看到模板的大致消息如下:
后端实现请参照文档:
大致需要传一下参数:
若由前端实现则需要注意获取openId secret 等 换取access_token 发送请求即可 具体可参照以下文档:
https://www.cnblogs.com/Smiled/p/8204467.html
考虑到一下几点:
第一点:
使用 "<form/>" 组件
获得的 "formId" 只能使用一次
相对适合的通知业务 —— 支付成功或失败后,充值成功、 续费成功、挂号成功等被动响应的信息...
第二点:
"prepay_id" 只有进行了支付行为才能获得,并且必须支付成功!
一个 "prepay_id" 可以使用三次
相对适合的通知业务有 —— 后台发货提醒、审核通知、课程开班提醒、拼团成功通知等主动推送的信息...
第三点:
prepay_id 使用时的报错信息:
//# 如果支付不成功,但是要使用获得的 prepay_id,会有如下类似的信息
{ "data":{ "errcode":41028, "errmsg":"invalid form id hint: [XiZ04574125]" } }
//# 如果支付成功,使用获得的 prepay_id 次数超过了三次,会有如下的信息:
{ "data":{ "errcode":41029, "errmsg":"form id used count reach limit hint: [oFN1Aa08963936]" } }
故决定采用获取formId 的形式来进行发送模板消息,前端进行获取formid的组件封装 以便后续使用:
wxml文件如下:
<!--components/catchform/catchform.wxml--> <form class="catchForm" report-submit="true" bindsubmit="catchSubmit"> <button form-type=submit class=catchBtn> <slot></slot> </button> </form>
重写button的样式:可根据个人需要写样式
/* components/catchform/catchform.wxss */ .catchBtn{ border: none; text-align: inherit; padding: 0; margin: 0; line-height: inherit; color: inherit; font-size: inherit; background: transparent; border-radius: 0; } .catchBtn::after{ border: none; }
对事件进行捕获 并且获取formId 发送到父组件 以便进行后续交互
methods: { //点击获取formId catchSubmit:function(e){ console.log(获取formID:,e.detail.formId); this.triggerEvent("callback", e.detail.formId); } }
至此:获取formId 组件完成
在具体页面进行调用:
现在json文件中引用组件:
{ "usingComponents": { "ow-form": "../../../components/catchform/catchform" } }
在具体页面中进行调用:具体样式根据自己的要求进行设置
<ow-form class=form-box bind:callback="handleBuyPack"> <view class="pay-buy button-bg { {packData.sale==buyOrNot.buy?hasBuy:}}">{ {packData.sale==buyOrNot.buy?已购买:立即购买}}</view> </ow-form>
本例中应用于立即购买 代付款时发送提醒
点击按钮的实现方法:(附上支付失败的处理)
模板里跟后端约定的字段如下:
具体字段请查看选中的模板所需有的字段 并和后台确定具体的方式。