form 表单

解释:表单,将 form 组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。当点击<form/>表单中 form-type 为 submit 的<button/>组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

# 属性说明

属性名 类型 默认值 必填 说明 最低版本
report-submit Boolean false 是否返回formId用于发送模板消息 (工具上formId为'',请在真机上测试)。 1.12
低版本请做兼容性处理
report-type String 'default' 模板消息的类型,report-submit 为 true 时填写有效。
取值:default 或 subscribe。
3.105.3
低版本请做兼容性处理
template-id String/Array.<string> report-type 为 subscribe 时必填,发送订阅类模板消息所用的模板库标题ID,可通过getTemplateLibraryList获取。
当参数类型为 Array 时,可传递1~3个模板库标题ID。
3.105.3(String 类型)
3.170.1(Array 类型)
低版本请做兼容性处理
subscribe-id String report-type 为 subscribe 时必填,发送订阅类模板消息时所使用的唯一标识符,内容由开发者自定义,用来标识订阅场景
注意:同一用户在同一 subscribe-id 下的多次授权不累积下发权限,只能下发一条。若要订阅多条,需要不同 subscribe-id
3.105.3
低版本请做兼容性处理
bindsubmit EventHandle 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'}, formId: '', message: '', status: ''}, 当report-type 为 subscribe 时,status 和 message 中返回用户授权具体信息。 -
bindreset EventHandle 表单重置时会触发 reset 事件 -

# report-type 有效值

说明
default 表单类模板消息
subscribe 订阅类模板消息,需要用户授权才可发送

# report-type 为 subscribe 时,event.detail.formId 说明

  1. 当 template-id 为 String 时(基础库 3.105.3 开始支持),event.detail 的 formId 为 String,即此 template-id 所对应的的 formId。举例如下:
    <form report-submit="true" report-type="subscribe" template-id="BD0001" subscribe-id="1234" bindsubmit="formSubmit">
        <button formType="submit" type="primary">template-id 为 String</button>
    </form>
    
    Page({
        formSubmit(e) {
            // 此时 formId 为 'BD0001-formId'(非真实数据)
            swan.showModal({
                title: 'template-id 为 string',
                content: e.detail.formId
            });
        }
    });
    
    1. 当 template-id 为 Array 时(基础库 3.170.1 开始支持),event.detail 的 formId 为 Object,其中对象的 key 为 template-id,value 为其对应的 formId。举例如下:
      <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1235" bindsubmit="formSubmit">
          <button formType="submit" type="primary">template-id 为 Array</button>
      </form>
      
      Page({
          data: {
              templateId: ['BD0001', 'BD0002']
          },
          formSubmit(e) {
              // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}(非真实数据)
              swan.showModal({
                  title: 'template-id 为 Array',
                  content: JSON.stringify(e.detail.formId)
              });
          }
      });
      

      如果 Array 中的 template-id 超过三个,返回的 formId 为空字符串,举例如下:

        <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1236" bindsubmit="formSubmit">
            <button formType="submit" type="primary">template-id 超过三个</button>
        </form>
        
        Page({
            data: {
                templateId: ['BD0001', 'BD0002', 'BD0003', 'BD0004']
            },
            formSubmit(e) {
                // 此时 formId 为 ''
                swan.showModal({
                    title: 'template-id 超过三个',
                    content: e.detail.formId
                });
            }
        });
        

        如果 Array 中有重复的 template-id,重复的 template-id 对应的 formId 只返回一次,举例如下:

          <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1237" bindsubmit="formSubmit">
              <button formType="submit" type="primary">有重复的 template-id</button>
          </form>
          
          Page({
              data: {
                  templateId: ['BD0001', 'BD0001', 'BD0002']
              },
              formSubmit(e) {
                  // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}(非真实数据)
                  swan.showModal({
                      title: '有重复的 template-id',
                      content: JSON.stringify(e.detail.formId)
                  });
              }
          });
          

          注意:在提交 form 表单时,将会弹出模板消息授权弹窗,用户授权后才能在 event.detail 中获取被授权模板消息的 formId。

          # report-type 为 subscribe 时,status 和 message 具体值

          status 为 Number 类型,message 为 String 类型,当用户永久拒绝授权的时候,建议开发者不要再展示订阅消息授权面板入口。

          status message
          500101 用户永久拒绝授权
          500102 用户单次拒绝授权
          500103 用户取消授权
          500104 请求模板内容失败
          500105 请求formId失败

          # 示例

          在开发者工具中预览效果

          # 扫码体验

          请使用百度APP扫码

          # 代码示例 : 普通表单

            <view class="wrap">
                <form bindsubmit="formSubmit"
                    bindreset="formReset">
                    <view class="card-area">
                        <view class="top-description border-bottom">开关选择器</view>
                        <view class="item-scroll">
                            <text class="switch-text">开关</text>
                            <switch></switch>
                        </view>
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">单项选择器</view>
                        <radio-group name="radio-group">
                            <radio class="block border-bottom" value="radio1">单选项一</radio>
                            <radio class="block" value="radio2">单选项二</radio>
                        </radio-group>
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">多项选择器</view>
                        <checkbox-group name="checkbox">
                            <label class="block border-bottom">
                                <checkbox value="checkbox1">多选项一</checkbox>
                            </label>
                            <label class="block border-bottom">
                                <checkbox value="checkbox2">多选项二</checkbox>
                            </label> 
                            <label class="block">
                                <checkbox value="checkbox2">多选项三</checkbox>
                            </label>
                        </checkbox-group>
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">滑块选择器</view>
                        <slider class="slider" activeColor="#3388FF" block-size="20" name="slider"></slider>
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">输入框</view>
                        <input name="input" class="ipt" placeholder="请在此输入" />
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">提交表单</view>
                        <button formType="submit" type="primary">提交</button>
                        <button formType="reset">清空</button>
                    </view>
                </form>
            </view>
            
            Page({
                data: {},
                formSubmit(e) {
                    console.log('form发生了submit事件,携带数据为:', e.detail.value);
                    swan.showModal({
                        content: '数据:' + JSON.stringify(e.detail.value),
                        confirmText: '确定'
                    });
                },
                formReset(e) {
                    console.log('form表单发生了', e.type);
                }
            });
            
            

            # 参考示例

            # 参考示例 1: 模板类型表单

            在开发者工具中预览效果

              <view class="wrap">
                  <form report-submit="{{true}}" report-type="subscribe" template-id="BD0003" subscribe-id="8026" bindsubmit="formSubmit"
                      bindreset="formReset">
                          <button formType="submit" type="primary">report-type为subscribe</button>
                      </view>
                  </form>
              </view>
              
              <view class="wrap">
                  <form report-submit="{{true}}" report-type="default" bindsubmit="formSubmit"
                      bindreset="formReset">
                          <button formType="submit" type="primary">report-type为default</button>
                      </view>
                  </form>
              </view>
              
              Page({
                  onLoad() {
                      // 此组件需要在登录  态下使用
                      swan.login()
                  },
                  formSubmit(e) {
                      swan.showModal({
                          title: '表单数据',
                          content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
                          confirmText: '确定',
                          showCancel: false
                      });  
                  }
              });
              

              # 参考示例 2: 获取 getTemplateLibraryList 示例

              在开发者工具中预览效果

                <view class="wrap">
                    <view class="card-area">
                        <view class="top-description border-bottom">点击获取Access Token</view>
                        <button bind:tap="AccessToken" type="primary" hover-stop-propagation="true">button</button>
                    </view>
                    <view class="card-area">
                        <view class="top-description border-bottom">点击获取getTemplateLibraryList
                </view>
                        <button bind:tap="getTemplateLibraryList" type="primary" hover-stop-propagation="true">button</button>
                    </view>
                </view>
                
                Page({
                    data: {
                        access_token: ''
                    },
                    AccessToken() {
                        swan.request({
                            url: 'https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=WPGsbTTGEQ2VRnNcEIjyo5nT1wGxc3PZ&client_secret=zkDSFBfXvHtmtMAsNrQ8sFN9DNLFNZE4&scope=smartapp_snsapi_base',
                            method: 'POST',
                            success: res => {
                                console.log('request success', res);
                                console.log('access_token', res.data.access_token);
                                this.setData('access_token', res.data.access_token)
                                swan.showModal({
                                    title: '请求到的数据',
                                    content: JSON.stringify(res.data.data),
                                    showCancel: false
                                });
                            },
                            fail: err => {
                                console.log('request fail', err);
                            }
                        });
                    },
                    getTemplateLibraryList() {
                        let access_token = this.getData('access_token');
                        console.log(access_token)
                        swan.request({
                            url: 'https://openapi.baidu.com/rest/2.0/smartapp/template/librarylist?access_token=24.2bd968d94d25bba71157b82890e97422.2592000.1578037913.282335-11136662&offset=2&count=2',
                            method: 'POST',
                            success: res => {
                                console.log('request success', res);
                            },
                            fail: err => {
                                console.log('request fail', err);
                            }
                        });
                    }
                });