爱站程序员基地uni-app中的组件，就像
HTML中的
div、
p、
span等标签的作用一样，用于搭建页面的基础结构
只介绍几个组件，其余可去官网查询
一、组件的基本使用
1.text文本组件的用法
text 组件的属性
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 |
| space | string | . | 否 | 显示连续空格，可选参数：
ensp 、 emsp 、 nbsp |
| decode | boolean | false | 否 | 是否解码 |
-
text
组件相当于行内标签、在同一行显示
- 除了文本节点以外的其他节点都无法长按选中
代码案例
<view><!-- 长按文本是否可选 --><text selectable=\'true\'>来了老弟</text></view><view><!-- 显示连续空格的方式 --><view><text space=\'ensp\'>来了 老弟</text></view><view><text space=\'emsp\'>来了 老弟</text></view><view><text space=\'nbsp\'>来了 老弟</text></view></view><view><text>skyblue</text></view><view><!-- 是否解码 --><text decode=\'true\'> < > & '    </text></view>
2.view视图容器组件的用法
View 视图容器， 类似于 HTML 中的 div
组件的属性
代码案例
<view class=\"box2\" hover-class=\"box2_active\"><view class=\'box1\' hover-class=\'active\' hover-stop-propagation :hover-start-time=\"2000\" :hover-stay-time=\'2000\'></view></view>
3.button按钮组件的用法
组件的属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 |
| type | String | default | 按钮的样式类型 |
| plain | Boolean | false | 按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否按钮 |
| loading | Boolean | false | 名称是否带 loading t图标 |
-
button
组件默认独占一行，设置
size
为
mini
时可以在一行显示多个
案例代码
<button size=\'mini\' type=\'primary\'>前端</button><button size=\'mini\' type=\'default\' disabled=\'true\'>前端</button><button size=\'mini\' type=\'warn\' loading=\'true\'>前端</button>
4.image组件的使用
image
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | String | 图片资源地址 | ||
| mode | String | ‘scaleToFill’ | 图片裁剪、缩放的模式 |
Tips
-
<image>
组件默认宽度 300px、高度 225px；
-
src
仅支持相对路径、绝对路径，支持 base64 码；
- 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform},可优化此问题。
二、样式
-
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， 需开发者自己转换，否则使用将不生效；
-
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
@font-face {font-family: test1-icon;src: url(\'~@/static/iconfont.ttf\');}
如何使用scss或者less
占坑：uni-app基础知识学习
【1】全局配置和页面配置
【2】组件的基本使用+样式
【3】数据绑定+事件+生命周期
【4】下拉刷新+上拉加载+网络请求
【5】上传图片、预览图片+跨域兼容+导航跳转
【6】组件的创建+组件通讯+uni-ui使用
