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

    网站建设、网络推广公司-成都快上网，一家网站设计、网站制作公司；服务项目有等

    广告

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

    成都快上网科技猜您喜欢

    python知识

    行业网站建设

    关键词排名优化　　 　成都企业网站建设　　 　中国电信成都枢纽中心　　 　成都SEO公司　　 　软文推广公司　　 　成都网站建设　　 　双流做网站　　 　电信成都枢纽中心　　 　成都网站设计　　 　梓潼网站建设　　 　IDC机房托管　　 　机柜租用　　 　免备案空间　　 　酒柜书柜鞋柜定制　　 　奢侈品网站建设方案　　 　无边发光字厂家　　 　钢筋机械设备　　 　成都托管服务器　　 　成都圣月窗帘　　 　成都宣传画册设计