后浪云百度小程序教程：使用组件注意事项

2023-8-27
  • 使用组件注意事项
    • button 组件
    • label 组件
    • 常见问题
      • Q：为什么 label 组件不支持绑定 input 组件和 textarea 组件？
  • switch 组件
  • textarea组件
  • 表单校验
  • 组合能力示例

    使用组件注意事项

    在使用小程序组件的时候，有一些开发实现的问题需要被注意。

    button 组件

    为了处理移动端的 1px 问题，默认类型的 button 组件在设置边框样式时使用了伪类。
    场景：需要设置 button 边框样式覆盖默认样式。
    解决方法：开发者可以通过伪类设置样式来覆盖默认的边框样式。

    代码示例

    • SWAN
    • CSS
     
 
 
      
  
  
  
    1. <button type="default" class="btn">
      2. 
  
  
  
    2.  按钮 default
      3. 
  
  
  
    3. </button>
      4. 
 
 
 
     
 
 
      
  
  
  
    1. .btn {
      2. 
  
  
  
    2.  position: absolute;
      3. 
  
  
  
    3.  top: 50px;
      4. 
  
  
  
    4. }
      5. 
  
  
  
    5. .btn:after {
      6. 
  
  
  
    6.  border: 1px solid #f00;
      7. 
  
  
  
    7. }
      8.

    label 组件

    label 组件使用 for 属性找到对应的 ID（必须写 for），当点击时，就会触发对应的控件。目前可以绑定的控件有：button、checkbox、radio、switch 。
    场景：button/checkbox/radio/switch 组件较小的时候，可点击区域变小，导致用户体验不好。
    解决方法：使用 label 组件包裹，通过控制 label 组件的宽高，可以扩大控制热区。
    后浪云百度小程序教程：使用组件注意事项插图

    代码示例

    • SWAN
    • CSS
     
 
 
      
  
  
  
    1. <label class="label border-bottom">
      2. 
  
  
  
    2.  <checkbox/>
      3. 
  
  
  
    3.  <text>智能小程序</text>
      4. 
  
  
  
    4. </label>
      5. 
 
 
 
     
 
 
      
  
  
  
    1. .label {
      2. 
  
  
  
    2.  display: block;
      3. 
  
  
  
    3.  padding: .2rem;
      4. 
  
  
  
    4. }
      5.

    常见问题

    Q：为什么 label 组件不支持绑定 input 组件和 textarea 组件？

    A：这是因为为了提供更加丰富的功能和更接近于原生的体验，input 和 textarea 是通过原生组件的形式实现的，关于原生组件具体可以参考原生组件说明，而 label 是非原生组件，因此暂时不支持绑定 input 组件和 textarea 组件。

    switch 组件

    switch 组件默认大小为 38px * 23px ，但不能通过设置 width 和 height 进行调整。
    场景：开发者想调整 switch 组件的大小，直接设置 width 和 height 没有效果。
    解决方法：可以通过 CSS scale 缩放进行设置。

    代码示例

    • CSS
     
 
 
      
  
  
  
    1. swan-switch {
      2. 
  
  
  
    2.  /* 通过缩放调整大小 */
      3. 
  
  
  
    3.  transform: scale(.5);
      4. 
  
  
  
    4.  /* 图标宽度并不会改变 */
      5. 
  
  
  
    5.  /* width: 1.1rem; */
      6. 
  
  
  
    6. }
      7.

    textarea组件

    textarea 的 blur 事件会晚于页面上的 tap 事件。
    场景：有一个表单（textarea + button），获取表单内容用的是 bindblur 事件。因为 textarea 的 blur 事件会晚于页面上的 tap 事件，所以输入内容后立即点击 button 是不能获得数据的。
    解决方法：可以使用 form 的 bindsubmit 。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <view class="card-area">
      2. 
  
  
  
    2.  <form bindsubmit='bindFormsubmit'>
      3. 
  
  
  
    3.  <textarea maxlength="-1" placeholder="please enter..." name="textarea" />
      4. 
  
  
  
    4.  <button form-type='submit' type="primary">提交</button>
      5. 
  
  
  
    5.  </form>
      6. 
  
  
  
    6. </view>
      7. 
 
 
 
     
 
 
      
  
  
  
    1. bindFormsubmit(e) {
      2. 
  
  
  
    2.  console.log(e.detail.value.textarea)
      3. 
  
  
  
    3. }
      4.

    表单校验

    合理使用校验逻辑对表单的填写更友好。
    场景：填写 form 表单时做校验。
    解决方法：先初始化表单校验规则，由 bindblur 事件触发自定义校验方法，进行校验。

    代码示例

    • JSON
    • SWAN
    • JS
     
 
 
      
  
  
  
    1. // 1. 在 data 里初始化表单项数据，并定义校验的正则表达式，例如校验电话：
      2. 
  
  
  
    2. // （value: 对应的输入值； rulse：校验规则； errorInfo: 校验失败的提示信息；）
      3. 
  
  
  
    3. model: {
      4. 
  
  
  
    4.  phone: {
      5. 
  
  
  
    5.  value: '', 
      6. 
  
  
  
    6.  rulse: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
      7. 
  
  
  
    7.  errorInfo: {
      8. 
  
  
  
    8.  errFlag: false,
      9. 
  
  
  
    9.  errContent: '请输入有效的手机号'
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12. }
      13. 
 
 
 
     
 
 
      
  
  
  
      2. 
  
  
  
    2. <!-- 2. 绑定 bindblur 事件触发自定义校验方法 -->
      3. 
  
  
  
    3. <input data-id="phone" bindblur="bindBlur" />
      4. 
 
 
 
     
 
 
      
  
  
  
    1. bindBlur(e) {
      2. 
  
  
  
    2.  let value = e.detail.value;
      3. 
  
  
  
    3.  let id = e.currentTarget.dataset.id;
      4. 
  
  
  
    4.  let rulse = this.data.model[id].rulse;
      5. 
  
  
  
    5.  this.validate(rulse, value, id);
      6. 
  
  
  
    6. },
      7. 
  
  
  
      8. 
  
  
  
    8. // 3. 写一个自定义校验方法，验证正则
      9. 
  
  
  
    9. validate(rulse, value, id) {
      10. 
  
  
  
    10.  let tes = new RegExp(rulse)
      11. 
  
  
  
    11.  // 校验通过
      12. 
  
  
  
    12.  // ...
      13. 
  
  
  
    13.  // 校验未通过，显示错误信息
      14. 
  
  
  
    14.  // ...
      15. 
  
  
  
    15. }
      16.

    组合能力示例

    智能小程序，还提供了许多组合能力示例，例如查询类服务表单模板、办理类服务（单流程）表单模板、办理类服务（多流程）表单模板。模板内包含的组件丰富，覆盖大多数查询类服务项场景，并且有完整的校验规则，示例和源代码请参考对应的组合能力示例模板。

    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186847/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图