Form表单组件

微信form表单组件的特殊属性:

  1. report-submit: 是否返回formId用于发送模板消息;

  2. bindsubmit:携带form的数据触发submit事件

event.detail = {
    value:{
        'name':'value',
        'forId':"formId"
    }
}
  1. bindreset: 表单重置时会触发reset事件

将表单组件放在form组件中,只需要在form组件的bindsubmit属性中编写事件函数即可获得表单中各组件的值。

<view class="content">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section">
      <view class="section_title">性别:</view>
      <radio-group name="sex">
        <label><radio value="male" checked/></label>
        <label><radio value="female" style="margin-left:20rpx;"/></label>
      </radio-group>
    </view>

    <view class="section" >
      <view class="section_title" >想去的国家</view>
      <checkbox-group class="region" name="region">
        <label class="checkbox" wx:for="{{regions}}">
          <checkbox value="{{item.name}}" checked="{{item.checked}}"/>
          {{item.value}}
        </label>
      </checkbox-group>
    </view>
    <view class="btn_area">
      <button formType="submit" type="primary">提交</button>
      <button formType="reset">重置</button>
    </view>
  </form>
</view>
  formSubmit: function(event) {
    console.log("提交表单");
    console.log(event.detail.value);
  },

运行后,form提交后的返回数据

{sex: "male", region: Array(3)}
region: (3) ["USA", "BRA", "CHN"]
sex: "male"

关于formId的使用

微信小程序给用户发送消息通知,必须利用微信提供的消息模板才能实现。
为了防止小程序乱发通知,微信规定只有两种方法可以给用户发送消息,一是用户支付后可以发送3条消息,二是页面发生一次提交表单(form)操作可以发送一次消息,而且期限是7天。
formid就用于区分识别消息与form之间的关联。
换个思路,要发送多次消息,可以通过收集formid实现。

Logo

鸿蒙生态一站式服务平台。

更多推荐