uni-app 项目结构

项目结构

页面结构

遵循 VUE 单页面结构

只能有一个 template，一个script，可以有多个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。