当前位置：首页 > article >正文

深入解析 Uniapp 的页面结构

article 2025/2/22 9:55:06

一、引言

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 文件

以一个简单的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定义了全局的样式，包括导航栏文字颜色、背景颜色等。