一、uni-app标准目录结构解析

uni-app采用模块化目录设计，根目录包含以下核心文件夹：

1. pages目录：存放所有页面组件，采用”页面名/index.vue”命名规范。例如：

   pages/
   ├── index/
   │   ├── index.vue       # 页面逻辑
   │   └── index.scss      # 页面样式
   └── user/
      ├── user.vue
      └── user.js         # 页面专用脚本

2. static目录：静态资源存储区，支持图片、字体等非代码文件
3. components目录：全局可复用组件库，建议按功能分类：

   components/
   ├── ui/                # 基础UI组件
   │   ├── button.vue
   │   └── input.vue
   └── business/          # 业务组件
      └── order-card.vue

4. 配置文件群：
   • pages.json：路由配置中枢，定义页面路径、窗口样式及导航栏
   • manifest.json：应用全局配置，包含AppID、权限声明等
   • uni.scss：全局样式变量定义文件

最佳实践：建议使用HBuilderX的”新建页面”模板功能，自动生成符合规范的目录结构。对于大型项目，可增加utils、api等辅助目录。

二、页面生命周期管理

uni-app页面生命周期分为两大阶段：

1. 页面级生命周期

export default {
  // 初始化阶段
  onLoad(options) {  // 接收路由参数
    console.log('页面加载', options.id);
  },
  onShow() {         // 页面显示时触发
    this.loadData();
  },
  onReady() {        // 页面首次渲染完成
    this.initChart();
  },
  // 销毁阶段
  onHide() {         // 页面隐藏时触发
    clearInterval(this.timer);
  },
  onUnload() {       // 页面卸载时触发
    this.$refs.webview.stop();
  }
}

关键场景：

• onLoad：适合初始化数据请求，可接收navigateTo传递的参数
• onShow：适合实时数据刷新，如消息列表页
• onHide：必须清理定时器、WebSocket连接等资源

2. 组件级生命周期

components: {
  myComponent: {
    beforeCreate() {  // 实例初始化前
      console.log('组件准备创建');
    },
    mounted() {       // 组件挂载完成
      this.startAnimation();
    },
    beforeDestroy() { // 组件销毁前
      this.stopObserver();
    }
  }
}

组件通信时序：父组件mounted → 子组件beforeCreate → 子组件mounted → 父组件可安全访问子组件方法

三、页面通信机制

1. 路由参数传递

// 跳转时传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
});
// 接收参数
onLoad(options) {
  console.log(options.id);  // 123
}

2. 全局状态管理

• Vuex方案：适合中大型项目
  ```javascript
  // store/index.js
  export default new Vuex.Store({
  state: { userInfo: null },
  mutations: {
  setUser(state, info) {

  state.userInfo = info;

  }
  }
  });

// 页面中使用
this.$store.commit(‘setUser’, data);

- **EventBus方案**：适合简单跨组件通信
```javascript
// utils/eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
// 发送事件
EventBus.$emit('refresh', data);
// 接收事件
EventBus.$on('refresh', (data) => {
  console.log(data);
});

3. 本地存储

// 存储对象
uni.setStorageSync('user', {name: 'John'});
// 读取数据
const user = uni.getStorageSync('user');

四、路由系统深度解析

1. 路由配置规范

pages.json核心配置示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情",
        "navigationStyle": "custom"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

2. 路由API对比

API	特点	适用场景
navigateTo	保留当前页，跳转到新页	普通页面跳转
redirectTo	关闭当前页，跳转到新页	登录后跳转
switchTab	切换Tab页	底部导航切换
reLaunch	关闭所有页，打开新页	退出登录后重置首页

3. 路由守卫实现

通过onLoad和全局变量模拟路由守卫：

// 在App.vue中
onLaunch() {
  uni.addInterceptor('navigateTo', {
    invoke(args) {
      if (!getApp().globalData.isLogin && 
          !args.url.includes('login')) {
        uni.redirectTo({ url: '/pages/login/login' });
        return false;
      }
      return true;
    }
  });
}

五、页面创建与删除规范

1. 页面创建流程

1. 手动创建：

   • 在pages.json中添加路由配置
   • 创建对应目录和.vue文件
   • 示例命令：

     mkdir pages/newPage
     touch pages/newPage/index.vue

2. 自动化方案：

   // 自动化脚本示例
   const fs = require('fs');
   const pageName = 'order';
   fs.mkdirSync(`pages/${pageName}`);
   fs.writeFileSync(`pages/${pageName}/index.vue`, `
     <template>
       <view>${pageName}页面</view>
     </template>
     <script>
     export default {
       data() {
         return {}
       }
     }
     </script>
   `);

2. 页面删除注意事项

1. 必须同步操作：

   • 删除pages.json中的对应配置
   • 删除文件系统中的页面目录
   • 检查全局状态管理中的相关引用

2. 热更新风险：

   // 错误示例：直接删除文件不更新配置
   fs.rmdirSync('pages/oldPage', { recursive: true });
   // 可能导致应用启动时找不到页面而崩溃

六、性能优化建议

1. 生命周期优化：

   • 将耗时操作放在onReady而非onLoad
   • 使用onPullDownRefresh时设置防抖

     onPullDownRefresh() {
     clearTimeout(this.refreshTimer);
     this.refreshTimer = setTimeout(() => {
       this.loadData();
       uni.stopPullDownRefresh();
     }, 300);
     }

2. 路由性能：

   • 避免在tabBar页面中使用navigateTo嵌套过多层级
   • 对大列表页面使用keep-alive缓存

     <keep-alive>
     <list-page v-if="activeTab === 'list'" />
     </keep-alive>

3. 组件复用：

   • 将高频使用的UI组件注册为全局组件

     // main.js
     import Button from '@/components/ui/button.vue';
     Vue.component('m-button', Button);

通过系统掌握这些核心机制，开发者能够构建出结构清晰、性能优良的uni-app应用。建议结合官方文档持续验证最新特性，特别是在跨平台兼容性方面保持关注。