1. 首先在公众平台开通模板消息

从模板库中搜索选择自己需要的模板消息 保存 即可以到我的模板里看到对应模板ID 此ID要拿来做模板信息发放的依据

后端实现请参照文档：

https://developers.weixin.qq.com/miniprogram/dev/api-backend/templateMessage.send.html

大致需要传一下参数：

若由前端实现则需要注意获取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>

本例中应用于立即购买 代付款时发送提醒

点击按钮的实现方法：（附上支付失败的处理）

模板里跟后端约定的字段如下：

具体字段请查看选中的模板所需有的字段 并和后台确定具体的方式。