在小程序中推送模板消息的实现方法


Posted in Javascript onJuly 22, 2019

前段时间剁手了 PS4,在浏览商店时,发现官方商店真的不好用,主要是网络原因,次要是页面设计。所以就想自己做一个游戏查询的小程序,可以关注某个游戏,然后在这个游戏打折的时候发送通知给用户。最后发现有个很大的问题是:小程序没法直接给用户推送消息(当时还不知道模板消息),服务号才能。然后就用邮箱实现了通知功能,但是邮箱的局限实在是太大了(各大免费邮箱每天的发件数都很小,自己搭建的邮件服务器虽然没有发件限制,但是大概率会被放到垃圾箱)。

然后某天在微信小程序的管理后台发现了模板消息这个东西,查了会资料发现可以通过这个来实现消息推送。要给用户发送模板消息需要 formId/prepay_id 这样一个东西,这个东西是怎么来的呢?

  • formId:这个可以通过表单的提交来获取,需要在组件中设置属性 report-submit="true" ,这样每次对这个表单的提交一次就会产生一个 formId.
  • prepay_id:这个是支付动作产生的,具体的我也不太清楚,毕竟个人小程序并不能支付.

下面具体来讲讲前后台的实现,前台使用 mpvue,后台使用 java

前台获取 formId

既然可以通过 form 的 submit 操作来获取到 formId,那我们稍微拓展一下,将我们的小程序页面中所有用户能点击的部分都用 form,button 来包裹一下,这样用户感知不到有表单提交操作,我们也能获取大量的 formId。

注意不能用叠加的方式来一次点击获取多个 formId,这样方法已经不行了,获取到的都会是一样的。

获取一个模板

要发送模板消息,首先要在小程序的管理后台上添加模板,步骤如下:

1.在模板库中选择一个模板

在小程序中推送模板消息的实现方法

2.选择显示参数

选择要显示在消息中的参数,这里选择如下两个参数:

在小程序中推送模板消息的实现方法

这样就有了一个模板可以用来发消息了,在我的模板中可以看到模板 id,和字段 id

在小程序中推送模板消息的实现方法

获取 formId

formId 是通过表单提交来获取到了,为了获取足够多的 formId,可以将能够点击的组件(比如按钮,列表单元..)包裹在 form 中,这样用户在日常使用中就能够收集到足够多的 formId。下面以包裹一个有赞的按钮为例。因为小程序的限制,设置 form-type 属性的按钮必须为 form 组件的直接子节点,所以并不能够在 form 中使用自定义组件,并将 form-type='submit' 设置到自定义组件中。

template 部分如下:

<!-- 要获取formId,需要给form设置report-submit="true"的属性,然后在form-type="submit"的按钮上产生点击动作,才会触发表单提交的事件--formSubmit,进而获取到formId -->
<form @submit="formSubmit" report-submit="true" class="bottom">
 <button style="border:0;display:inline-block" plain="true" form-type="submit" @click="back">
  <van-button round type="primary" size="small" @click="back">返回</van-button>
 </button>
 <button style="border:0;display:inline-block" plain="true" form-type="submit" @click="watchGame">
  <van-button round type="danger" size="small">{{watchText}}</van-button>
 </button>
 <button style="border:0;display:inline-block" plain="true" form-type="submit" open-type="share">
  <van-button round type="info" size="small">分享</van-button>
 </button>
</form>

style 目的为了去除原生 button 的背景,边框啥的,把 button 当一个 div 来使用,然后在 button 中设置 form-type 和 click 属性,这样既不影响 formId 的属性,也对原有逻辑不产生任何影响。之所以将 click 放在 button 上是因为 button 内部的组件没法获取到点击事件。

formSubmit 代码如下:

formSubmit(e) {
 let item = {
  value: e.mp.detail.formId,
  expireTime: Date.now() + 7 * 24 * 60 * 60 * 1000
 };
 this.globalData.formIdList.push(item);
},

该函数是在表单提交时触发,用于获取 formId,将 formId 和这个 formId 的过期时间一起存到 globalData 全局数据中。然后找一个时机将这些 formId 发送给服务器保存起来就行了。

这里放上我的做法以供参考。

我是在每次发送 http 请求前检查是不是有 formId 需要发送到服务器,如果有就将这些数据 JSON 序列化后放到一个自定义 header 中,发送出去,具体代码如下(http 请求工具为:flyio):

var Fly = require("flyio/dist/npm/wx");
var fly = new Fly();
//在请求预处理中
fly.interceptors.request.use(request => {
 request.headers["jwt-token"] = wxUtil.getGlobalData("jwt-token");
 //如果有formId就放到header里送过去
 let formIdList = getApp().globalData.formIdList;
 if (formIdList.length > 0) {
  request.headers["formIdList"] = JSON.stringify(formIdList);
  getApp().globalData.formIdList = [];
 }
 if (request.method == "GET") {
  request.params["_t"] = new Date().getTime();
 }
 return request;
});

下面将后台的实现,基于 Spring Boot.

后台处理

搜集 formId

首先需要把 formId 收集起来存到数据库,那么就需要检查每个请求,看 header 中有没有携带 formId,如果有就存到数据库中,注意要和用户对应起来,某个用户点击产生的 formId 只能用于给这个用户推送消息。

因为要将 formId 和用户绑定起来,因此我是在身份认证过滤器中进行的 formId 处理,身份认证成功后,处理 formId。代码如下:

/**
 * Description: 从请求头中获取formIdList,并插入数据库
 *
 * @param request 请求头
 * @return void
 * @author fanxb
 * @date 2019/5/6 16:39
 */
private void checkFormId(HttpServletRequest request) {
  String str = request.getHeader(Constant.HEADER_FORM_ID);
  if (StringUtil.isEmpty(str)) {
    return;
  }
  List<FormKey> formKeyList = JSON.parseArray(str, FormKey.class);
  //UserContextHolder用户将当前线程和用户绑定起来,方便后面获取用户信息
  int userId = UserContextHolder.get().getUser().getUserId();
  formKeyList.forEach(item -> item.setUserId(userId));
  this.formKeyDao.insertMany(formKeyList);
}

发送微信提醒

通过官方文档可以知道发送消息的流程如下:

1 获取 accessToken,调用微信的大多数接口都需要这个东西,这个通过 appId 和 secret 来获取。详情参见: https://developers.weixin.qq.com/miniprogram/dev/api-backend/auth.getAccessToken.html

2 调用微信发送服务通知的接口.这个接口文档在: 点击跳转

最终发送的 http 请求是这样的:

url: https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=上面获取的accessToken
method: post

请求体格式为:application/json; charset=utf-8

body:{
 "touser": "用户的openId",
 "template_id": "模板id",
 "page": "点击跳转的小程序url路径",
 "form_id": "收集到的formId",
 "data": {
  "keyword1": {
   "value": "您有一个信息的提示消息"
  },
  "keyword2": {
   "value": "这是消息内容"
  }
 },
 "emphasis_keyword": "keyword1.DATA"
}

data 中的数据的按照顺序 keyword1,keyword2 对应于模板中字段的顺序。

结束

工程全部源码在这里:github

总结

以上所述是小编给大家介绍的在小程序中推送模板消息的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
javascript自定义日期比较函数用法示例
Jul 22 #Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 #Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 #Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 #Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 #Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 #Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 #Javascript
You might like
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php桥接模式应用案例分析
2019/10/23 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
租赁协议书范本
2014/04/22 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2016国庆促销广告语
2016/01/28 职场文书