深入解析 Uniapp 的页面结构

一、引言

Uniapp 是一个使用 Vue.js 开发跨平台应用的前端框架，它能让开发者通过编写一套代码，发布到 iOS、Android、H5、小程序等多个平台。在 Uniapp 开发中，清晰理解页面结构是高效开发的基础，本文将深入剖析 Uniapp 的页面结构。

二、初始化项目后的目录结构

当我们使用 HBuilderX 新建一个 Uniapp 项目后，会得到如下基本目录结构：

• components：存放自定义组件的目录。比如我们在多个页面中都要用到的导航栏组件、底部 tabbar 组件等，都可以放在这里。

• pages：存放页面文件的目录。每个页面都对应一个文件夹，文件夹内包含vue文件、json文件（用于配置页面的一些属性，如导航栏样式等）、js文件（页面的逻辑代码）和scss/css文件（页面样式） 。

• static：存放静态资源的目录，像图片、字体文件等。

• main.js：项目的入口文件，主要作用是创建 Vue 实例、引入全局组件、配置全局属性等。

• App.vue：应用的根组件，在这里可以定义全局的样式、生命周期函数等。

• manifest.json：配置应用的名称、图标、版本、权限等信息，同时也是各个平台特有配置的集中地。

• pages.json：用来对 pages 目录下的页面进行全局配置，包括页面路径、页面窗口样式、导航栏样式等。

三、pages 目录下的页面文件

（一）.vue 文件