uniapp什么结构
Uniapp 的基本结构
Uniapp 的项目结构基于 Vue.js，同时融合了多端开发的特性。以下是一个典型的 Uniapp 项目目录结构：
├── pages # 页面目录
│ ├── index # 首页
│ │ ├── index.vue # 页面文件
│ │ └── index.json # 页面配置
├── static # 静态资源目录
│ ├── images # 图片资源
│ └── css # 公共样式
├── components # 组件目录
├── uni_modules # 插件模块目录
├── main.js # 入口文件
├── App.vue # 应用根组件
├── manifest.json # 应用配置
└── pages.json # 页面路由与样式配置核心文件说明
pages.json
定义页面路由、导航栏样式、窗口背景色等全局配置。例如：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarBackgroundColor": "#007AFF"
}
}App.vue
应用的根组件，可设置全局样式或生命周期钩子。例如：
<script>
export default {
onLaunch() {
console.log('App Launch');
}
}
</script>
<style>
/* 全局CSS */
</style>main.js
入口文件，用于初始化 Vue 实例和引入插件。例如：
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')页面与组件规范
页面结构
每个页面由 .vue 文件、可选的 .js 和 .json 文件组成。例如 pages/index/index.vue：
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello Uniapp'
}
}
}
</script>
<style>
view {
padding: 20px;
}
</style>组件开发
组件存放在 components 目录，通过标签直接引用。例如：
<template>
<custom-button @click="handleClick" />
</template>
<script>
import CustomButton from '@/components/CustomButton.vue'
export default {
components: { CustomButton }
}
</script>多端适配机制
Uniapp 通过条件编译实现多端代码差异化。语法示例：
// #ifdef H5
console.log('仅H5平台生效');
// #endif
// #ifdef MP-WEIXIN
console.log('仅微信小程序生效');
// #endif静态资源路径建议使用 @/ 别名（指向项目根目录），确保多端兼容性：
<image src="@/static/logo.png" />插件管理
通过 uni_modules 目录管理官方或第三方插件。安装后直接在页面中使用：
import { somePlugin } from '@/uni_modules/some-plugin'这种结构设计兼顾了 Vue 的开发习惯与跨平台需求，开发者只需关注核心逻辑，Uniapp 会处理多端转换。
