UI框架

本页面收集了uni-app开发中常用的UI框架，帮助开发者快速构建美观、一致的用户界面。

官方UI框架

uni-ui

uni-ui是DCloud提供的一个跨端UI库，它是基于uni-app的扩展组件库，提供了一系列丰富的组件，可以帮助开发者快速构建功能完善、体验优良的应用。

特性	描述
组件数量	30+
兼容性	全端兼容
风格	现代简约
文档完善度	高
更新频率	高

安装方式

方式一：通过npm安装

bash

# 安装
npm install @dcloudio/uni-ui

# 配置easycom
// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

方式二：通过HBuilderX导入

在HBuilderX中点击"插件"→"插件市场"，搜索"uni-ui"，点击"安装"按钮。

组件列表

uni-ui提供了丰富的组件，包括：

基础组件：按钮、图标、徽标等
表单组件：输入框、单选框、复选框、日期选择器等
反馈组件：对话框、弹出层、通知栏等
导航组件：导航栏、标签栏、分段器等
布局组件：列表、网格、卡片等

示例代码

vue

<template>
  <view class="container">
    <uni-section title="基础用法" type="line">
      <uni-card title="标题" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
        <text>这是一个基本的卡片组件，包含标题、副标题、额外信息以及缩略图。</text>
      </uni-card>
    </uni-section>
    
    <uni-section title="按钮示例" type="line">
      <view class="button-group">
        <uni-button type="primary">主要按钮</uni-button>
        <uni-button type="success">成功按钮</uni-button>
        <uni-button type="warning">警告按钮</uni-button>
        <uni-button type="error">错误按钮</uni-button>
      </view>
    </uni-section>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style>
.container {
  padding: 15px;
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}
</style>

资源链接

第三方UI框架

uView UI

uView是uni-app生态最优秀的UI框架之一，全面的组件和便捷的工具会让您信手拈来，如鱼得水。

特性	描述
组件数量	60+
兼容性	全端兼容
风格	现代简约
文档完善度	高
更新频率	高

安装方式

方式一：通过npm安装

bash

# 安装uView 2.x版本
npm install uview-ui@2.0.31

# 配置
// main.js
import uView from 'uview-ui'
Vue.use(uView)

// uni.scss
@import 'uview-ui/theme.scss';

// App.vue
<style lang="scss">
@import "uview-ui/index.scss";
</style>

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    }
  }
}

方式二：通过HBuilderX导入

在HBuilderX中点击"插件"→"插件市场"，搜索"uView"，点击"安装"按钮。

组件列表

uView提供了丰富的组件，包括：

基础组件：按钮、图标、徽标等
表单组件：输入框、单选框、复选框、日期选择器等
数据组件：列表、表格、树形控件等
反馈组件：对话框、弹出层、通知栏等
布局组件：栅格、卡片、折叠面板等

示例代码

vue

<template>
  <view class="container">
    <u-navbar title="uView示例" :fixed="true" :autoBack="true"></u-navbar>
    
    <view class="content">
      <u-cell-group title="基础组件">
        <u-cell title="按钮" icon="photo" isLink @click="showButtons"></u-cell>
        <u-cell title="图标" icon="star" isLink @click="showIcons"></u-cell>
      </u-cell-group>
      
      <u-gap height="20"></u-gap>
      
      <u-card title="卡片标题" sub-title="副标题" thumb="https://cdn.uviewui.com/uview/example/tag.png">
        <text slot="body">uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水</text>
        <view slot="foot">
          <u-button type="primary" size="mini">查看详情</u-button>
        </view>
      </u-card>
    </view>
    
    <u-popup :show="showButtonsPopup" mode="bottom" @close="showButtonsPopup = false">
      <view class="popup-content">
        <u-button type="primary">主要按钮</u-button>
        <u-button type="success">成功按钮</u-button>
        <u-button type="warning">警告按钮</u-button>
        <u-button type="error">错误按钮</u-button>
      </view>
    </u-popup>
    
    <u-popup :show="showIconsPopup" mode="bottom" @close="showIconsPopup = false">
      <view class="popup-content">
        <view class="icon-group">
          <u-icon name="photo" size="40"></u-icon>
          <u-icon name="star" size="40"></u-icon>
          <u-icon name="heart" size="40"></u-icon>
          <u-icon name="setting" size="40"></u-icon>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showButtonsPopup: false,
      showIconsPopup: false
    }
  },
  methods: {
    showButtons() {
      this.showButtonsPopup = true;
    },
    showIcons() {
      this.showIconsPopup = true;
    }
  }
}
</script>

<style>
.container {
  padding-top: 44px;
}
.content {
  padding: 15px;
}
.popup-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.icon-group {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}
</style>

资源链接

ThorUI

ThorUI是一款轻量、简洁的移动端组件库，提供了丰富的组件和模板，帮助开发者快速搭建高质量的应用。

特性	描述
组件数量	70+
兼容性	全端兼容
风格	简约时尚
文档完善度	中高
更新频率	中高

安装方式

方式一：通过npm安装

bash

# 安装
npm install thorui-uni

# 配置
// main.js
import thorui from 'thorui-uni';
Vue.use(thorui);

// App.vue
<style lang="scss">
@import 'thorui-uni/lib/thorui/style/thorui.scss';
</style>

方式二：通过HBuilderX导入

在HBuilderX中点击"插件"→"插件市场"，搜索"ThorUI"，点击"安装"按钮。

组件列表

ThorUI提供了丰富的组件，包括：

基础组件：按钮、图标、徽标等
表单组件：输入框、单选框、复选框、日期选择器等
布局组件：栅格、卡片、折叠面板等
导航组件：标签栏、导航栏、侧边栏等
反馈组件：对话框、弹出层、通知栏等

示例代码

vue

<template>
  <view class="container">
    <tui-navigation-bar title="ThorUI示例" backgroundColor="#5677FC" color="#fff"></tui-navigation-bar>
    
    <view class="content">
      <tui-section title="基础组件"></tui-section>
      
      <view class="button-group">
        <tui-button type="primary">主要按钮</tui-button>
        <tui-button type="green">绿色按钮</tui-button>
        <tui-button type="warning">警告按钮</tui-button>
        <tui-button type="danger">危险按钮</tui-button>
      </view>
      
      <tui-section title="卡片组件"></tui-section>
      
      <tui-card title="卡片标题" tag="标签" thumb="https://thorui.cn/images/mall/1.jpg">
        <view slot="body">
          <text>ThorUI组件库，轻量、简洁的移动端组件库，组件丰富，功能齐全</text>
        </view>
        <view slot="footer">
          <tui-button type="primary" size="mini">查看详情</tui-button>
        </view>
      </tui-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style>
.container {
  padding-top: 44px;
}
.content {
  padding: 15px;
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 15px 0;
}
</style>

资源链接

Color UI

Color UI是一个纯CSS组件库，提供了丰富的颜色和组件，适合快速构建鲜明的界面。

特性	描述
组件数量	40+
兼容性	全端兼容
风格	鲜明多彩
文档完善度	中
更新频率	中

安装方式

方式一：通过npm安装

bash

# 安装
npm install color-ui

# 配置
// App.vue
<style>
@import "color-ui/style/color-ui.css";
</style>

方式二：直接下载引入

从GitHub下载源码，将colorui文件夹复制到项目根目录，然后在App.vue中引入样式：

vue

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
</style>

组件列表

Color UI提供了丰富的组件，包括：

基础组件：按钮、图标、徽标等
布局组件：栅格、卡片、列表等
导航组件：导航栏、标签栏、步骤条等
表单组件：输入框、单选框、复选框等
模态窗组件：对话框、弹出层等

示例代码

vue

<template>
  <view class="container">
    <view class="cu-custom" :style="[{height: CustomBar + 'px'}]">
      <view class="cu-bar fixed bg-gradual-blue" :style="[{height: CustomBar + 'px', paddingTop: StatusBar + 'px'}]">
        <view class="content" :style="[{top: StatusBar + 'px'}]">
          Color UI示例
        </view>
      </view>
    </view>
    
    <view class="cu-card">
      <view class="cu-item shadow">
        <view class="title">按钮示例</view>
        <view class="content padding-sm">
          <view class="padding-xs">
            <button class="cu-btn block bg-blue margin-tb-sm lg">蓝色按钮</button>
          </view>
          <view class="padding-xs">
            <button class="cu-btn block bg-red margin-tb-sm lg">红色按钮</button>
          </view>
          <view class="padding-xs">
            <button class="cu-btn block bg-green margin-tb-sm lg">绿色按钮</button>
          </view>
          <view class="padding-xs">
            <button class="cu-btn block bg-orange margin-tb-sm lg">橙色按钮</button>
          </view>
        </view>
      </view>
    </view>
    
    <view class="cu-card">
      <view class="cu-item shadow">
        <view class="title">列表示例</view>
        <view class="content">
          <view class="cu-list menu">
            <view class="cu-item">
              <view class="content">
                <text class="cuIcon-circlefill text-blue"></text>
                <text class="text-grey">列表项1</text>
              </view>
            </view>
            <view class="cu-item">
              <view class="content">
                <text class="cuIcon-circlefill text-red"></text>
                <text class="text-grey">列表项2</text>
              </view>
            </view>
            <view class="cu-item">
              <view class="content">
                <text class="cuIcon-circlefill text-green"></text>
                <text class="text-grey">列表项3</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar
    }
  },
  onLoad() {
    this.StatusBar = uni.getSystemInfoSync().statusBarHeight;
    this.CustomBar = this.StatusBar + 45;
  }
}
</script>

<style>
.container {
  padding-top: 100px;
  padding-bottom: 20px;
}
</style>

资源链接

FirstUI

FirstUI是一款轻量、简洁、易用的uni-app UI组件库，提供了丰富的组件和模板，帮助开发者快速搭建高质量的应用。

特性	描述
组件数量	70+
兼容性	全端兼容
风格	简约现代
文档完善度	高
更新频率	高

安装方式

方式一：通过npm安装

bash

# 安装
npm install firstui-uni

# 配置
// main.js
import firstui from 'firstui-uni';
Vue.use(firstui);

// App.vue
<style lang="scss">
@import 'firstui-uni/firstui.scss';
</style>

方式二：通过HBuilderX导入

在HBuilderX中点击"插件"→"插件市场"，搜索"FirstUI"，点击"安装"按钮。

组件列表

FirstUI提供了丰富的组件，包括：

基础组件：按钮、图标、徽标等
表单组件：输入框、单选框、复选框、日期选择器等
布局组件：栅格、卡片、折叠面板等
导航组件：标签栏、导航栏、侧边栏等
反馈组件：对话框、弹出层、通知栏等

示例代码

vue

<template>
  <view class="container">
    <fui-navbar title="FirstUI示例" :isFixed="true" background="#fff"></fui-navbar>
    
    <view class="content">
      <fui-section title="按钮组件" padding="0 32rpx"></fui-section>
      
      <view class="fui-btn__box">
        <fui-button type="primary" width="100%">主要按钮</fui-button>
        <fui-button type="success" width="100%">成功按钮</fui-button>
        <fui-button type="warning" width="100%">警告按钮</fui-button>
        <fui-button type="danger" width="100%">危险按钮</fui-button>
      </view>
      
      <fui-section title="卡片组件" padding="0 32rpx"></fui-section>
      
      <fui-card title="卡片标题" tag="标签" thumb="https://res.firstui.cn/static/images/common/logo.png">
        <view class="fui-card__content">
          FirstUI是一款轻量、简洁、易用的uni-app UI组件库，提供了丰富的组件和模板，帮助开发者快速搭建高质量的应用。
        </view>
        <view class="fui-card__footer">
          <fui-button type="primary" width="160rpx" height="64rpx">查看详情</fui-button>
        </view>
      </fui-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style>
.container {
  padding-top: 44px;
}
.content {
  padding: 15px;
}
.fui-btn__box {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}
.fui-card__content {
  padding: 32rpx;
  font-size: 28rpx;
  color: #333;
}
.fui-card__footer {
  padding: 20rpx 32rpx;
  display: flex;
  justify-content: flex-end;
}
</style>

资源链接

如何选择UI框架

选择标准

在选择UI框架时，可以考虑以下几个方面：

组件丰富度：框架提供的组件是否满足项目需求
兼容性：是否支持项目需要的所有平台
文档完善度：文档是否详细、清晰，有无示例代码
更新维护：框架是否持续更新维护
社区活跃度：是否有活跃的社区支持
性能表现：组件的性能和体验如何
设计风格：是否符合项目的设计风格
易用性：是否容易上手和使用

框架对比

框架	优点	缺点	适用场景
uni-ui	官方支持，兼容性好，文档完善	组件相对较少，设计风格固定	快速开发，需要官方支持的项目
uView	组件丰富，文档详细，社区活跃	体积较大，部分组件复杂	功能复杂的大型应用
ThorUI	组件丰富，设计美观	部分高级功能收费	注重UI设计的应用
Color UI	色彩丰富，纯CSS实现，轻量	文档相对简单，更新较慢	需要鲜明色彩的简单应用
FirstUI	组件丰富，性能优良	部分高级功能收费	注重性能和体验的应用

自定义主题

uni-ui主题定制

uni-ui支持通过CSS变量进行主题定制：

scss

/* 在App.vue的style标签中 */
:root {
  --uni-primary: #2979ff;
  --uni-success: #4cd964;
  --uni-warning: #f0ad4e;
  --uni-error: #dd524d;
  
  /* 文字颜色 */
  --uni-text-color: #333;
  --uni-text-color-inverse: #fff;
  --uni-text-color-grey: #999;
  
  /* 背景颜色 */
  --uni-bg-color: #ffffff;
  --uni-bg-color-grey: #f8f8f8;
  
  /* 边框颜色 */
  --uni-border-color: #e5e5e5;
}

uView主题定制

uView支持通过修改scss变量进行主题定制：

scss

/* 在uni.scss中 */
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;

$u-type-primary: #2979ff;
$u-type-primary-light: #ecf5ff;
$u-type-primary-disabled: #a0cfff;
$u-type-primary-dark: #2b85e4;

$u-type-warning: #ff9900;
$u-type-warning-light: #fdf6ec;
$u-type-warning-disabled: #fcbd71;
$u-type-warning-dark: #f29100;

$u-type-success: #19be6b;
$u-type-success-light: #dbf1e1;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;

$u-type-error: #fa3534;
$u-type-error-light: #fef0f0;
$u-type-error-disabled: #fab6b6;
$u-type-error-dark: #dd6161;

$u-type-info: #909399;
$u-type-info-light: #f4f4f5;
$u-type-info-disabled: #c8c9cc;
$u-type-info-dark: #82848a;

自定义组件封装

除了使用现有的UI框架，您还可以基于这些框架封装自己的组件，以满足特定的需求：

vue

<!-- 自定义按钮组件示例 -->
<template>
  <view class="custom-button">
    <u-button 
      :type="type" 
      :size="size" 
      :shape="shape" 
      :plain="plain" 
      :disabled="disabled" 
      :loading="loading" 
      :custom-style="customStyle"
      @click="onClick">
      <slot></slot>
    </u-button>
  </view>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'normal'
    },
    shape: {
      type: String,
      default: 'round'
    },
    plain: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    onClick(e) {
      if (!this.disabled && !this.loading) {
        this.$emit('click', e);
      }
    }
  }
}
</script>

<style scoped>
.custom-button {
  /* 自定义样式 */
}
</style>

最佳实践

UI框架使用技巧

按需引入：只引入需要的组件，减小打包体积
统一风格：在项目中保持一致的UI风格
主题定制：根据项目需求定制主题色和样式
组件封装：封装常用的业务组件，提高复用性
性能优化：注意组件的性能影响，避免过度使用复杂组件

常见问题解决

样式冲突：使用scoped或命名空间避免样式冲突
兼容性问题：关注组件的平台兼容性，必要时进行条件编译
性能问题：大型列表使用虚拟列表，避免过多组件同时渲染
主题切换：实现动态主题切换功能时，考虑使用CSS变量

常见问题

框架选择问题

问题：项目中应该使用一个还是多个UI框架？解答：建议主要使用一个框架，保持风格一致，必要时可以引入其他框架的个别组件。
问题：如何处理UI框架升级带来的兼容性问题？解答：关注更新日志，先在测试环境验证，使用语义化版本控制依赖。

使用问题

问题：如何解决组件样式无法覆盖的问题？解答：使用深度选择器（::v-deep或/deep/），或使用组件提供的自定义样式接口。
问题：如何优化使用UI框架的项目体积？解答：按需引入组件，使用tree-shaking，移除未使用的组件和样式。

UI框架 ​

目录 ​

官方UI框架 ​

uni-ui ​

安装方式 ​

组件列表 ​

示例代码 ​

资源链接 ​

第三方UI框架 ​

uView UI ​

安装方式 ​

组件列表 ​

示例代码 ​

资源链接 ​

ThorUI ​

安装方式 ​

组件列表 ​

示例代码 ​

资源链接 ​

Color UI ​

安装方式 ​

组件列表 ​

示例代码 ​

资源链接 ​

FirstUI ​

安装方式 ​

组件列表 ​

示例代码 ​

资源链接 ​

如何选择UI框架 ​

选择标准 ​

框架对比 ​

自定义主题 ​

uni-ui主题定制 ​

uView主题定制 ​

自定义组件封装 ​

最佳实践 ​

UI框架使用技巧 ​

常见问题解决 ​

常见问题 ​

框架选择问题 ​

使用问题 ​

资源链接 ​

UI框架

目录

官方UI框架

uni-ui

安装方式

组件列表

示例代码

资源链接

第三方UI框架

uView UI

安装方式

组件列表

示例代码

资源链接

ThorUI

安装方式

组件列表

示例代码

资源链接

Color UI

安装方式

组件列表

示例代码

资源链接

FirstUI

安装方式

组件列表

示例代码

资源链接

如何选择UI框架

选择标准

框架对比

自定义主题

uni-ui主题定制

uView主题定制

自定义组件封装

最佳实践

UI框架使用技巧

常见问题解决

常见问题

框架选择问题

使用问题

资源链接