微信小程序发送模板消息（待付款提醒）

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

建议与后端配合 由后端跟微信服务器交互 前端向后端提供所需参数。（此文章采取此方案）

考虑到一下几点：

第一点：

使用 "

" 组件

获得的 "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文件如下：

 

重写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"
  }
}

 

在具体页面中进行调用：具体样式根据自己的要求进行设置

    {{packData.sale==buyOrNot.buy?'已购买':'立即购买'}}

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

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

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

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