简单的一个uni-app结构

   uni-app是用vue来写的,和vue的结构是没有什么区别的

<template>
	<view class="view">view</view>
	<text class="text">text</text>
</template>

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

<style>
	.view {
		background-color: red;
	}
	.text {
		background-color: green;
	}
</style>

上面这个是vue2的语法,我们可以直接使用vue3的语法

<template>
	<view>
		
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	       
</style>

这里插个小知识点:HBuilderX新建页面的创建模板,是给我们直接打开文件夹的,我们在文件夹中创建以xxx.vue的文件就可以在HBuilderX显示了

view和text组件

   view相当于传统项目中的div, text是span标签, 都内置了挺多属性的,可以看官方文档, 我在这里主要是记录大体的知识点  https://zh.uniapp.dcloud.io/component/view.html

scroll-view组件

   可滚动视图区域。用于区域滚动

   uni-app文档链接:  https://zh.uniapp.dcloud.io/component/scroll-view.html

swiper组件

   滑块视图容器! 就是轮播图、轮播文字等

   uni-app文档链接: https://zh.uniapp.dcloud.io/component/swiper.html

image组件

   图片组件: 本地和网络图片

   uni-app文档链接: https://zh.uniapp.dcloud.io/component/image.html