小程序如何实现模板消息发送的功能（图文）

发布日期： 2018-09-07 阅读量： 作者： 网络

小程序中为了体现友好交互，是不可能会少掉消息通知的，纳闷我们该如何实现模板消息发送的功能，下面这篇文章将为你纤细介绍关于小程序如何实现模板消息发送的功能。

背景

- 小程序开发的过程中，绝大多数会满足微信支付
- 那么，作为友好交互的体现，自然就会考虑到支付后的消息通知咯
- 所以，我的小程序项目也要求完成这个效果，so.分享一下自己的实现步骤，以方便道友们少踩点坑...

微信消息通知 的区别：

1、微信网页版、公众号的消息提醒
要求用户必须 "关注商家公众号"，才支持消息的接收
并且还有个奇怪的毛病：如果近期内未与该公众号有所交流，依然收不到消息提醒
再者，消息的样式需代码进行自定义(麻烦)2. 微信小程序，可支持"服务通知"
只需配置好自己的 "模板消息"，通过获取用户的 "openid" 即可进行来自微信服务的消息
通知的样式，可在小程序的管理后台进行选取，预览(人性化)

此处参考京东购物的消息通知如下（也就是在下想要实现的效果）

前期准备

①. 首先，微信小程序官方文档为我们提供了指导 — 【发送模板消息】

我们可以先对文档进行一遍简单的浏览，以方便自己的流程理解，避免蒙头苍蝇乱撞
②. 小程序给与了我们最方便的手动模板配置方式

我们可以先去 1（模板库）中选取自己需要的模板，自定义标题、排序
申请成功之后，进入 2（我的模板）中就可以看到自己能够使用的模板，我们后期进行代码编辑时，用到的就是那个模板ID

实现步骤

此处，主要以

组件形式的实现为例，对于prepay_id 的实现请参考文末的附录

1. 小程序端的要求

语境：微信支付成功后，对用户发送一条"订单支付成功通知"的模板消息

第一步：以我的代码实现为例，首先需要对我的

组件进行需发模板消息的声明，即设置属性 report-submit="true"
第二步：对应的 pages/cart/payment.js代码中，编写的提交代码，以及对 event参数打印的结果则为：
注意：截图部分只是为了，获取并保存我们需要的 formId，

其实，后面的代码还可以有很多的逻辑处理，以我的代码逻辑为例：
我继续进行了表单数据的规范验证 -> wx.request 数据提交 -> 唤醒微信支付 -> 支付结果的回调处理

第三步：request 调用发送消息通知的方法

以我的逻辑为例，是在执行完微信支付回调后，判断支付成功才进行调用的

此处，直接提供上述截图中 pages/cart/payment.js 所需要用到的两个核心方法

 /**
   * 微信支付成功后的 消息模板的发送
   */
  sendTemplatePaySuccess: function() {    
  var self = this;    
  var postData = {
      sn: self.data.order_sn,
      form_id: self.data.formId
    };
    self.http_post('https://xxx.com/wx/sendTemplatePaySuccess', postData, (data) =&gt; {
      wx.navigateTo({
        url: '/pages/cart/results/index?status=1&amp;type=pay&amp;orderInfo=' + JSON.stringify(self.data.orderInfo),
      });
    })
  }, /**
 * 封装 http 函数，默认‘GET’ 提交
 */
   http_post:function(toUrl, postData, httpCallBack) {
    wx.request({
      url:  toUrl,
      data: postData,
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {        'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      success: function (res) {        //回调处理
        return typeof httpCallBack == "function" &amp;&amp; httpCallBack(res.data);
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },

# 模板消息发送

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯4446 】【 SEO推广4450 】

上一篇: PHP 函数中如何在返回值中传递多个值？

下一篇: C++ 函数的修复指南：一步步解决调试问题

小程序如何实现模板消息发送的功能（图文）

随便看看