创新互联百度小程序教程：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.shufengxianlan.com/qtweb/news5/7105.html

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

    广告

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

    猜你还喜欢下面的内容

    定制开发知识

    同城分类信息

    营销型网站建设　　 　成都富士康招工　　 　旅游网站建设方案　　 　广汉锦华建材　　 　网站建设开发　　 　成都网站设计　　 　泸州网站建设　　 　网络推广　　 　企业网站制作　　 　资阳服务器托管　　 　电商网站建设　　 　四川盐亭做网站　　 　网站建设费用　　 　西部信息中心　　 　网站SEO优化　　 　成都企业网站设计　　 　全网整合营销　　 　成都网站建设　　 　重庆花箱　　 　网上商城管理系统