一、项目结构配置规范

UniApp项目采用模块化配置体系，通过pages.json文件定义路由结构与页面样式。基础配置包含主包与分包两个层级，主包用于存放核心页面，分包实现功能模块解耦。

1.1 主包配置示例

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#FFFFFF",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/user/profile",
      "style": {
        "navigationBarTitleText": "个人中心",
        "navigationStyle": "custom"
      }
    }
  ]
}

主包配置需注意：

路径需遵循pages/[模块名]/[页面名]规范
导航栏样式支持背景色、标题、透明度等10+参数配置
启用下拉刷新需同步配置onPullDownRefresh生命周期

1.2 分包优化策略

分包配置通过subPackages字段实现，支持按功能模块划分代码：

{
  "subPackages": [
    {
      "root": "moduleA",
      "pages": [
        {
          "path": "list/index",
          "style": {
            "navigationBarTitleText": "商品列表"
          }
        }
      ]
    },
    {
      "root": "moduleB",
      "pages": [
        {
          "path": "detail/index",
          "style": {
            "navigationBarTitleText": "商品详情"
          }
        }
      ]
    }
  ]
}

分包设计原则：

代码隔离：每个分包独立维护，避免全局变量污染
按需加载：主包大小建议控制在2MB以内，分包单文件不超过500KB
依赖管理：分包内组件需显式声明第三方依赖

1.3 预加载机制

通过preloadRule实现智能加载：

{
  "preloadRule": {
    "pages/home/index": {
      "network": "all",
      "packages": ["moduleA"]
    },
    "pages/user/profile": {
      "network": "wifi",
      "packages": ["moduleB"]
    }
  }
}

预加载策略要点：

网络类型支持all（任意网络）、wifi（仅WiFi）
预加载时机建议在用户停留首页超过3秒时触发
测试阶段可通过uni.getPreloadInfo()验证加载状态

二、页面生命周期深度解析

UniApp提供完整的页面生命周期管理，涵盖从创建到销毁的全过程。理解各钩子函数的执行时机与典型应用场景，对开发稳定应用至关重要。

2.1 核心生命周期时序

sequenceDiagram
    participant 页面
    页面->>onLoad: 首次加载参数
    页面->>onShow: 每次显示触发
    页面->>onReady: 首次渲染完成
    页面->>onHide: 页面隐藏时
    页面->>onUnload: 页面卸载时

2.2 钩子函数详解

2.2.1 onLoad(options)

执行时机：页面首次加载时触发，仅执行一次
典型场景：

解析路由参数：const { id } = options
初始化数据：调用API获取详情数据
事件监听：添加页面滚动监听

注意事项：

避免在此阶段操作DOM，此时页面尚未渲染
异步操作需处理加载状态，防止白屏

2.2.2 onShow()

执行时机：每次页面显示时触发（包括返回操作）
典型场景：

数据刷新：从详情页返回时更新列表
状态重置：清除表单输入内容
权限校验：检查用户登录状态

优化建议：

添加防抖机制，避免频繁刷新
通过getCurrentPages()获取前页信息

2.2.3 onReady()

执行时机：首次渲染完成后触发，仅执行一次
典型场景：

操作DOM元素：设置输入框焦点
初始化插件：加载地图、图表组件
性能监控：上报首屏渲染时间

技术要点：

确保在此阶段获取的节点存在
第三方库初始化建议在此完成

2.2.4 onHide()

执行时机：页面隐藏时触发（跳转或进入后台）
典型场景：

清除定时器：clearInterval(timer)
暂停动画：停止CSS动画效果
释放资源：关闭WebSocket连接

最佳实践：

记录隐藏时间，用于统计使用时长
避免在此执行耗时操作

2.2.5 onUnload()

执行时机：页面卸载时触发
典型场景：

解除事件监听：removeEventListener
取消网络请求：abort()未完成请求
清理全局变量：防止内存泄漏

调试技巧：

通过console.log确认卸载时机
使用uni.onMemoryWarning监听内存告警

三、开发实践建议

生命周期组合使用：
典型数据加载流程：onLoad获取参数 → onShow刷新数据 → onHide暂停动画 → onUnload清理资源
分包加载优化：
采用渐进式加载策略，主包包含核心功能，分包按使用频率排序。测试阶段可通过uni.getPackageInfo()验证加载效果。
性能监控体系：
在关键生命周期节点埋点，统计：
- 首屏渲染时间（onReady）
- 页面切换耗时（onShow）
- 内存占用峰值（onHide）
错误处理机制：
在生命周期中添加try-catch块，捕获异步操作错误。通过uni.onError全局捕获未处理异常。

四、常见问题解决方案

分包加载失败：
检查路径是否以分包root开头，确认编译时已勾选”分包加载”选项。使用uni.loadSubpackage手动触发加载。
生命周期执行异常：
避免在onLoad中执行耗时操作，可能导致后续生命周期阻塞。将网络请求移至onShow中执行。
内存泄漏排查：
定期检查getCurrentPages()堆栈，确保页面卸载时正确销毁。使用开发者工具的Memory面板分析内存占用。

通过系统掌握UniApp的配置规范与生命周期管理，开发者能够构建出更稳定、高效的应用程序。实际开发中需结合具体业务场景，灵活运用各项技术特性，持续优化用户体验。

UniApp开发实践：从配置到生命周期的完整指南