一介布衣

🧭 快速导航

项目结构解析 - 这些文件夹都是干什么的？ ​

📁 了解项目结构是开发的第一步，今天我们来搞清楚每个文件都是干什么的

项目整体结构 ​

还记得上一篇我们创建的项目吗？让我们再仔细看看：

my-first-uniapp/
├── pages/              # 📄 页面文件夹
├── static/             # 🖼️ 静态资源
├── uni_modules/        # 🔌 插件模块
├── unpackage/          # 📦 编译输出目录
├── App.vue            # 🏠 应用入口
├── main.js            # ⚡ 程序入口
├── manifest.json      # ⚙️ 应用配置
├── pages.json         # 🗺️ 页面路由配置
└── uni.scss           # 🎨 全局样式

看起来很多，但其实很有规律！我们一个个来看。

核心配置文件 ​

1. main.js - 程序入口文件 ​

这是整个应用的启动文件，就像汽车的点火开关：

javascript
import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

作用：

  • 创建Vue应用实例
  • 注册全局组件、插件
  • 设置全局配置

新手提示：一般情况下不需要修改这个文件。

2. App.vue - 应用配置文件 ​

这是应用的根组件，相当于房子的地基：

vue
<script>
export default {
  onLaunch: function() {
    console.log('App Launch') // 应用启动
  },
  onShow: function() {
    console.log('App Show') // 应用显示
  },
  onHide: function() {
    console.log('App Hide') // 应用隐藏
  }
}
</script>

<style>
/* 全局样式 */
.container {
  padding: 20px;
}
</style>

作用：

  • 监听应用生命周期
  • 设置全局样式
  • 处理全局数据

3. pages.json - 页面路由配置 ​

这是应用的"地图"，告诉系统有哪些页面：

json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的应用",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

重要配置：

  • pages：页面列表（第一个是首页）
  • globalStyle：全局样式配置
  • tabBar：底部导航配置

4. manifest.json - 应用配置 ​

这是应用的"身份证"：

json
{
  "name": "my-first-uniapp",
  "appid": "__UNI__XXXXXX",
  "description": "我的第一个UniApp",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    }
  }
}

重要配置：

  • 应用名称、版本号
  • 各平台的特殊配置
  • 权限设置

页面文件夹 - pages/ ​

这里存放所有的页面文件：

pages/
├── index/              # 首页
│   ├── index.vue      # 页面文件
│   └── index.scss     # 页面样式（可选）
├── about/              # 关于页面
│   └── about.vue
└── user/               # 用户页面
    └── user.vue

页面文件结构（.vue文件） ​

每个页面都是一个.vue文件，包含三部分：

vue
<template>
  <!-- 页面结构 -->
  <view class="container">
    <text>Hello World</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
      message: 'Hello UniApp'
    }
  },
  onLoad() {
    // 页面加载时执行
    console.log('页面加载了')
  }
}
</script>

<style>
/* 页面样式 */
.container {
  padding: 20px;
}
</style>

静态资源文件夹 - static/ ​

存放图片、字体、音频等静态文件：

static/
├── images/             # 图片
│   ├── logo.png
│   └── banner.jpg
├── fonts/              # 字体文件
├── audio/              # 音频文件
└── video/              # 视频文件

使用方式：

vue
<!-- 图片 -->
<image src="/static/images/logo.png"></image>

<!-- 背景图 -->
<view style="background-image: url('/static/images/bg.jpg')"></view>

插件模块 - uni_modules/ ​

存放UniApp插件：

uni_modules/
├── uni-ui/             # UI组件库
├── uni-request/        # 网络请求插件
└── my-plugin/          # 自定义插件

安装插件：

  • 通过HBuilderX插件市场
  • 通过npm安装
  • 手动下载放入此文件夹

编译输出 - unpackage/ ​

这是编译后的文件，不要手动修改：

unpackage/
├── dist/               # 编译输出
│   ├── build/         # 各平台编译结果
│   └── dev/           # 开发环境编译结果
└── cache/              # 编译缓存

全局样式 - uni.scss ​

定义全局的SCSS变量和样式：

scss
/* 颜色变量 */
$primary-color: #007aff;
$success-color: #4cd964;
$warning-color: #f0ad4e;
$error-color: #dd524d;

/* 全局混合器 */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

文件命名规范 ​

页面文件： ​

  • 文件夹名：小写，用连字符分隔（如：user-profile）
  • 文件名：与文件夹名相同（如：user-profile.vue）

组件文件： ​

  • 大驼峰命名（如：UserCard.vue）
  • 或者小写连字符（如：user-card.vue）

静态资源： ​

  • 小写，用连字符分隔
  • 有意义的名称（如：user-avatar.png）

实际操作：添加一个新页面 ​

让我们实际操作，添加一个"关于我们"页面：

1. 创建页面文件 ​

在pages文件夹下创建about文件夹，然后创建about.vue：

vue
<template>
  <view class="about-page">
    <text class="title">关于我们</text>
    <text class="content">这是一个用UniApp开发的小程序</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style>
.about-page {
  padding: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.content {
  font-size: 16px;
  color: #666;
}
</style>

2. 在pages.json中注册页面 ​

json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ]
}

3. 添加跳转链接 ​

在首页添加一个按钮跳转到关于页面：

vue
<template>
  <view>
    <!-- 其他内容 -->
    <button @click="goToAbout">关于我们</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    }
  }
}
</script>

小结 ​

今天我们学习了：

  • ✅ UniApp项目的整体结构
  • ✅ 核心配置文件的作用
  • ✅ 页面文件的组织方式
  • ✅ 静态资源的存放位置
  • ✅ 如何添加新页面

记住这个口诀：

  • main.js：程序入口
  • App.vue：应用配置
  • pages.json：页面地图
  • manifest.json：应用身份证
  • pages/：页面文件夹
  • static/：静态资源

下一篇预告 ​

下一篇我们将学习《页面和路由 - 小程序是怎么跳转的？》，深入了解页面之间的跳转和参数传递。

练习作业 ​

  1. 创建一个"个人中心"页面
  2. 在首页添加跳转按钮
  3. 尝试修改页面的导航栏标题和背景色

项目结构是基础，理解了结构，后面的开发就会事半功倍！