百度智能小程序表单

2020-09-01 10:50 更新

form 表单

解释：表单，将 form 组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。当点击<form/>表单中 form-type 为 submit 的<button/>组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key 。
Web 态说明：由于浏览器的限制，在 Web 态下部分系统信息无法获取，故暂不支持表单类、订阅类模板消息。

属性说明

属性名	类型	默认值	必填	说明	最低版本
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 有效值

值	说明		web 态说明
default	表单类模板消息		web 态不支持表单类模板消息， bindsubmit 回调参数中的 message 始终为"请求 formId 失败"， status 始终为 500105 。
subscribe	订阅类模板消息，需要用户授权才可发送		web 态不支持订阅类模板消息，不会弹窗提示授权。bindsubmit 回调参数中的 message 始终为"请求 formId 失败", status 始终为 500105 。

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

当 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
        });
    }
});

当 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 失败

示例

在开发者工具中打开

1597283766(1)

代码示例：普通表单

<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({
    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>
    </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() {
        // 此组件需要在登录态下使用
        swan.login()
    },
    formSubmit(e) {
        swan.showModal({
            title: '表单数据',
            content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
            confirmText: '确定',
            showCancel: false
        });  
    }
});

以上内容是否对您有帮助：

百度智能小程序 表单