uni-app的目录结构

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                静态资源（如图片、视频等）的目录
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录
├─nativeplugins         App原生插件
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               页面的入口文件，应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            全局配置文件，配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              全局的样式文件

注意点：

编译的时候，static下的文件会被打包，不会被编译，而非static下的文件只有被引用才会被打包编译
css等资源放在自己新建的common目录下

pages.json的基本配置

{
    // pages数组中第一项表示应用启动页
    "pages": [ 
    {
        "path": "pages/tabBar/index/index",
        // 用于设置每个页面的状态栏、导航条、标题、窗口背景色
        "style": {
            "navigationBarTitleText": "首页",
            "enablePullDownRefresh": true     // 开启下拉刷新
        }
    }, {
        "path": "pages/tabBar/comment/comment",
        "style": {
            "navigationBarTitleText": "评论"
        }
    }, {
        "path": "pages/tabBar/person/person",
        "style": {
            "navigationBarTitleText": "个人中心"
        }
    }
    ],
    // 底部导航栏配置
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#1296DB",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/tabBar/index/index",
            "iconPath": "static/images/index.png",
            "selectedIconPath": "static/images/index-selected.png",
            "text": "首页"
        },
        {
            "pagePath": "pages/tabBar/comment/comment",
            "iconPath": "static/images/comment.png",
            "selectedIconPath": "static/images/comment-selected.png",
            "text": "评论"
        },
        {
            "pagePath": "pages/tabBar/person/person",
            "iconPath": "static/images/person.png",
            "selectedIconPath": "static/images/person-selected.png",
            "text": "个人中心"
        }]
    },
    // 窗口样式
    "globalStyle": {
        "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景色，仅支持 black/white
        "navigationBarTitleText": "uni-app", // 导航栏标题，如pages中未设置则显示
        "navigationBarBackgroundColor": "#1296DB",// 导航栏背景颜色
        "backgroundColor": "#F8F8F8",// 窗口背景色
        "navigationStyle": "default",// 是否显示导航栏，仅支持 default/custom，custom 为取消默认的原生导航栏
        "enablePullDownRefresh": false,	// 是否启用下拉刷新
        "onReachBottomDistance": 50,// 页面上拉触底事件触发时距页面底部距离，单位只支持px
        "pageOrientation": "portrait",// 屏幕旋转设置，仅支持 auto / portrait / landscape 
    }
}

分包

主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─pagesA
│  ├─static
│  └─list
│     └─list.vue
├─pagesB
│  ├─static
│  └─detail
│     └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

在manifest中，配置具体的分包规则

"app-plus": {
  "optimization": {
    "subPackages": true
  },
  "runmode" : "liberate" // 开启分包优化后，必须配置资源释放模式
}

preloadRule

分包预载配置配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度 preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置

"preloadRule": { 
    "pages/list/list": { 
        "network": "all", 
        "packages": ["subPages"] 
    } 
},

进入pages/list/list就预下载subPages分包，提升提升进入后续分包页面时的启动速度。

uni-app学习day01-目录和分包

uni-app的目录结构

分包

preloadRule