创新互联百度小程序教程：form表单

form 表单
- 属性说明
  - report-type 有效值
  - report-type 为 subscribe 时，event.detail.formId 说明
  - report-type 为 subscribe 时，status 和 message 具体值
- 示例
  - 代码示例 1：普通表单
  - 代码示例 2：模板类型表单

form 表单

解释：表单，将 form 组件内用户输入 / 选择的、、、、、提交。当

属性名	类型	默认值	必填	说明	最低版本
report-submit	Boolean	false	否	是否返回 formId 用于发送模板消息（工具上 formId 为`‘’`，请在真机上测试），订阅消息详细说明请参考订阅消息接入	1.12 低版本请做兼容性处理
report-type	String	‘default’	否	模板消息的类型，report-submit 为 true 时填写有效取值：default / subscribe	3.105.3 低版本请做兼容性处理
template-id	String/Array.		否（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 事件	-

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

表单中 form-type 为 submit 时，点击的

 
 
 
  
  
  Page({
  
  
   formSubmit(e) {
  
  
   // 此时 formId 为 'BD0001-formId'（非真实数据）
  
  
   swan.showModal({
  
  
   title: 'template-id 为 string',
  
  
   content: e.detail.formId
  
  
   });
  
  
   }
  
  
  });

2. 当 template-id 为 Array 时（基础库 3.170.1 开始支持），event.detail 的 formId 为 Object ，其中对象的 key 为 template-id ，value 为其对应的 formId 。举例如下：

SWAN
JS

 
 
 
  
  
  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 为空字符串，举例如下：

SWAN
JS

 
 
 
  
  
  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 只返回一次，举例如下：

SWAN
JS

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：普通表单

SWAN
JS

 
 
 
  
  
  
  
  
   

  
  
   bindreset="formReset">
  
  
   
  
  
   开关选择器
  
  
   
  
  
   开关
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   单项选择器
  
  
   
  
  
   单选项一
  
  
   单选项二
  
  
   
  
  
   
  
  
   
  
  
   多项选择器
  
  
   
  
  
   
  
  
   多选项一
  
  
   
  
  
   
  
  
   多选项二
  
  
    
  
  
   
  
  
   多选项三
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   滑块选择器
  
  
   
  
  
   
  
  
   
  
  
   输入框
  
  
   
  
  
   
  
  
   
  
  
   提交表单


 
 
 
  
  
  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);
  
  
   }
  
  
  });
 
 
 
代码示例 2：模板类型表单
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开
SWAN
JS
 
 
 
  
  
  
  
  
   

  
  
   report-submit
  
  
   report-type="subscribe"
  
  
   template-id="BD0003"
  
  
   subscribe-id="8026"
  
  
   bindsubmit="reportFormSubmit"
  
  
   bindreset="reportFormReset">
  
  
   
  
  
   report-type为subscribe
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   report-submit
  
  
   report-type="default"
  
  
   bindsubmit="reportFormSubmit"
  
  
   bindreset="reportFormReset">
  
  
   
  
  
   report-type为default
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
 
 
 

 
 
 
  
  
  Page({
  
  
   onLoad() {
  
  
   swan.showToast({
  
  
   title: '此组件需要登录态，请先点击下方的按钮登录',
  
  
   icon: 'none'
  
  
   })
  
  
   },
  
  
   login(e) {
  
  
   // 此组件需要在登陆态下使用
  
  
   console.log('登录信息:', e);
  
  
   if (e.detail.errCode === '10004') {
  
  
   swan.showToast({
  
  
   title: '用户未登录',
  
  
   icon: 'none'
  
  
   });
  
  
   return;
  
  
   }
  
  
   swan.showToast({
  
  
   title: '用户登录成功',
  
  
   icon: 'none'
  
  
   });
  
  
   },
  
  
   formSubmit(e) {
  
  
   swan.showModal({
  
  
   title: '表单数据',
  
  
   content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
  
  
   confirmText: '确定',
  
  
   showCancel: false
  
  
   });
  
  
   }
  
  
  });
 
 
 
            

            文章题目：创新互联百度小程序教程：form表单            

            浏览路径：http://www.cdxtjz.cn/article/dhgspjo.html


    
        其他资讯
        
            
                    海外轻量级服务器租用怎么管理
                

                    不用备案虚拟空间怎么做301跳转
                

                    主根服务器是什么？（13根域名服务器）
                

                    SAP数据库表：解读企业数据，优化管理流程(sap数据库表)
                

                    windows7升级ie浏览器吗?（win7升级ie浏览器步骤)

创新互联百度小程序教程：form表单

form 表单

属性说明

report-type 有效值

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

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

示例

代码示例 1：普通表单

代码示例 2：模板类型表单

其他资讯