第四节：基础UI入门

#欢迎来到 uniappx 零基础入门课程。

这节课我将带你入门基础 UI。

什么是 UI？

UI 是英文（User Interface）的缩写，中文的标准翻译是“用户界面”。

我相信在看视频的每个人都是用户，当然也肯定见过用过“用户界面”。

现在大家用的都是 LCD 或 OLED 屏幕，界面细腻，操作流畅。但是在计算机刚刚发明出来的时候是没有显示器的，甚至连键盘鼠标都没有。很难想象，那时候人们是怎么操作计算机的。这里我们不去深究历史，现在你只需要在脑海里有这个疑问就可以。

人机交互的基本概念

怎么操作计算机，或者说怎么用计算机，我们称之为“人机交互”。顾名思义，就是人和计算机之间的交互。

“交互”有两个最基本的动作，那就是“输入”和“输出”。

我们通过大家最常用的用户界面来简单剖析一下：

• 上面这个界面大家应该都熟悉吧。
• 我们看到的屏幕中的内容，包括视频、头像，点赞收藏按钮这些，都是计算机系统的“输出”。
• 当你手指在屏幕上滑动，这就是你对计算机的“输入”。
• 通过 UI 的操作逻辑设计，这时界面输出的就是视频跟随手指滑动到了下一个，这就是一个简单的人机交互。

而人机交互是需要我们通过软件 UI 来实现的。

uniappx 中如何实现 UI？

在 uniappx 中，组件是 UI 的基本组成单元。

1. 什么是组件？

你可以简单把它理解为一个有一定功能和样式的盒子。这个盒子里面包含一定的 UI、样式、逻辑，并且可以在项目中的页面里进行调用，用法与上节课提到的“标记语言”用法一样。

2. 组件的组成部分

一个组件包括：

• 组件名称
• 开头和闭合标签
  
• 组件属性
• 组件属性值
  
• 组件事件
• 组件 vue 指令
• 组件文本内容
• 子组件

<view
	style="color:red;"  \\ 组件样式
	@click="change"     \\ 组件事件
	v-if="bool"         \\ 组件vue指令
>
	<view>子组件</view>
</view>

3. 组件用法示例

打开之前创建的项目，打开 index.uvue，先把页面清空。

键入一个 template 标签。
在 HBuilderX 中有很多偷懒的技巧，比如标签的输入，只需要输入“ut”，回车，template 标签就已经出现了。

输入以下代码

<template>
	<view style="font-size:100px;color:red;">123</view>
</template>

Ctrl + S保存后，点击运行到内置浏览器。如果运行成功，会显示以下效果。

下一节：CSS 的基本语法。

视频版