title: form 表单 header: develop nav: component sidebar: formlist_form

webUrl: https://qft12m.smartapps.cn/component/form/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 否 report-type 为 subscribe 时必填，发送订阅类模板消息所用的模板库标题ID(例如：BD0001)，可通过getTemplateLibraryList获取，或在“开发者平台-运营中心-模板消息-模板库”浏览查找所需id 3.105.3

低版本请做兼容性处理
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时，status 和 message具体值

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

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

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/form/form - 图1 请使用百度APP扫码

代码示例 : 普通表单

:::codeTab

  1. <view class="wrap">
  2.     <form bindsubmit="formSubmit"
  3.         bindreset="formReset">
  4.         <view class="card-area">
  5.             <view class="top-description border-bottom">开关选择器</view>
  6.             <view class="item-scroll">
  7.                 <text class="switch-text">开关</text>
  8.                 <switch></switch>
  9.             </view>
  10.         </view>
  11.         <view class="card-area">
  12.             <view class="top-description border-bottom">单项选择器</view>
  13.             <radio-group name="radio-group">
  14.                 <radio class="block border-bottom" value="radio1">单选项一</radio>
  15.                 <radio class="block" value="radio2">单选项二</radio>
  16.             </radio-group>
  17.         </view>
  18.         <view class="card-area">
  19.             <view class="top-description border-bottom">多项选择器</view>
  20.             <checkbox-group name="checkbox">
  21.                 <label class="block border-bottom">
  22.                     <checkbox value="checkbox1">多选项一</checkbox>
  23.                 </label>
  24.                 <label class="block border-bottom">
  25.                     <checkbox value="checkbox2">多选项二</checkbox>
  26.                 </label> 
  27.                 <label class="block">
  28.                     <checkbox value="checkbox2">多选项三</checkbox>
  29.                 </label>
  30.             </checkbox-group>
  31.         </view>
  32.         <view class="card-area">
  33.             <view class="top-description border-bottom">滑块选择器</view>
  34.             <slider class="slider" activeColor="#3388FF" block-size="20" name="slider"></slider>
  35.         </view>
  36.         <view class="card-area">
  37.             <view class="top-description border-bottom">输入框</view>
  38.             <input name="input" class="ipt" placeholder="请在此输入" />
  39.         </view>
  40.         <view class="card-area">
  41.             <view class="top-description border-bottom">提交表单</view>
  42.             <button formType="submit" type="primary">提交</button>
  43.             <button formType="reset">清空</button>
  44.         </view>
  45.     </form>
  46. </view>
  1. Page({
  2.     data: {},
  3.     formSubmit: function(e) {
  4.         console.log('form发生了submit事件，携带数据为：', e.detail.value);
  5.         swan.showModal({
  6.             content: '数据：' + JSON.stringify(e.detail.value),
  7.             confirmText: '确定'
  8.         });
  9.     },
  10.     formReset: function() {
  11.         console.log('form表单reset');
  12.     }
  13. });

:::

参考示例

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

在开发者工具中预览效果

:::codeTab

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

:::

参考示例 2: 获取 getTemplateLibraryList 示例

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">点击获取Access Token</view>
  4.         <button bind:tap="AccessToken" type="primary" hover-stop-propagation="true">button</button>
  5.     </view>
  6.     <view class="card-area">
  7.         <view class="top-description border-bottom">点击获取getTemplateLibraryList
  8. </view>
  9.         <button bind:tap="getTemplateLibraryList" type="primary" hover-stop-propagation="true">button</button>
  10.     </view>
  11. </view>
  1. Page({
  2.     data: {
  3.         access_token: ''
  4.     },
  5.     AccessToken() {
  6.         swan.request({
  7.             url: 'https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=WPGsbTTGEQ2VRnNcEIjyo5nT1wGxc3PZ&client_secret=zkDSFBfXvHtmtMAsNrQ8sFN9DNLFNZE4&scope=smartapp_snsapi_base',
  8.             method: 'POST',
  9.             success: res => {
  10.                 console.log('request success', res);
  11.                 console.log('access_token', res.data.access_token);
  12.                 this.setData('access_token', res.data.access_token)
  13.                 swan.showModal({
  14.                     title: '请求到的数据',
  15.                     content: JSON.stringify(res.data.data),
  16.                     showCancel: false
  17.                 });
  18.             },
  19.             fail: err => {
  20.                 console.log('request fail', err);
  21.             }
  22.         });
  23.     },
  24.     getTemplateLibraryList() {
  25.         let access_token = this.getData('access_token');
  26.         console.log(access_token)
  27.         swan.request({
  28.             url: 'https://openapi.baidu.com/rest/2.0/smartapp/template/librarylist?access_token=24.2bd968d94d25bba71157b82890e97422.2592000.1578037913.282335-11136662&offset=2&count=2',
  29.             method: 'POST',
  30.             success: res => {
  31.                 console.log('request success', res);
  32.             },
  33.             fail: err => {
  34.                 console.log('request fail', err);
  35.             }
  36.         });
  37.     }
  38. });

:::