前段时间剁⼿了 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 plain="true" form-type="submit" @click="back">
<van-button round type="primary" size="small" @click="back">返回</van-button>
</button>
<button plain="true" form-type="submit" @click="watchGame">
网上冲印系统
<van-button round type="danger" size="small">{{watchText}}</van-button>
</button>
<button 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: w() + 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();
//在请求预处理中
quest.use(request => {
request.headers["jwt-token"] = GlobalData("jwt-token");
//如果有formId就放到header⾥送过去
let formIdList = getApp().globalData.formIdList;
if (formIdList.length > 0) {
request.headers["formIdList"] = JSON.stringify(formIdList);
道路bimgetApp().globalData.formIdList = [];
}
if (hod == "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 = Header(Constant.HEADER_FORM_ID);
if (StringUtil.isEmpty(str)) {
return;
}
List<FormKey> formKeyList = JSON.parseArray(str, FormKey.class);
//UserContextHolder⽤户将当前线程和⽤户绑定起来，⽅便后⾯获取⽤户信息
int userId = ().getUser().getUserId();
formKeyList.forEach(item -> item.setUserId(userId));
this.formKeyDao.insertMany(formKeyList);
}
发送提醒
通过官⽅⽂档可以知道发送消息的流程如下：
2 调⽤发送服务通知的接⼝.这个接⼝⽂档在:
最终发送的 http 请求是这样的：
请求体格式为：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 对应于模板中字段的顺序。
结束
⼯程全部源码在这⾥：
肥皂生产设备总结
以上所述是⼩编给⼤家介绍的在⼩程序中推送模板消息的实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议