后浪云|香港服务器

后浪云百度小程序教程：form 表单

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

    form 表单

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

    属性说明

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

    report-type 有效值

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

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

    1. 当 template-id 为 String 时（基础库 3.105.3 开始支持），event.detail 的 formId 为 String ，即此 template-id 所对应的的 formId 。举例如下：

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <form report-submit="true" report-type="subscribe" template-id="BD0001" subscribe-id="1234" bindsubmit="formSubmit">
      2. 
  
  
  
    2.  <button formType="submit" type="primary">template-id 为 String</button>
      3. 
  
  
  
    3. </form>
      4. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  formSubmit(e) {
      3. 
  
  
  
    3.  // 此时 formId 为 'BD0001-formId'（非真实数据）
      4. 
  
  
  
    4.  swan.showModal({
      5. 
  
  
  
    5.  title: 'template-id 为 string',
      6. 
  
  
  
    6.  content: e.detail.formId
      7. 
  
  
  
    7.  });
      8. 
  
  
  
    8.  }
      9. 
  
  
  
    9. });
      10.

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

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1235" bindsubmit="formSubmit">
      2. 
  
  
  
    2.  <button formType="submit" type="primary">template-id 为 Array</button>
      3. 
  
  
  
    3. </form>
      4. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  templateId: ['BD0001', 'BD0002']
      4. 
  
  
  
    4.  },
      5. 
  
  
  
    5.  formSubmit(e) {
      6. 
  
  
  
    6.  // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）
      7. 
  
  
  
    7.  swan.showModal({
      8. 
  
  
  
    8.  title: 'template-id 为 Array',
      9. 
  
  
  
    9.  content: JSON.stringify(e.detail.formId)
      10. 
  
  
  
    10.  });
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. });
      13.

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

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1236" bindsubmit="formSubmit">
      2. 
  
  
  
    2.  <button formType="submit" type="primary">template-id 超过三个</button>
      3. 
  
  
  
    3. </form>
      4. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  templateId: ['BD0001', 'BD0002', 'BD0003', 'BD0004']
      4. 
  
  
  
    4.  },
      5. 
  
  
  
    5.  formSubmit(e) {
      6. 
  
  
  
    6.  // 此时 formId 为 ''
      7. 
  
  
  
    7.  swan.showModal({
      8. 
  
  
  
    8.  title: 'template-id 超过三个',
      9. 
  
  
  
    9.  content: e.detail.formId
      10. 
  
  
  
    10.  });
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. });
      13.

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

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1237" bindsubmit="formSubmit">
      2. 
  
  
  
    2.  <button formType="submit" type="primary">有重复的 template-id</button>
      3. 
  
  
  
    3. </form>
      4. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  templateId: ['BD0001', 'BD0001', 'BD0002']
      4. 
  
  
  
    4.  },
      5. 
  
  
  
    5.  formSubmit(e) {
      6. 
  
  
  
    6.  // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）
      7. 
  
  
  
    7.  swan.showModal({
      8. 
  
  
  
    8.  title: '有重复的 template-id',
      9. 
  
  
  
    9.  content: JSON.stringify(e.detail.formId)
      10. 
  
  
  
    10.  });
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. });
      13.

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

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

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

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

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：普通表单

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

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <form
      3. 
  
  
  
    3.  report-submit
      4. 
  
  
  
    4.  report-type="subscribe"
      5. 
  
  
  
    5.  template-id="BD0003"
      6. 
  
  
  
    6.  subscribe-id="8026"
      7. 
  
  
  
    7.  bindsubmit="reportFormSubmit"
      8. 
  
  
  
    8.  bindreset="reportFormReset">
      9. 
  
  
  
    9.  <view class="card-area">
      10. 
  
  
  
    10.  <view class="top-description border-bottom">report-type为subscribe</view>
      11. 
  
  
  
    11.  <button formType="submit" type="primary">点击触发</button>
      12. 
  
  
  
    12.  </view>
      13. 
  
  
  
    13.  </form>
      14. 
  
  
  
    14.  <form
      15. 
  
  
  
    15.  report-submit
      16. 
  
  
  
    16.  report-type="default"
      17. 
  
  
  
    17.  bindsubmit="reportFormSubmit"
      18. 
  
  
  
    18.  bindreset="reportFormReset">
      19. 
  
  
  
    19.  <view class="card-area">
      20. 
  
  
  
    20.  <view class="top-description border-bottom">report-type为default</view>
      21. 
  
  
  
    21.  <button formType="submit" type="primary">点击触发</button>
      22. 
  
  
  
    22.  </view>
      23. 
  
  
  
    23.  </form>
      24. 
  
  
  
    24.  <button type="primary" class="middle-btn" open-type="login" bindlogin="login">登录</button>
      25. 
  
  
  
    25. </view>
      26. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  onLoad() {
      3. 
  
  
  
    3.  swan.showToast({
      4. 
  
  
  
    4.  title: '此组件需要登录态，请先点击下方的按钮登录',
      5. 
  
  
  
    5.  icon: 'none'
      6. 
  
  
  
    6.  })
      7. 
  
  
  
    7.  },
      8. 
  
  
  
    8.  login(e) {
      9. 
  
  
  
    9.  // 此组件需要在登陆态下使用
      10. 
  
  
  
    10.  console.log('登录信息:', e);
      11. 
  
  
  
    11.  if (e.detail.errCode === '10004') {
      12. 
  
  
  
    12.  swan.showToast({
      13. 
  
  
  
    13.  title: '用户未登录',
      14. 
  
  
  
    14.  icon: 'none'
      15. 
  
  
  
    15.  });
      16. 
  
  
  
    16.  return;
      17. 
  
  
  
    17.  }
      18. 
  
  
  
    18.  swan.showToast({
      19. 
  
  
  
    19.  title: '用户登录成功',
      20. 
  
  
  
    20.  icon: 'none'
      21. 
  
  
  
    21.  });
      22. 
  
  
  
    22.  },
      23. 
  
  
  
    23.  formSubmit(e) {
      24. 
  
  
  
    24.  swan.showModal({
      25. 
  
  
  
    25.  title: '表单数据',
      26. 
  
  
  
    26.  content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),
      27. 
  
  
  
    27.  confirmText: '确定',
      28. 
  
  
  
    28.  showCancel: false
      29. 
  
  
  
    29.  });
      30. 
  
  
  
    30.  }
      31. 
  
  
  
    31. });
      32.
    版权声明：
    作者：后浪云
    链接：https://idc.net/help/186137/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    相关推荐
    后浪云小程序云教程：云开发 云开发能力
    后浪云Knockout教程：第十章：更多信息（完结篇）
    后浪云Flutter教程：Flutter 布局方法
    后浪云小程序云教程：云开发 HTTP处理
    后浪云小程序云教程：云开发 CloudBase CLI
    后浪云UNI-APP教程：其他项目转 uni-app
    后浪云小程序云教程：云开发 链接与图片
    后浪云SDK教程：第九章 Manifest文件
    后浪云React教程：在设备上运行(Android)
    后浪云百度小程序教程：grid 宫格
    后浪云百度小程序教程：CanvasContext.setMiterLimit
    后浪云小程序教程：微信小程序API 视频解码器·VideoDecoder实例
    后浪云小程序教程：微信小程序 WeUI·导航组件
    后浪云百度小程序教程：CanvasContext.lineTo
    后浪云百度小程序教程：二维码短链
    后浪云小程序教程：微信小程序云开发 API云函数
    友情链接：USA VPSVPS.DO
    Copyright © 2008 - 2026 IDC.Net 版权所有
    Internet Data Corporation | 网络数据集团（美国）