美图齐众专注资阳网站设计 资阳网站制作 资阳网站建设
资阳网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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

    form 表单

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

    表单中 form-type 为 submit 时，点击的 
    •  
 
 
      
  
  
  
    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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
      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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
      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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
      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 类型，当用户永久拒绝授权的时候，建议开发者不要再展示订阅消息授权面板入口。

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

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1：普通表单

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  bindreset="formReset">
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  开关选择器
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  开关
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  单项选择器
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  单选项一
      15. 
  
  
  
    15.  单选项二
      16. 
  
  
  
    16.  
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  多项选择器
      20. 
  
  
  
    20.  
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  多选项一
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
    25.  多选项二
      26. 
  
  
  
    26.   
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  多选项三
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      32. 
  
  
  
    32.  
      33. 
  
  
  
    33.  滑块选择器
      34. 
  
  
  
    34.  
      35. 
  
  
  
    35.  
      36. 
  
  
  
    36.  
      37. 
  
  
  
    37.  输入框
      38. 
  
  
  
    38.  
      39. 
  
  
  
    39.  
      40. 
  
  
  
    40.  
      41. 
  
  
  
    41.  提交表单
      42. 
  
  
  
    42.  
      43. 
  
  
  
    43.  
      44. 
  
  
  
    44.  
      45. 
  
  
  
    45.  
      46. 
  
  
  
      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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      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.  
      10. 
  
  
  
    10.  report-type为subscribe
      11. 
  
  
  
    11.  
      12. 
  
  
  
    12.  
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  report-submit
      16. 
  
  
  
    16.  report-type="default"
      17. 
  
  
  
    17.  bindsubmit="reportFormSubmit"
      18. 
  
  
  
    18.  bindreset="reportFormReset">
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  report-type为default
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
      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.

    文章名称：创新互联百度小程序教程：form表单
    标题链接：http://www.zsjierui.cn/article/dhgspjo.html

    其他资讯

    免费获取网站建设与品牌策划方案报价

    *主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上美图齐众。
    提交需求

      联系我们

      028-86922220
    • 手机：13518219792
    • 地址：成都市太升南路288号锦天国际A幢1002号
    • 24小时服务热线：028-86922220

      网站建设服务

    • 网页设计
    • 网站制作
    • 网站开发

      网站推广服务

    • 营销网站建设
    • 百度快速排名
    • 整站网站推广

      网站运维服务

    • 基础维护
    • 网站改版
    • 网站维护

      FOLLOW US

    • 微信二维码

      微信二维码

    友情链接： 手机app   成都家电公司   网站维护报价   成都橡塑保温板   成都喷绘制作   网站改版维护   xdwzjz.cn   成都网站建设流程   成都网站建设   czfdjzy.com   
    Copyright © 2025 资阳站青羊区美图齐众设计工作室（个体工商户） 资阳网站建设公司-选网站建设公司美图齐众！专业的网站制作公司！
    All Rights Reserved 版权所有 蜀ICP备2025119604号-1