uni-app知识点整理（3）- 组件的基本使用、uni-app样式

JHY97

已于 2022-05-03 16:44:10 修改

阅读量1.8k

点赞数

分类专栏： uni-app框架笔记文章标签：前端 uni-app 前端框架

于 2022-05-02 07:30:00 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/124532222

版权

uni-app框架笔记专栏收录该内容

6 篇文章 3 订阅

订阅专栏

一、组件的基本使用

uni-app提供了丰富的基础组件给开发者，开发者可以组合各种组件拼接自己的应用uni-app应用中的组件，就像HTML中div、p、span等标签的作用一样，用于搭建页面的基础结构

1.1 text文本组件

uni-app官方文档 - text

text组件属性说明
属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选	App、H5、快手小程序
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

注意：decode目前App、H5、微信小程序默认是可以解码的
text组件相当于行内标签，在同一行显示
除了文本节点以外的其他节点都无法长按选中

space值说明
值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

Tips

<text>组件内只支持嵌套<text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。
在app-nvue下，只有<text>才能包裹文本内容。无法在<view>组件包裹文本。
decode 可以解析的有   < > & ' &ensp; &emsp;。
各个操作系统的空格标准并不一致。
除了文本节点以外的其他节点都无法长按选中。
支持 \n 方式换行。
如果使用<span>组件编译时会被转换为<text>。

1.1.1 案例练习

在detail.vue页面中使用text组件

detail.vue

<template>
	<view>
		<view>
			<text>Detail详情页</text>
		</view>
		<view>
			<text selectable>Detail    详情页</text>
		</view>
		<view>
			<text selectable space="emsp">Detail    详情页</text>
		</view>
		<view>
			<text selectable space="ensp">Detail    详情页</text>
		</view>
		<view>
			<text selectable space="nbsp" style="font-size: 20px;">Detail    详情页</text>
		</view>
		<view>
			<text selectable decode>&lt; &gt; &amp; &apos;</text>
		</view>
	</view>
</template>

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

由图示可看出：

第一行text组件未设置selectable属性因而文本为不可选的，而其他行文本为可选的
3，4，5行text组件各设置了不同的space值，因而呈现出不同的空格效果
最后一行text组件设置了decode

2.1 view组件

uni-app官方文档 - view

view 视图容器，类似于 HTML 中的 div

view属性说明
属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

2.1.1 案例练习

在detail.vue页面中使用view组件各个属性

detail.vue

<template>
	<view>
		<view class="box1" hover-class="box1-active">
			<view class="box2" hover-class="box2-active" :hover-start-time="1000" :hover-stay-time="1000" hover-stop-propagation>
				点击动态效果
			</view>
		</view>
	</view>
</template>

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

<style>
.box1{
	width: 200px;
	height: 200px;
	background-color: red;
}
.box2{
	width: 100px;
	height: 100px;
	background-color: skyblue;
}
.box1-active{
	background-color: orange;
}
.box2-active{
	background-color: greenyellow;
}
</style>

3.1 button按钮组件

uni-app官方文档 - button

3.1.1 简单案例练习

在detail.vue页面中使用button组件各个属性

detail.vue

<template>
	<view>
		<view>
			<button>默认按钮</button>
		</view>
		<view>
			<button size="mini">mini按钮</button>
		</view>
		<view>
			<button type="primary">primary按钮</button>
		</view>
		<view>
			<button disabled>禁用按钮</button>
		</view>
		<view>
			<button loading>带loading按钮</button>
		</view>
	</view>
</template>

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

4.1 image组件

uni-app官方文档 - image

Tips：

<image> 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度
src 仅支持相对路径、绝对路径，支持 base64 码
页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址。

二、uni-app样式

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会定比放大
使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式的相对路径，用 ; 表示语句结束
支持基本常用的选择器class、id、element等
在 uni-app 中不能使用 * 选择器
page 相当于 body 节点
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖App.vue中相同的选择器
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
- 字体文件小于40kb，uni-app会自动将其转化为base64格式
- 字体文件大于等于40kb，需开发者自己转换，否则使用将不生效
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

2.1 简单案例练习

在detail.vue页面中引入并使用字体图标

字体图标下载：阿里巴巴矢量图标库

选择自己的所需的图标，然后添加进项目中，之后下载项目即可
将下载完项目文件解压放入uni-app项目中static目录中

修改字体图标文件中 iconfont.css 中的引用路径

@font-face {
  font-family: "iconfont"; /* Project id 1680873 */
  // 引用路径推荐使用以 ~@ 开头的绝对路径
  src: url('~@/static/fonts/iconfont.woff2?t=1651420901071') format('woff2'),
       url('~@/static/fonts/iconfont.woff?t=1651420901071') format('woff'),
       url('~@/static/fonts/iconfont.ttf?t=1651420901071') format('truetype');
}

.....

在detail.vue页面中引入并使用字体图标

<template>
	<view>
		<view class="iconfont icon-daishouhuo"></view>
		<view class="iconfont icon-daituikuan"></view>
		<view class="iconfont icon-dingdan"></view>
		<view class="iconfont icon-fenlei"></view>
	</view>
</template>

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

<style>
@import url("../../static/fonts/iconfont.css");
</style>