项目结构

页面结构

遵循 VUE 单页面结构

只能有一个 template，一个script，可以有多个style

<template>
	// 布局
</template>

<script>
	export default {
		// data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad(e){
			// 页面生命周期方法
		},
		
		methods: {
			// 自定义方法，例如点击事件等
		}
	}
</script>

<style>
	// 设置样式
</style>

页面路由

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式

{
    "pages": [
        {
            "path": "pages/index/index", // index 页面
            "style": { 
				// 具体配置参考 https://uniapp.dcloud.io/collocation/pages?id=style
			}
        }, {
            "path": "pages/login/login", // login 页面
            "style": { 
				
			}
        }
    ]
}

尺寸单位

uni-app支持的通用css单位包括px、upx、vh。

• px 即屏幕像素
• upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，屏幕变宽，upx实际显示效果会等比放大。
• vh 是视窗高度的百分比

举例说明：

• 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100upx。
• 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117upx。
• 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。