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

---

写下博客主要用来分享知识内容，便于自我复习和总结。
如有错误之处，望各位指出。

---

组件的基本使用

本文只介绍几个简单的基本组件及属性用法，熟悉了之后，想实现其他功能、使用其他组件都只需查看官方文档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组件）

<template>
	<view>
		<view>
			<!-- text相当于行内标签 -->
			<text>信息页</text>
			<text>信息页</text>
		</view>
		<!-- view相当于块状标签 -->
		<view>
			<!-- selectable：“长按”选中 -->
			<text selectable>信息页</text>
		</view>
		<view>
			<!-- space值：
			 ensp：中文字符空格一般大小
			 emsp：中文字符空格大小
			 nbsp：根据字体设置的空格大小
			 它会根据font-size变化
			 -->
			<text space="emsp" style="font-size: 18px;">信 息页</text>
		</view>
		<view>
			<text space="emsp" style="font-size: 25px;">信 息页</text>
		</view>
	</view>
</template>

---

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	手指松开后点击态保留时间，单位毫秒

<template>
	<view>
		<!-- hover-class：指定按下去的样式类 -->
		<view class="box2" hover-class="box2-active">
			<!-- hover-stop-propagation：阻止冒泡行为 -->
			<!-- hover-start-time：按住后多久出现点击态 -->
			<!-- hover-stay-time：手指松开后点击态保留时间 -->
			<view class="box" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box-active" hover-stop-propagation>信息页</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box{
		width: 100px;
		height: 100px;
		background-color: green;
	}
	.box-active{
		background-color: red;
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color: black;
	}
	.box2-active{
		background-color: pink;
	}
</style>

其中，对于 hover-start-time 和 hover-stay-time ，如果没有学习过Vue，应该是很难理解，这里为什么要加：。所以，如果阅读到这里，自己还没学过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 时可以在一行显示多个

<template>
	<view>
		<!-- type类型：primary default warn，对于primary不同平台展现的颜色可能不同 -->
		<button type="primary">按钮</button>
		<!-- size为mini时，可以在一行显示多个 -->
		<button size="mini">按钮1</button>
		<button size="mini">按钮2</button>
		<button type="primary" plain>按钮</button>
		<button type="primary" disabled>按钮</button>
		<button type="primary" loading></button>
	</view>
</template>

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

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

<template>
    <view>
        <navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
        <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
        <button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
    </view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                uni.navigateTo({
                    url:url
                })
            }
        }
    }
</script>

---

open-type

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

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

<template>
	<view>
		<button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
	</view>
</template>

<script>
	export default{
		data(){
			return {}
		},
		methods:{
			getUserInfo(data){
				console.log(data);
			}
		}
	}
</script>

<style>
</style>

看一下效果：

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

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

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

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

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

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

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

<template>
	<view class="container">
		<img v-if="isShow" :src="userInfo.avatarUrl" alt="头像">
		<button v-else type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户信息</button>
		<view v-if="isShow">hello {{userInfo.nickName}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userInfo: {},
				isShow: false // 用户没有授权
			}
		},
		methods:{
			getUserInfo(data){
				// 判断用户是否授权
				if(data.mp.detail.rawData){
					// 用户授权
					this.handelGetUserInfo();
				}
			},
			handelGetUserInfo(){
				wx.getUserInfo({
					success: (data) => {
						console.log(data);
						// 更新data中的数据
						this.userInfo = data.userInfo;
						this.isShow = true;
					},
					fail: () => {
						console.log('获取失败');
					}
				})
			}
		}
	}
</script>

<style>
	.container{
		/* 小程序推荐使用flex布局 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	img{
		/* 注意：rpx单位 */
		width: 200rpx; 
		height: 200rpx;
		border-radius: 100rpx;
		margin: 100rpx 0;
	}
</style>

效果：

授权后：

---

image组件的使用

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

• <image> 组件默认宽度 300px、高度 225px；
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
• 自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

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

---

uni-app中的样式

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

演示：

<template>
	<view>
		<view>样式</view>
		<view class="box1"></view>
		<view class="box2"></view>
	</view>
</template>

<script>
</script>

<style>
	.box1{
		width: 750rpx;
		height: 750rpx;
		background-color: #2C405A;
	}
	.box2{
		width: 375rpx;
		height: 375rpx;
		background-color: red;
	}
</style>

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

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

演示：

<template>
	<view>
		<view>样式</view>
		<view class="box1"></view>
		<view class="box2"></view>
	</view>
</template>

<script>
</script>

<style>
	@import url("./test.css");
	.box1{
		width: 750rpx;
		height: 750rpx;
		background-color: #2C405A;
	}
	.box2{
		width: 375rpx;
		height: 375rpx;
		background-color: red;
	}
</style>

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');
     }
    

---

scss

当我们第一次想使用scss的时候，会出现这种情况：

我们只需要去 工具 -> 插件安装 中，去安装插件。


目前插件市场第一个就是scss编译

使用HBuilderX导入插件即可。

导入好了之后就可以正常编译了。

<template>
	<view>
		<view>样式</view>
		<view class="box1">
			<view class="box1-test"></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.box1{
		width: 750rpx;
		height: 750rpx;
		background-color: #2C405A;
		
		.box1-test{
			width: 375rpx;
			height: 375rpx;
			background-color: red;
		}
	}
</style>

效果：

---

uni.scss的使用就比较简单了，我们直接使用其中的配置就可以了。

<template>
	<view>
		<view>样式</view>
		<view class="box1">
			<view class="box1-test"></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	@import url("./test.css");
	.box1{
		width: 750rpx;
		height: 750rpx;
		background-color: $global-color; /* ←这里 */
		
		.box1-test{
			width: 375rpx;
			height: 375rpx;
			background-color: red;
		}
	}
</style>

看效果：