② uni-app 基本组件的使用（text、view、button、image）+ uni-app中的样式

阅读量：3964 次

发布时间：2019-05-24

本文共 3814 字，大约阅读时间需要 12 分钟。

uni-app

写下博客主要用来分享知识内容，便于自我复习和总结。

如有错误之处，望各位指出。

组件的基本使用

本文只介绍几个简单的基本组件及属性用法，熟悉了之后，想实现其他功能、使用其他组件都只需查看官方文档即可。文档里写的很全面，比我在这里复述要好的多。

text文本组件的用法

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	string	.	否	显示连续空格，可选参数：`ensp`、`emsp`、`nbsp`

text 组件相当于行内标签<span>、在同一行显示

除了文本节点以外的其他节点都无法长按选中

各个操作系统的空格标准并不一致

<text>组件内只支持嵌套<text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。

支持 \n 方式换行。

（注：虽然在uni-app中没有div、span等标签，但不代表我们就不能使用它们。就比如如果使用<div>，编译时会被转换为 <view>。那显然直接使用<view>，就减少编译时的转化时间。因此推荐直接使用uni-app组件）

在这里插入图片描述

view视图容器组件的用法

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

属性	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

其中，对于 hover-start-time 和 hover-stay-time ，如果没有学习过Vue，应该是很难理解，这里为什么要加：。所以，如果阅读到这里，自己还没学过Vue，建议先去学一些Vue的基础知识。可以参考我的专栏：。之后的文章里，将不再提醒Vue用法，也不会赘述相关功能。

button按钮组件的用法

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

在这里插入图片描述

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

open-type

对于button里，有一个十分关键的属性：open-type，它将决定程序开放能力。它有很多的有效值，在这里就以getUserInfo为例，以获取当前微信用户的信息。其他有效值可以参考官方文档。

（事件务必使用vue语法！）

（使用微信开发者工具噢！）

看一下效果：

当我们点击按钮的时候，它就会弹出授权窗口。如果未弹出，其实就是已经授权过了，可以清除一下授权缓存。

如果我们拒绝授权，输出结果是这样的：

我们对比一下就懂了，如果我们授权成功，输出结果是这样的：

此时我们就可以发现，授权成功后，输出结果中出现更多字段。userInfo里已经出现了我们的微信个人信息。userInfo里会有如下信息：nickName姓名、avatarUrl头像、gender性别、province省份、city城市、country国家。

在这部分，我们就可以用rawData是否存在来判断，该用户是否授权成功。

但是我们并不用这个userInfo来获取个人信息噢！wx还有个getUserInfo，它只有在用户已经授权的情况下才会调用。

上面这段代码到底怎么用？看一下这部分所有的代码应该就懂啦：

效果：

授权后：

image组件的使用

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式

<image> 组件默认宽度 300px、高度 225px；

src 仅支持相对路径、绝对路径，支持 base64 码；

页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

mode的有效值很多，演示代码建议建议参考官方文档：

uni-app中的样式

rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

演示：

从结果可以看到：750rpx是屏幕宽度（并且随着屏幕宽度变化而变化），同理375rpx就永远是屏幕宽度的一半。

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

演示：

view{
   	color: red;}

在这里插入图片描述

支持基本常用的选择器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'); }
```