uni-app项目架构和代码组织

一、项目结构概述

一个典型的 Uni-app 项目结构通常如下：

uni-app-project
├── pages
│   ├── index
│   │   ├── index.vue
│   │   ├── index.json
│   │   ├── index.css
│   ├── other-page
│   │   ├── other-page.vue
│   │   ├── other-page.json
│   │   ├── other-page.css
├── static
│   ├── images
│   │   ├── logo.png
│   ├── fonts
│   │   ├── custom-font.ttf
├── components
│   ├── custom-component
│   │   ├── custom-component.vue
│   │   ├── custom-component.json
│   │   ├── custom-component.css
├── unpackage
│   ├── dist
│   │   ├── build-h5
│   │   ├── build-app-plus
│   │   ├── build-weixin
│   ├── utils
│   │   ├── util.js
│   ├── main.js
│   ├── App.vue
│   ├── manifest.json
│   ├── pages.json

• pages 目录：存放各个页面文件，每个页面由 .vue 文件、对应的 .json（页面配置文件）和 .css（页面样式文件）组成。
• static 目录：存放静态资源，如图片、字体等。
• components 目录：存放可复用的自定义组件。
• unpackage 目录：项目构建后的输出目录，不同平台的构建结果分别存放在不同的子目录中。
• utils 目录：存放工具函数。
• main.js：项目的入口文件，在这里初始化 Vue 实例并挂载到页面。
• App.vue：应用的根组件，通常包含应用级的样式和全局导航栏等设置。
• manifest.json：应用的配置文件，包括应用名称、图标、权限等设置。
• pages.json：页面路由配置文件。

二、页面组织

1. 页面文件结构

   • .vue 文件是页面的主要组成部分，包含模板（<template>）、脚本（<script>）和样式（<style>）三个部分。
   • 模板部分定义页面的结构，使用 Vue 的模板语法来描述页面的 HTML 结构。
   • 脚本部分包含页面的逻辑代码，如数据定义、方法、生命周期钩子等。
   • 样式部分用于定义页面的样式，可以使用 CSS、SCSS、Less 等预处理器。

2. 页面路由配置

   • 在 pages.json 文件中配置页面路由。每个页面都有一个对应的路由对象，包含页面路径、页面名称等信息。
   • 例如：

     {
       "pages": [
         {
           "path": "pages/index/index",
           "style": {
             "navigationBarTitleText": "首页"
           }
         },
         {
           "path": "pages/other-page/other-page",
           "style": {
             "navigationBarTitleText": "其他页面"
           }
         }
       ]
     }

三、组件组织

1. 自定义组件文件结构

   • 自定义组件的文件结构与页面文件类似，也包含 .vue 文件、.json 文件和 .css 文件。
   • .vue 文件定义组件的模板、脚本和样式，.json 文件可以配置组件的属性，.css 文件定义组件的样式。

2. 组件复用

   • 在页面或其他组件中使用自定义组件时，通过 <component> 标签进行引用，并传入相应的属性。
   • 例如：

     <template>
       <view>
         <custom-component :prop1="value1" :prop2="value2"></custom-component>
       </view>
     </template>

     <script>
     import CustomComponent from '@/components/custom-component/custom-component.vue';

     export default {
       components: {
         CustomComponent
       },
       data() {
         return {
           value1: 'some value',
           value2: 'another value'
         };
       }
     };
     </script>

四、数据管理

1. 页面级数据管理
   • 在页面的脚本部分，可以使用 data 选项定义页面的数据。
   • 例如：

     export default {
       data() {
         return {
           message: 'Hello Uni-app',
           count: 0
         };
       },
       methods: {
         increment() {
           this.count++;
         }
       }
     };

1. 全局数据管理（Vuex）
   • 对于复杂的项目，可以使用 Vuex 进行全局数据管理。
   • 创建一个 store 目录，包含 index.js 文件用于创建 Vuex 实例，以及 actions.js、mutations.js、getters.js 等文件分别定义 actions、mutations 和 getters。
   • 例如：

     // store/index.js
     import Vue from 'vue';
     import Vuex from 'vuex';

     Vue.use(Vuex);

     import actions from './actions';
     import mutations from './mutations';
     import getters from './getters';

     const store = new Vuex.Store({
       state: {
         globalData: 'initial value'
       },
       mutations,
       actions,
       getters
     });

     export default store;

• 在页面或组件中，可以通过 this.$store 访问 Vuex 中的状态和方法。
• 例如：

     <template>
       <view>
         <p>{{ $store.state.globalData }}</p>
         <button @click="incrementGlobalData">Increment Global Data</button>
       </view>
     </template>

     <script>
     export default {
       methods: {
         incrementGlobalData() {
           this.$store.dispatch('incrementGlobalDataAction');
         }
       }
     };
     </script>

五、工具函数和服务

1. 工具函数
   • 将一些通用的工具函数放在 utils 目录下的 .js 文件中。
   • 例如，可以创建一个 dateFormat.js 文件，包含日期格式化的函数。
   • 然后在需要的地方引入并使用这些工具函数。
   • 例如：

     // utils/dateFormat.js
     export function formatDate(date) {
       // 日期格式化逻辑
       return formattedDate;
     }

• 在页面或组件中使用：

     import { formatDate } from '@/utils/dateFormat.js';

     export default {
       data() {
         return {
           currentDate: new Date()
         };
       },
       computed: {
         formattedDate() {
           return formatDate(this.currentDate);
         }
       }
     };

1. 服务模块
   • 对于与后端 API 交互等复杂的业务逻辑，可以创建单独的服务模块，放在 services 目录下。
   • 例如，可以创建一个 apiService.js 文件，包含与后端 API 交互的函数。
   • 然后在页面或组件中调用这些服务函数。
   • 例如：

     // services/apiService.js
     export function fetchData() {
       // API 请求逻辑
       return data;
     }

• 在页面或组件中使用：

     import { fetchData } from '@/services/apiService.js';

     export default {
       async created() {
         const data = await fetchData();
         // 处理数据
       }
     };

六、项目优化和扩展

1. 代码分割和懒加载
   • Uni-app 支持代码分割和懒加载，可以将较大的页面或组件拆分成多个小块，在需要的时候再进行加载，提高应用的性能。
   • 例如，可以使用 import() 函数进行动态导入，实现懒加载。
   • 例如：

     export default {
       components: {
         // 懒加载组件
         LazyLoadedComponent: () => import('@/components/lazy-loaded-component/lazy-loaded-component.vue')
       }
     };

1. 插件和扩展
   • Uni-app 可以通过插件和扩展来增强功能。可以使用官方提供的插件，也可以开发自定义插件。
   • 例如，可以使用 uni-ui 插件库来快速构建漂亮的界面。
   • 在项目中引入插件后，可以在页面或组件中使用插件提供的组件和功能。

通过合理的项目架构和代码组织，可以提高 Uni-app 项目的可维护性、可扩展性和性能，使开发过程更加高效和愉快。