weui 组件使用

TIP

在做小程序的项目中，我们经常会遇到要有一些 dialog 弹框，tips 提示组件等一些常用的功能，小程序的组件列表中并没有提供这些公用的组件。当然你可以选择使用小程序的基础组件去开发。更多的我们希望使用一些公共的，来提高我们的开发效率。很开心，小程序帮我们想到了这些，WEUI 组件库。下面我就怎么使用 WEUI 组件库写一下使用手册：

组件接入

官网有 2 中引入组件方式，我个人而言比较推荐按需加载方式：

1. 到下载组件页面下载自己所需的业务组件：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html；
2. 将下载下来的组件代码引入到小程序的 components 组件里，业务组件通过 componets 组件引入;

{
  "usingComponents": {
    "mp-dialog": "../../component/dialog/dialog"
  },
  "navigationBarTitleText": "车辆列表",
  "onReachBottomDistance": 150,
  "enablePullDownRefresh": true
}

3. 业务组件内去覆盖相关的样式（重要）：

   • 3.1 组件样式覆盖的原理：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

   • 3.2 weui 组件已经设置了 addGlobalClass:true 属性，表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面，不需要我们考虑了；

     Component({
       options: {
         styleIsolation: 'isolated'
       }
     });
     

   • 3.3 这样组件内的样式代码，业务页面和 app。wxss 就可以覆盖了，只是优先级要比组件的优先级要高，这样我们就能很好的使用扩展组件库了。

     <text class="red-text">
       这段文本的颜色由 `app.wxss` 和页面 `wxss` 中的样式定义来决定
     </text>