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

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

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

/**
 * 封装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>
  )
 }
}

.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;
  }
 }
}

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>
  )
 }
}