uni-app UI框架用法介绍

1. 简介

uni-app是由DCloud推出的一个基于Vue.js的前端开发框架，可以同时开发出微信小程序、H5、安卓App、iOS App等多端应用。在uni-app中，使用UI框架可以极大地提升开发效率和用户体验。本文将详细介绍uni-app中常用的UI框架及其用法。

2. Vant UI框架

Vant是一套优秀的移动端组件库，在uni-app中使用Vant可以快速构建出漂亮的界面。下面将介绍Vant框架的安装和使用。

2.1 安装Vant

首先，需要使用npm安装Vant组件库，可以通过以下命令完成安装：

npm install vant

2.2 引入Vant

在uni-app的项目中，可以通过两种方式引入Vant。一种是全局引入，另一种是按需引入。

2.2.1 全局引入

在uni-app的入口文件中（main.js），添加以下代码：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

通过全局引入，可以在所有页面中直接使用Vant组件。

2.2.2 按需引入

如果只需要使用部分Vant的组件，可以按需引入，以减小项目的体积。首先，在需要使用Vant的页面中使用import导入需要的组件，例如：

import { Button, Cell, Toast } from 'vant';

export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [Toast.name]: Toast
  }
}

然后，在该页面的template中即可使用这些组件。

2.3 Vant的常用组件示例

2.3.1 Button 按钮

Button组件是Vant中最基础也是最常用的组件之一，通过设置不同的属性，可以实现不同样式的按钮。例如，在template中添加以下代码：

<template>
  <button type="primary">按钮</button>
  <button type="info">按钮</button>
  <button type="danger">按钮</button>
</template>

以上代码将显示三个不同样式的按钮。

2.3.2 Cell 单元格

Cell组件可以用于列表，展示一行一列的数据。以下是一个使用Cell组件的示例：

<template>
  <div class="list">
    <cell title="姓名" value="张三"></cell>
    <cell title="年龄" value="20"></cell>
    <cell title="性别" value="男"></cell>
  </div>
</template>

以上代码将显示一个包含姓名、年龄和性别信息的列表。

2.3.3 Toast 轻提示

Toast组件是一种轻量级的消息提示框，用于在页面中显示简短的提示信息。以下是一个使用Toast组件的示例：

Toast('操作成功');

以上代码将在页面中弹出一个显示”操作成功”的提示框。

3. ColorUI框架

ColorUI是一款基于Vue.js的UI组件库，设计简洁、易用且风格统一。下面将介绍ColorUI框架的安装和使用。

3.1 安装ColorUI

使用npm安装ColorUI，执行以下命令进行安装：

npm install colorui-uniapp

3.2 引入ColorUI

在需要使用ColorUI的页面，首先在style标签中引入ColorUI的样式文件：

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

然后，在script标签中引入ColorUI的组件：

import cuCustom from '@/colorui/components/cu-custom.vue';

export default {
  components: {
    cuCustom
  }
}

3.3 ColorUI的常用组件示例

3.3.1 cu-custom 导航栏

cu-custom是ColorUI中的导航栏组件，可以自定义背景颜色和图标。以下是一个使用cu-custom的示例：

<template>
  <cu-custom bgColor="bg-red">
    <block slot="backText">返回</block>
    <block slot="content">导航栏标题</block>
    <block slot="bgIcon">home</block>
  </cu-custom>
</template>

以上代码将显示一个红色背景的导航栏，左侧有返回按钮，中间显示”导航栏标题”，右侧有一个home图标。

3.3.2 cu-calendar 日历

cu-calendar是ColorUI中的日历组件，用于展示日期和实现日期选择。以下是一个使用cu-calendar的示例：

<template>
  <cu-calendar @select="handleSelect"></cu-calendar>
</template>

<script>
export default {
  methods: {
    handleSelect(date) {
      console.log('选中日期：', date);
    }
  }
}
</script>

以上代码将在页面中显示一个日历，当选择日期时，会调用handleSelect方法，并打印选中的日期。