在小程序中收集FormId

收集 FormId 的原因

在小程序开发中，根据业务需求，我们需要通过我们的服务器向用户推送模板消息，但是发送一次模板消息就需要收集一条 formid
（例如：当你用户在你的小程序里面进行支付之后，形成一个订单，你需要通知用户的订单情况，这时就需要模板消息），根据小程的
官方文档，我们每次只能获取一条 formId，但是我们在真实的生产环境中，每次收集一条是无法满足我们的需求的，这时我们就需要
通过一些其他的方法来实现一次性收集更多的 formid ，以供我们可以给用户发送更多的模板消息次数。

formid
注：一个 formid 只能使用一次。
模板消息
注：登陆小程序后台管理平台，可以自己选择配置模板消息类型，如果有更多需求，可以自定义。

收集 FormId 说明

当点击 form 表单中 form-type 为 submit 的 button 组件时，form 中 report-submit 的属性为 true 时，我们
才能获取到一条 FormId （只有在真机中才会获取真实 FormId , 开发工具中获取的只是 undefind )。

formId 的期限只有 一周

一次收集一个

wxml:
<form report-submit='true' bindsubmit="handleCollect">
  <Button form-type='submit' />
</form>

js:
handleCollect = e => {
  let formId = e.detail.formId;
  // formId 就是我们要获取的
  // todo 将收集到的 formId 提交给后台，保存下来供做推送使用
}

一次收集多个

wxml:
<block>
  <label for='9'>
    <label for='8'>
      <label for='7'>
        <label for='6'>
          <label for='5'>
            <label for='4'>
              <label for='3'>
                <label for='2'>
                  <label for='1'>
                    <label for='0'>
                      <solt/>
                    </label>
                  </label>
                </label>
              </label>
            </label>
          </label>
        </label>
      </label>
    </label>
  </label>
  <block wx:for="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]" wx:key="{{item}}">
    <form key={i} report-submit bindsubmit="handleCollect">
      <button id="{{item}}" form-type='submit' />
    </form>
  </block>
</block>

js:
formIds = [];
handleCollect = e => {
  formIds = [...formIds, e.detail.formId];
  if (formIds.length === 10) {
    // todo 提交后台，一次性收集 10条

    formIds = [];
    // 一次收集完以后记得要清空，以便下次收集
  } 
}

Taro 自定义组件收集 FormId

export default class FormIdCollect extends Component {

  formIds = [];

  handleCollect = e => {
    this.formIds.push(e.detail.formId);
    if (this.formIds.length === 10) {
      // todo 提交后台，一次性收集 10条

      this.formIds = [];
      // 一次收集完以后记得要清空，以便下次收集
    }
  }
  render() {
    return (
      <Block>
        <Label for='button_9'>
          <Label for='button_8'>
            <Label for='button_7'>
              <Label for='button_6'>
                <Label for='button_5'>
                  <Label for='button_4'>
                    <Label for='button_3'>
                      <Label for='button_2'>
                        <Label for='button_1'>
                          <Label for='button_0'>
                            {this.props.children}
                          </Label>
                        </Label>
                      </Label>
                    </Label>
                  </Label>
                </Label>
              </Label>
            </Label>
          </Label>
        </Label>
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
          <Form key={i} reportSubmit onSubmit={this.handleCollect}>
            <Button id={`button_${i}`} formType='submit' />
          </Form>
        ))}
      </Block>
    )
  }
}

Taro开发文档

https://nervjs.github.io/taro/docs/README.html

多次收集实现原理

label

大家可以看到，label 的 n 次循环就是收集的条数，也就是说收集的条数和 label 有关系。

label 用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。