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

前段时间，我拿起PS4。在浏览店铺的时候，发现官方店铺真的不好用，主要是因为网络，页面设计是次要的。所以我想做一个小游戏查询程序，可以关注某个游戏，然后在游戏发售的时候给用户发通知。最后发现有一个很大的问题：小程序无法将消息直接推送给用户(当时还不知道模板消息)，所以服务号可以。然后利用邮箱实现通知功能，但是邮箱的限制太大了(各大免费邮箱每天发送的邮件数量很少，自己搭建的邮件服务器没有邮件限制，但是很大概率会被放入垃圾桶)。

然后有一天，我在微信小程序的管理后台找到了模板消息。查了资料，发现可以用来推送消息。要向用户发送模板消息，您需要类似FOrmId/预付费_id这样的东西。这东西是怎么来的？

formId:可以通过提交表单获得，需要在组件中设置属性report-submit='true '，这样一个formId。每次提交表单时都会生成predate _ id :具体细节我不太清楚，毕竟个人小程序是付不起的。下面是关于前台和后台的实现，前台使用mpvue，后台使用java。

在前台获取表单

既然表单ID可以通过form的提交操作获得，那我们就稍微扩展一下，用Form和Button把我们小程序页面中用户可以点击的部分全部包装起来，这样用户就可以在不感知表单提交操作的情况下获得大量的form ID。

注意，叠加的方式不能一次点击得到多个formId，所以方法不再起作用，得到的表单都会一样。

获取模板

要发送模板消息，首先在小程序的管理后台添加一个模板，如下所示：

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

2.选择显示参数

选择要在消息中显示的参数，并在此选择以下两个参数：

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

获取formId

通过提交表单获得formId。为了获得足够的表单，可点击的组件(如按钮、列表单元.)可以包裹在表单中，这样用户在日常使用中就可以收集到足够多的form id。这里有一个包装漂亮纽扣的例子。由于小程序的限制，设置表单类型属性的按钮必须是表单组件的直接子节点，因此无法在表单中使用自定义组件，也无法将表单类型='submit '设置到自定义组件中。

模板部分如下：

！-要获取formId，需要为表单设置report-submit='true '的属性，然后点击form-type='submit '的按钮，会触发表单提交- formSubmit的事件。然后获取表单id-form @ submit=' form submit ' 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 style=' border 33600；display : inline-block ' plain=' true ' form-type=' submit ' @ click=' watch game ' van-button round type=' danger ' size=' small ' { { watch text } }/van-button/button style=' border 33600；display : inline-block ' plain=' true ' form-type=' submit ' open-type=' share ' van-button round type=' info ' size=' small ' share/van-button/button/form style的目的是去掉原按钮的背景和边框，将按钮作为div，然后在按钮中设置form-type并点击属性，不会影响formId的属性，也不会对原逻辑产生任何影响。之所以将click放在button上，是因为button内部的组件无法获得click事件。

表单提交代码如下：

formSubmit(e){ let item={ value : e . MP . detail . formid，expiretime : date . now()(7 * 24 * 60 * 60 * 1000 }；this . global data . formidlist . push(项)；}，在表单提交时触发，用于获取formId，并将formId和该formId的到期时间保存到globalData中。然后找机会将这些表单发送到服务器并保存它们。

我把我的做法放在这里供参考。

每次发送http请求，都会检查是否有需要发送到服务器的formId。如果有的话，我将数据序列化为JSON，并将其放在一个自定义的头中，然后发送出去。具体代码如下(http请求工具是flyio):

var Fly=required(' Fly io/dist/NPM/wx ')；var Fly=new Fly()；//fly . interceptors . request . use(request={ request . headers[' jwt-token ']=wxutil . getglobaldata(' jwt-token '))在请求预处理中；//如果有formId，放在表头，发送给let formidlest=getapp()。global data . formillet；if(formIdList . length 0){ request . headers[' formIdList ']=JSON . stringify(formIdList)；getApp()。} if(request . method==' GET '){ request . params[' _ t ']=new Date()。getTime()；}退货请求；});以下后台实现基于Spring Boot。

后台处理

收集formId

首先，我们需要收集formId并将其保存在数据库中。然后我们需要检查每个请求，看看头部是否携带了formId。如果是这样，我们需要将其保存在数据库中。注意与用户的通信。用户点击生成的formId只能用于向该用户推送消息。

因为我想将表单绑定到用户，所以我在身份验证过滤器中处理表单。认证成功后，我处理表单。代码如下：

/** * Description:从请求头获取formIdList。并插入数据库* * @param request请求头* @ return void * @ authorfanxb * @ date 2019/5/6 16:39 */private void check form id(http servlet请求请求){ String str=request.getHeader(常量。HEADER _ FORM _ ID)；if(StrIngutil . isempty(str)){ return；} ListFormKey formkey list=JSON . parsearray(str，formkey . class)；//UserContextHolder用户将当前线程绑定到用户，方便以后获取用户信息。int userid=usercontextholder . get()。getuser()。getuserid()；formkey list . foreach(item-item . setuserid(userId))；this . formkey Dao . insertmany(formkey list)；}发送微信提醒

通过官方文件，我们可以知道发送消息的过程如下：

1获取accessToken，这是大多数调用微信的接口所需要的。这是通过appId和secret获得的。详见：https://developers . weixin . QQ.com/mini program/dev/API-后端/auth.getaccessoken.html

2.调用微信发送服务通知界面。这个界面文档点击并跳转到：

发送的最终http请求如下：

URL : https://API . weixin . QQ.com/CGI-bin/message/wxopen/template/send？access _ token=access token method :上面获得的帖子

请求体的格式为：application/JSON；字符集=utf-8

Body:{ 'touser': '用户的openId '，' template_id':' template id '，' page': '点击跳转小程序的url路径'，' form_id': '收集的formId '，' Data ' : { ' Keyword 1 ' : { ' Value ' : '您有消息' }，' Keyword 2 ' : { ' Value ' 33: '

目标

项目的全部源代码在这里：github

摘要

以上就是边肖介绍的小程序中推送模板消息的实现方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！