技术从第二段小程序开始,前言可以略过。
前言
微信小程序同微信公众号一样,也有模板消息发送功能,不一样的是公众号是直接通过公众号下发通知,而小程序的通知则是下发到了一个单独的对话框内——服务通知。 与微信公众号发送模板消息的另一个不同,就是小程序发送模板消息必须要带上formId这个参数才能发送。
formId,顾名思义,就是表单id,是在小程序页面表单提交的过程中可以获取到的一串数字或者随机英文字母数字的码,通过这种方式获取到的表单id可以给对应用户(表单提交人)发送一条模板消息。当然了,还考虑到商家对支付用户可能需要多次下发例如支付成功通知、发货通知、退款通知的这类通知,微信允许开发者在用户支付的过程中获取表单id(实际上是支付过程中的预支付码),通过此码,可以重复为用户下发最多3条的模板消息。
微信如今坐拥10亿日活,对普通用户体验真是操碎了心。对于模板消息引入formId的机制,极大程度上限制了商家通过推送消息来维护用户关系。但是不是所有应用场景都适合这个规则。
比如说用户使用某个小程序发布了一个百人报名活动。如果能实现有一个人报名,就向活动发起者发送一条报名通知,那就大大提高了工具的使用效率,不用发起人每次都打开小程序去看有多少人参与了报名。显然,当前的消息发送机制无法满足这个需求。
小程序端
- 构建formId 池,每次将用户提交的表单都搜集起来存入formId池,需要发送通知的时候从中取出即可。
- 将用户有可能点击的区域覆盖一层不可见的button,并将整个页面用于传输formId的button包裹在一Form标签内,一旦用户有点击按钮的操作,就将获取到的formId传送走。
下面是表单以及不可见按钮的wxml代码
<!--原有业务代码 --> <form bindsubmit="formSubmit_collect" report-submit="true"><!--原有业务代码 --> <button formType="submit" hover-class="none" class='invisibleclass'></button><!--原有业务代码 --> </form><!--原有业务代码 -->
下面是样式代码
.submit_kong_btn{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;}
下面是小程序js代码
Page({ formSubmit_collect: function(e) { let formId = e.detail.formId; dealFormIds(formId, url); console.log('form发生了submit事件,推送码为:',formId) }})function dealFormIds(formId,url='') { if(formId=='' || formId == 'undefined') { console.log('获取表单id为无效') return 0; } let data = { formid: formId, expiretime: parseInt(new Date().getTime() / 1000)+604800 //计算7天后的过期时间时间戳 } var formIds = []; formIds.push(data);//将data添加到数组的末尾 saveFormIds(formIds,url);formIds = JSON.stringify(formIds); var data = {formids:formIds,url:url}; //todo 向后端服务器传送表单id}
结尾
代码实现需求的过程并不复杂,在有些需要执行其他事件的地方即便被表单id收集的按钮覆盖,也不影响事件。但是值得一提的是在表单id传输的过程中如果在还没有获取到formid的时候就跳转走了,这样是获取不到formid。所以要在获取完表单id之后再做跳转事件,如果是在原有代码基础上修改,确实额外添加了一些工作量。