百度智能小程序 表單

form 表單

解釋：表單，將 form 組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。當(dāng)點(diǎn)擊<form/>表單中 form-type 為 submit 的<button/>組件時(shí)，會將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key 。
Web 態(tài)說明：由于瀏覽器的限制，在 Web 態(tài)下部分系統(tǒng)信息無法獲取，故暫不支持表單類、訂閱類模板消息。

屬性說明

report-type 有效值

report-type 為 subscribe 時(shí)，event.detail.formId 說明

1. 當(dāng) template-id 為 String 時(shí)（基礎(chǔ)庫 3.105.3 開始支持），event.detail 的 formId 為 String ，即此 template-id 所對應(yīng)的的 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) {
           // 此時(shí) formId 為 'BD0001-formId'（非真實(shí)數(shù)據(jù)）
           swan.showModal({
               title: 'template-id 為 string',
               content: e.detail.formId
           });
       }
   });

2. 當(dāng) template-id 為 Array 時(shí)（基礎(chǔ)庫 3.170.1 開始支持），event.detail 的 formId 為 Object ，其中對象的 key 為 template-id ，value 為其對應(yīng)的 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) {
           // 此時(shí) formId 為 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真實(shí)數(shù)據(jù)）
           swan.showModal({
               title: 'template-id 為 Array',
               content: JSON.stringify(e.detail.formId)
           });
       }
   });

如果 Array 中的 template-id 超過三個(gè)，返回的 formId 為空字符串，舉例如下

<form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1236" bindsubmit="formSubmit">
    <button formType="submit" type="primary">template-id 超過三個(gè)</button>
</form>

Page({
    data: {
        templateId: ['BD0001', 'BD0002', 'BD0003', 'BD0004']
    },
    formSubmit(e) {
        // 此時(shí) formId 為 ''
        swan.showModal({
            title: 'template-id 超過三個(gè)',
            content: e.detail.formId
        });
    }
});

如果 Array 中有重復(fù)的 template-id ，重復(fù)的 template-id 對應(yīng)的 formId 只返回一次，舉例如下：

<form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1237" bindsubmit="formSubmit">
    <button formType="submit" type="primary">有重復(fù)的 template-id</button>
</form>

Page({
    data: {
        templateId: ['BD0001', 'BD0001', 'BD0002']
    },
    formSubmit(e) {
        // 此時(shí) formId 為 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真實(shí)數(shù)據(jù)）
        swan.showModal({
            title: '有重復(fù)的 template-id',
            content: JSON.stringify(e.detail.formId)
        });
    }
});

注意：在提交 form 表單時(shí)，將會彈出模板消息授權(quán)彈窗，用戶授權(quán)后才能在 event.detail 中獲取被授權(quán)模板消息的 formId 。

report-type 為 subscribe 時(shí)，status 和 message 具體值

status 為 Number 類型，message 為 String 類型，當(dāng)用戶永久拒絕授權(quán)的時(shí)候，建議開發(fā)者不要再展示訂閱消息授權(quán)面板入口。

示例 

在開發(fā)者工具中打開

代碼示例：普通表單

<view class="wrap">
    <form bindsubmit="formSubmit"
        bindreset="formReset">
        <view class="card-area">
            <view class="top-description border-bottom">開關(guān)選擇器</view>
            <view class="item-scroll">
                <text class="switch-text">開關(guān)</text>
                <switch></switch>
            </view>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">單項(xiàng)選擇器</view>
            <radio-group name="radio-group">
                <radio class="block border-bottom" value="radio1">單選項(xiàng)一</radio>
                <radio class="block" value="radio2">單選項(xiàng)二</radio>
            </radio-group>
        </view>
        <view class="card-area">
            <view class="top-description border-bottom">多項(xiàng)選擇器</view>
            <checkbox-group name="checkbox">
                <label class="block border-bottom">
                    <checkbox value="checkbox1">多選項(xiàng)一</checkbox>
                </label>
                <label class="block border-bottom">
                    <checkbox value="checkbox2">多選項(xiàng)二</checkbox>
                </label> 
                <label class="block">
                    <checkbox value="checkbox2">多選項(xiàng)三</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="請?jiān)诖溯斎? />
        </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({
    formSubmit(e) {
        console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value);
        swan.showModal({
            content: '數(shù)據(jù)：' + JSON.stringify(e.detail.value),
            confirmText: '確定'
        });
    },
    formReset(e) {
        console.log('form表單發(fā)生了', e.type);
    }
});

參考示例

參考示例 1：模板類型表單 

在開發(fā)者工具中打開

<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>
    </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>
    </form>
</view>

Page({
    onLoad() {
        // 此組件需要在登錄態(tài)下使用
        swan.login()
    },
    formSubmit(e) {
        swan.showModal({
            title: '表單數(shù)據(jù)',
            content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
            confirmText: '確定',
            showCancel: false
        });  
    }
});