【小程序】引入Ui组件库

引入weui组件库

这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的扩展组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

方法1

通过 useExtendedLib 扩展库 的方式引入，可省略 import 样式文件步骤。这种方式引入的组件将不会计入代码包大小。（推荐）

step1

在页面的 json 文件加入 usingComponents 配置字段。为了方便使用，我在app.json全部引入。

{
  "usingComponents": {
    "mp-badge": "weui-miniprogram/badge/badge",
    "mp-gallery": "weui-miniprogram/gallery/gallery",
    "mp-loading": "weui-miniprogram/loading/loading",
    "mp-icon": "weui-miniprogram/icon/icon",
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
    "mp-slideview": "weui-miniprogram/slideview/slideview",
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-dialog": "weui-miniprogram/dialog/dialog",
    "mp-msg": "weui-miniprogram/msg/msg",
    "mp-toptips": "weui-miniprogram/toptips/toptips",
    "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog",
    "mp-actionSheet": "weui-miniprogram/actionsheet/actionsheet",
    "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar",
    "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  }
}

step2

然后可以在对应页面的 wxml 中直接使用组件。

修改组件内部样式

每个组件可以设置ext-class这个属性，该属性提供设置在组件WXML顶部元素的class，组件的addGlobalClass的options都设置为true，所以可以在页面设置wxss样式来覆盖组件的内部样式。需要注意的是，如果要覆盖组件内部样式，必须wxss的样式选择器的优先级比组件内部样式优先级高。 addGlobalClass在基础库2.2.3开始支持。

表单使用指南

链接：https://www.bookstack.cn/read/WeUI-Simple-Guide/components-form.md