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

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

src/
 ponents/
  formId/
   index.js
   index.scss

/
  封装FormId组件，以提供向服务端发送formId的功能
 /
import Taro, { Component } from '@tarojs/taro'
import { View, Form } from '@tarojs/ponents'
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;
  : 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/ponents'
import FormId from '../../ponents/formId'

export default class Index extends Component {
 render () {
  return (
   <View className="index">
    {/ 调用FormId组件