第五章：uniapp的组件使用

关于微信开发小程序app报错：./pages/xxx/xxx.wxml not found解决：开发者工具更新日志 | 微信开放文档 先回退到这个版本

案例1：

1.根据uniapp框架文档自己选择：

例如：text组件：

简单使用：代码放在xxx.vue文件中：

tips：view会独占一行。view需要有一个根view包裹（最外层要有一个view包裹，不能两个view同级，不然会报错。

<template>
	<view>
		<view>
			<text>你好</text>
		</view>
		<view >
			<text>谁好</text>
		</view>
	</view>
	
</template>

显示效果：

其他属性演示：

参考官网文档：

 例如：

<template>
	<view>
		<view>
			<text>你好</text>
		</view>
		<view >
			<text selectable space="ensp">谁      好</text>
		</view>
		<view >
			<text selectable space="emsp">谁      好</text>
		</view>
	</view>
	
</template>

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

<style>

</style>

效果详情：

案例2：view组件

 案例代码：给组件添加所需要属性即可。

<template>
	<view class="box" hover-class="box-active">
		
	</view>
</template>

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

<style>
.box{width: 100px;
height: 100px;
background-color: #007AFF;}
.box-active{
	background-color: red;
}
</style>

 案例效果：

其他组件使用方式都一样。看官网组件文档使用即可。