小程序 发送模板消息的功能实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/82379590

☹. 背景

- 小程序开发的过程中,绝大多数会满足微信支付
- 那么,作为友好交互的体现,自然就会考虑到支付后的消息通知咯
- 所以,我的小程序项目也要求完成这个效果,so.分享一下自己的实现步骤,以方便道友们少踩点坑...
  • 微信消息通知 的区别:
1. 微信网页版、公众号的消息提醒
   要求用户必须 "关注商家公众号",才支持消息的接收
   并且还有个奇怪的毛病:如果近期内未与该公众号有所交流,依然收不到消息提醒
   再者,消息的样式需代码进行自定义(麻烦)
2. 微信小程序,可支持"服务通知"
   只需配置好自己的 "模板消息",通过获取用户的 "openid" 即可进行来自微信服务的消息
   通知的样式,可在小程序的管理后台进行选取,预览(人性化)
  • 此处参考京东购物的消息通知如下(也就是在下想要实现的效果):

❶ 前期准备

  • ①. 首先,微信小程序官方文档为我们提供了指导 — 【发送模板消息】 我们可以先对文档进行一遍 简单的浏览,以方便自己的流程理解,避免蒙头苍蝇乱撞
  • ②. 小程序给与了我们最方便的手动模板配置方式 我们可以先去 1(模板库)中选取自己需要的模板,自定义标题、排序 申请成功之后,进入 2(我的模板)中就可以看到自己能够使用的模板,我们后期进行代码编辑时,用到的就是那个模板ID

❷ 实现步骤

1. 小程序端的要求

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

  • 第一步:以我的代码实现为例,首先需要对我的 <form/> 组件进行需发模板消息的声明,即设置属性 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) => {
      wx.navigateTo({
        url: '/pages/cart/results/index?status=1&type=pay&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" && httpCallBack(res.data);
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },

2. 服务端代码配置

我对服务端的代码,整合集中在了一个文件中,可从附录中进行下载

  • 第一步:替换小程序配置信息
  • 第二步:修改方法 sendTemplatePaySuccess()
  • 提示: 1.此方法是对应于 pages/cart/payment.js 中的 Https://xxx.com/wx/sendTemplatePaySuccess,应该不会理解错吧! 2.一般的设计逻辑,是在用户注册、初次授权登录的时候就将其 openid写到数据库中,后期使用时可随时调用 3.如果前期没有写入数据库,也可以考虑直接授权获取,参考文章 【微信小程序Ⅴ [获取登录用户信息,重点openID(详解)】] 4.template_id 直接在小程序账号后台复制即可,但是请将 $rawPost['data']['keyword?']['value'] 顺序对应正确哦

❸ 运行测试

  • ①. 首先,要知道一点,不可以使用 微信开发者工具进行测试,不然会有如下报错:

可参考道友解释: 小程序 表单 formId 为 the formId is a mock one

  • ②. 其中,如果已经发送过一次模板消息,会有如下提示信息:
{
    "status":0,"result":"sendTemplatePaySuccess Failed!",
    "data":
        {
            "errcode":41029,"errmsg":"form id used count reach limit hint: [9mUwja01342277]"
        }
}
  • ③. 使用真机测试,顺利运行的效果为:

❹ 源代码参考

  • 请对应代码进行正确配置哦 CSDN下载地址 >>>
  • 补充提示: 开发文章中有这样一句话:

个人觉得,只声明 report-subnmittrue 就能实现自己的业务; 举例:在一系列逻辑处理操作后,只需回调判断不同状态,再进行 formID 的获取也没问题 相对而言后者适应的语境,貌似太过局限,此处仅为个人看法而已!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

JavaWeb 入门1

一、相关基础知识 1、C/S(Client/Server)架构和B/S(Browser/Server)架构 首先说C/S架构,简单讲其实很常见,类似QQ等需要下...

20210
来自专栏编程微刊

微信小程序云开发 初学者入门教程二

如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必...

9731
来自专栏IT技术精选文摘

为最佳性能调优 Nginx

通常来说,一个优化良好的 Linux 服务器可以达到 500,000 – 600,000 次/秒 的请求处理性能,然而我的 Nginx 服务器可以稳定地达到 9...

5505
来自专栏网络

Nginx 系列实用教程#2:性能

协作翻译 原文:Nginx Tutorial #2: Performance 链接:https://www.netguru.co/codestories/ngi...

2266
来自专栏python学习指南

python爬虫(四)_urllib2库的基本使用

本篇我们将开始学习如何进行网页抓取,更多内容请参考:python学习指南 urllib2库的基本使用 所谓网页抓取,就是把URL地址中指定的网络资源从网络...

20810
来自专栏xingoo, 一个梦想做发明家的程序员

RequireJS实例分析

  随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由...

2725
来自专栏张戈的专栏

shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度

在 Linux 中,shell 脚本结合系统任务计划 crontab,非常简单就能实现一些复杂程序才能完成的工作,开发成本低,且简单易学。 张戈博客之前也分享过...

4279
来自专栏数据之美

玩转 Linux 之:磁盘分区、挂载知多少?

上周在做日志机扩容的时候,发现运维同学将一块硬盘的挂载点没有同以前的日志机保持一致,考虑到这会给日后的维护带来麻烦,于是尝试着手修改,在修改的同时,revie...

84810
来自专栏北京马哥教育

最实用也最容易被遗忘的 Linux 命令行使用技巧

作为一个日常在Linux环境下工作的工程师,每天都要大量使用Linux命令行。有时候我们会在网上翻查命令行的使用技巧,但是一旦未能及时进行练习,很快就会把这些...

3157
来自专栏编程

Linux常用网络工具总结(一)

本文整理了在实践过程中使用的Linux网络工具,这些工具提供的功能非常强大,我们平时使用的只是冰山一角,比如、、、等。 本文不会深入研究这些命令的强大用法,因为...

2867

扫码关注云+社区

领取腾讯云代金券