uni-app 项目结构

项目结构

uni-app 项目结构_第1张图片

页面结构

遵循 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。

你可能感兴趣的:(Android,小程序,小程序之旅)