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


Posted in Javascript onJuly 15, 2019

前言

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

看图说话:

下发模板消息效果图

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

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

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

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

  • 用户必须与小程序发生了页面的交互行为,如支付、提交表单
  • 支付会产生一个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功能模块封装实践

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

src/
 components/
  formId/
   index.js
   index.scss

src/components/formId/index.js

/**
 * 封装FormId组件,以提供向服务端发送formId的功能
 */
import Taro, { Component } from '@tarojs/taro'
import { View, Form } from '@tarojs/components'
import './index.scss'

export default class FormId extends Component {
 constructor (props) {
  super(props)
 }
 /**
  * formSubmit()
  * @description 提交formId到后端服务器
  * @param {*} e event对象
  */
 formSubmit (e) {
  // 打印在控制台
  console.log('formId:', e.detail.formId)
  // 模态框展示
  Taro.showModal({
   title: 'formId',
   content: e.detail.formId,
   showCancel: false
  })
  /**
  * 注意: 
  * 实际封装中,直接将获取的formId发送到后端服务器即可,无需弹框提示、控制台打印,此处只是为了给小伙伴展示效果
  */ 
 }
 render () {
  let { children } = this.props
  return (
   <Form className="form" reportSubmit="true" onSubmit={this.formSubmit}>
    { children }
    <Button className="form-btn" formType="submit"></Button>
   </Form>
  )
 }
}

src/components/formId/index.scss

非常重要的问题:就是隐藏样式,让用户不可见、无感知,但实际确实存在的。

.form {
 position: relative;
 display: flex;
 .form-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  padding: 0;
  box-sizing: border-box;
  &::after {
   content: "";
   border: none;
  }
 }
}

src/pages/index/index.js 调用formId模块

在任意想使用formId的其他模块中引入,调用即可

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import FormId from '../../components/formId'

export default class Index extends Component {
 render () {
  return (
   <View className="index">
    {/* 调用FormId组件 */}
    <FormId>
     {/* 页面中任意元素 */}
     <Button>其他元素</Button>
    </FormId>
   </View>
  )
 }
}

效果图

获取formId效果图

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

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
微信小程序开发技巧汇总
Jul 15 #Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 #Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 #Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 #Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 #Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 #Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
在vscode中配置python环境过程解析
2019/09/28 Python
python import 上级目录的导入
2020/11/03 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
护士毕业自我鉴定
2014/02/07 职场文书