组件使用入门教程

Text组件

Text 是文本组件，用于包裹文本内容。相当于 html 中的 span 标签。text组件官方文档

<view><text>宇宙山河烂漫，生活点滴温暖</text></view>
<view><text selectable="true">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="ensp">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="emsp">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="nbsp" style="font-size: 30px;">宇宙  山河烂漫，生活  点滴温暖</text></view>
1
2
3
4
5

运行在 H5 的效果：

可以看到第二行是可以选中的

view组件

view组件官方文档

view 相当于 html 中的 div

<template>
	<view>
		<view class="box2" hover-class="box2-active">
			<view class="box" hover-class="box-active">这是一个盒子view>
		view>
	view>
template>

<script>
script>

<style>
	.box {
		width: 100px;
		height: 100px;
		background: skyblue;
	}
	.box-active {
		background: royalblue;
	}
	.box2{
		width: 200px;
		height: 200px;
		background: pink;
	}
	.box2-active {
		background: hotpink;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

box-active指定按下去的样式类
hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态，如图所示，我们点击小盒子 box1，外边的大盒子 box2 颜色也变了，如果想阻止这种冒泡，就可以增加这个属性

<view class="box" hover-class="box-active" hover-stop-propagation="true">这是一个盒子view>
1

再看效果

hover-start-time按住后多久出现点击态，单位毫秒，类型是数字
hover-stay-time手指松开后点击态保留时间，单位毫秒，类型是数字
我们来看下这两个属性的效果，由于这两个属性类型是数字，所以我们需要在前边增加:

<view class="box" hover-class="box-active" hover-stop-propagation="true"
			:hover-start-time="2000" :hover-stay-time="3000">这是一个盒子view>
1
2

可以看到我鼠标点了以后，并没有立刻改变颜色，而是2s后才触发改变颜色；鼠标离开后，颜色也没有立刻消失，而是3s后才消失

button组件

button组件官方文档

		<button>按钮button>
		<button size="mini">按钮button>
		<button type="primary">按钮button>
		<button type="warn">按钮button>
		<button plain="true">按钮button>
		<button disabled="true">按钮button>
		<button loading>按钮button>
1
2
3
4
5
6
7

image组件

image组件官方文档

<view style="background: pink;"><image src="/static/wudi.png">image>view>
		
<view style="background: hotpink;"><image src="/static/wudi.png" mode="aspectFit">image>view>
		
<view style="background: deeppink;"><image src="/static/wudi.png" mode="aspectFill">image>view>
	
1
2
3
4
5
6

给 image 外增加一个 view 并设置背景色，可以清楚的看到 mode 取值不同时，图片的展示情况：aspectFit保持纵横比缩放图片，使长边完全展示，aspectFill保持纵横比缩放图片，使短边完全展示

样式学习

css支持官方文档

rpx

uni-app 支持的通用 css 单位包括 px、rpx。rpx 之前没有用过，这里主要学习它， rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位

模拟机我们选择 iPhone6/7/8（设备宽高为375x667，可以理解为设备独立像素或css像素），dpr 为 2，即 1 个css像素相当于 2 个物理像素，所以物理像素就应该×2，为 750×1334

所以给 view 设置样式宽高为 750rpx 时会占满屏幕

<template>
	<view class="box">
	view>
template>

<script>
script>

<style>
	.box {
		width: 750rpx;
		height: 750rpx;
		background: pink;
	}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

给 view 设置样式宽高为 375rpx 时会占满屏幕一半

import

@import语句可以导入外联样式表

例如我们在 static 下新增一个 a.css

view{
	background: red;
}
1
2
3

在页面中引入

<style>
	@import url("@/static/a.css");
	.box {
		width: 750rpx;
		height: 750rpx;
	}
style>
1
2
3
4
5
6
7

这样 view 的背景色就变成红色了

字体图标

字体图标官方文档

首先下载。我们先在 iconfont 搜索到所需图片，然后添加到购物车，然后点击右上角购物车，点击下载代码（浏览器如果缩放太大，可能只看到两个按钮哦，调整下缩放）

下载的 zip 文件解压后有如下文件：

复制 iconfont.css 和 iconfont.ttf 到项目的 static 目录下。由于字体文件的引用路径推荐使用以~@开头的绝对路径，所以我们修改 iconfont.css 中 iconfont.ttf 路径如下：

然后在 App.vue 中引入 iconfont.css

<style>
	/*每个页面公共css */
	@import url(static/iconfont.css);
style>
1
2
3
4

然后在页面中使用

<view class="iconfont icon-charutupian">view>
1

这样图片就显示出来了

scss使用

首先需要安装插件。HBuilder 菜单栏：工具——插件安装，找到 scss/sass 编译 插件进行安装

这样就可以使用 scss 了，uni.scss 中的变量我们可以直接使用

例如我们设置 view 背景颜色为 uni-color-success

运行程序，view 背景颜色即为变量颜色