一、引言
Uniapp 是一个使用 Vue.js 开发跨平台应用的html" title=前端>前端框架，它能让开发者通过编写一套代码，发布到 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 文件
以一个简单的index.vue文件为例：
<template>
<view class="home">
<text>这是首页</text>
</view>
</template>
<script>
export default {
data() {
return {
// 这里定义页面的数据
};
},
onLoad() {
// 页面加载时触发的函数
},
methods: {
// 定义页面的方法
}
};
</script>
<style scoped lang="scss">
.home {
background-color: #f5f5f5;
padding: 20px;
}
</style>template标签内是页面的模板结构，使用 Uniapp 的组件和 HTML 标签进行布局；script标签内是页面的逻辑代码，基于 Vue.js 的语法，定义数据、生命周期函数和方法；style标签用于编写页面的样式，scoped属性表示该样式只作用于当前组件，lang="scss"表示使用 SCSS 预处理器。
（二）.json 文件
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#ffffff"
}这里配置了当前页面的导航栏标题和背景颜色，通过pages.json也可以进行全局配置，而页面级的json文件配置会覆盖全局配置。
（三）.js 文件
home.js文件和vue文件中的script部分紧密相关，它主要用于存放页面的逻辑代码，在vue文件中使用export default导出的逻辑，在js文件中也可以进行同样的操作，不过在 Uniapp 中，更多是将逻辑代码直接写在vue文件的script标签内。
（四）.scss/.css 文件
如上面home.vue中的style标签所示，也可以单独将样式写在home.scss或home.css文件中，然后在vue文件中通过@import导入。
四、pages.json 详解
pages.json是 Uniapp 页面结构中非常重要的配置文件，示例如下：
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#f8f8f8"
}
}pages数组中定义了应用的所有页面路径及每个页面的样式配置；globalStyle定义了全局的样式，包括导航栏文字颜色、背景颜色等。
五、总结
通过以上对 Uniapp 页面结构的解析，我们了解了项目初始化后的目录结构、各页面文件的组成以及pages.json的重要配置。清晰掌握这些内容，能够帮助我们在 Uniapp 开发中更高效地进行页面开发和管理。在实际开发中，根据项目需求合理组织和优化页面结构，将有助于提升开发效率和应用性能。
