创新互联百度小程序教程：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表单
    链接URL：http://www.gawzjz.com/qtweb2/news5/55.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    域名注册知识

    行业网站建设

    成都SEO优化　　 　电商网站建设　　 　成都小程序开发　　 　网站制作报价　　 　成都网络推广　　 　边坡柔性防护网　　 　百度关键词排名　　 　LED显示屏厂家　　 　重庆主机托管　　 　企业网站设计　　 　成都网站设计　　 　重庆网络营销　　 　网页设计制作　　 　广安园林绿化公司　　 　关键词优化　　 　成都网络营销公司　　 　八点广告　　 　西部信息中心　　 　宜宾网站设计　　 　成都网站制作