一、项目结构概述
一个典型的 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:页面路由配置文件。
二、页面组织
-
页面文件结构
.vue
文件是页面的主要组成部分,包含模板(<template>
)、脚本(<script>
)和样式(<style>
)三个部分。- 模板部分定义页面的结构,使用 Vue 的模板语法来描述页面的 HTML 结构。
- 脚本部分包含页面的逻辑代码,如数据定义、方法、生命周期钩子等。
- 样式部分用于定义页面的样式,可以使用 CSS、SCSS、Less 等预处理器。
-
页面路由配置
- 在
pages.json
文件中配置页面路由。每个页面都有一个对应的路由对象,包含页面路径、页面名称等信息。 - 例如:
- 在
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/other-page/other-page",
"style": {
"navigationBarTitleText": "其他页面"
}
}
]
}
三、组件组织
-
自定义组件文件结构
- 自定义组件的文件结构与页面文件类似,也包含
.vue
文件、.json
文件和.css
文件。 .vue
文件定义组件的模板、脚本和样式,.json
文件可以配置组件的属性,.css
文件定义组件的样式。
- 自定义组件的文件结构与页面文件类似,也包含
-
组件复用
- 在页面或其他组件中使用自定义组件时,通过
<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>
四、数据管理
- 页面级数据管理
- 在页面的脚本部分,可以使用
data
选项定义页面的数据。 - 例如:
- 在页面的脚本部分,可以使用
export default {
data() {
return {
message: 'Hello Uni-app',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
- 全局数据管理(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>
五、工具函数和服务
- 工具函数
- 将一些通用的工具函数放在
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);
}
}
};
- 服务模块
- 对于与后端 API 交互等复杂的业务逻辑,可以创建单独的服务模块,放在
services
目录下。 - 例如,可以创建一个
apiService.js
文件,包含与后端 API 交互的函数。 - 然后在页面或组件中调用这些服务函数。
- 例如:
- 对于与后端 API 交互等复杂的业务逻辑,可以创建单独的服务模块,放在
// services/apiService.js
export function fetchData() {
// API 请求逻辑
return data;
}
- 在页面或组件中使用:
import { fetchData } from '@/services/apiService.js';
export default {
async created() {
const data = await fetchData();
// 处理数据
}
};
六、项目优化和扩展
- 代码分割和懒加载
- Uni-app 支持代码分割和懒加载,可以将较大的页面或组件拆分成多个小块,在需要的时候再进行加载,提高应用的性能。
- 例如,可以使用
import()
函数进行动态导入,实现懒加载。 - 例如:
export default {
components: {
// 懒加载组件
LazyLoadedComponent: () => import('@/components/lazy-loaded-component/lazy-loaded-component.vue')
}
};
- 插件和扩展
- Uni-app 可以通过插件和扩展来增强功能。可以使用官方提供的插件,也可以开发自定义插件。
- 例如,可以使用
uni-ui
插件库来快速构建漂亮的界面。 - 在项目中引入插件后,可以在页面或组件中使用插件提供的组件和功能。
通过合理的项目架构和代码组织,可以提高 Uni-app 项目的可维护性、可扩展性和性能,使开发过程更加高效和愉快。