uni-app 项目结构

柔情只为你懂 2022-10-02 09:58 28阅读 0赞

## 项目结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

## 页面结构 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20220113/bd93446f75d149b6b14ac1e06d4a9b75.png