基于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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
微信小程序开发技巧汇总
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
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
React中的refs的使用教程
2018/02/13 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python创建日历实例
2014/08/21 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python面向对象实现方法总结
2020/08/12 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
超市理货员岗位职责
2014/07/04 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
道歉短信大全
2015/05/12 职场文书
趣味运动会加油词
2015/07/18 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python