首页 > 热点 > 微信 > 正文

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

2024-07-22 01:17:58
字体:
来源:转载
供稿:网友

前言

在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:“基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。”

看图说话:

下发模板消息效果图

这无疑又给小程序提供了与用户进行通知、反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩:

模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面

那我们想通过小程序给用户发送模板消息需要怎么做呢?

用户必须与小程序发生了页面的交互行为,如支付、提交表单 支付会产生一个prepay_id的标记,提交表单会产生一个formId的标记 服务端根据prepay_id或formId来发送模板消息

无论是prepay_id还是formId都只有7天的有效期

那么问题来了?

如果用户在使用小程序的过程中,没有在7天内进行一些信息提交操作,或者是支付操作,那么我们就无法获取prepay_id,formId了,但是实际的业务上却需要给用户发送一些模板消息,已达到某些推广或通知的效果。prepay_id必须是支付的时候才能产生,这个无需多言。今天胡哥就给大家来介绍下,如何在小程序中尽可能的获取formId,以达到让服务端有尽可能多的formId来发送模板消息。

获取formId的原理

必须是form组件,并且需声明属性report-submit=",表示需要发送模板消息,同时监听bindsubmit事件; 必须在该form组件中,有button组件,同时该button组件需声明属性form-type="submit"。

上代码 --- 小程序原生代码演示

<form report-submit="true" bindSubmit="submitEvent"> <button open-type="submit">提交</button>  </form>

获取formId模块的封装

基于小程序获取formId的原理,我们可以变相考虑:

只要用户触发了符合特定条件的包含button组件的form组件的bindSubmit事件,就可以获取到formID; 同时借助CSS样式,我们可以将form组件和button组件设置成隐形的,不可见但确真实存在; 将隐形的button组件覆盖在真实的组件上,当点击真实组件时,实际上就触发了button的点击,同时用户是无感知的。

这里是重点,圈起来,一定会考的!

基于Taro的获取formId功能模块封装实践

设计独立的功能模块,以便供其他模块方便调用,项目目录结构

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表