使用组件注意事项

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

button 组件

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

代码示例

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

label 组件

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

代码示例

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

常见问题

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.     /* 通过缩放调整大小 */
  3.     transform: scale(.5);
  4.     /* 图标宽度并不会改变 */
  5.     /* width: 1.1rem; */
  6. }

textarea组件

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

代码示例

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

表单校验

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

代码示例

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

组合能力示例

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