前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 发送模板消息的功能实现

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

作者头像
泥豆芽儿 MT
发布2018-09-11 10:46:40
5.6K0
发布2018-09-11 10:46:40
举报
文章被收录于专栏:木头编程 - moTzxx

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333459

☹. 背景

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

❶ 前期准备

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

❷ 实现步骤

1. 小程序端的要求

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

  • 第一步:以我的代码实现为例,首先需要对我的 <form/> 组件进行需发模板消息的声明,即设置属性 report-submit="true"
  • 第二步:对应的 pages/cart/payment.js代码中,编写的提交代码,以及对 event参数打印的结果则为:

注意:截图部分只是为了,获取并保存我们需要的 formId

其实,后面的代码还可以有很多的逻辑处理,以我的代码逻辑为例:

我继续进行了表单数据的规范验证 -> wx.request 数据提交 -> 唤醒微信支付 -> 支付结果的回调处理

  • 第三步:request 调用发送消息通知的方法 以我的逻辑为例,是在执行完微信支付回调后,判断支付成功才进行调用的

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

代码语言:javascript
复制
 /**
   * 微信支付成功后的 消息模板的发送
   */
  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

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

❹ 源代码参考

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年09月04日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ☹. 背景
  • ❶ 前期准备
  • ❷ 实现步骤
    • 1. 小程序端的要求
      • 2. 服务端代码配置
      • ❸ 运行测试
      • ❹ 源代码参考
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档