目录结构 - 图1

  • 较为重要的结构

目录结构 - 图2

page.json

pages

添加页面地址路径
uni-app通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性 类型 描述
path String 配置页面路径
style Object 配置页面窗口表现，配置项参考pageStyle

Tips：

  • pages节点的第一项为应用入口页（即首页）
  • 应用中新增/减少页面，都需要对 pages 数组进行修改
  • 文件名不需要写后缀，框架会自动寻找路径下的页面资源

    style

    用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

    globalStyle

    用于设置应用的状态栏、导航条、标题、窗口背景色等。
属性 类型 描述
navigationBarBackgroundColor HexColor 导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle String 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor 下拉显示出来的窗口的背景色
backgroundTextStyle String 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh Boolean 是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance Number 距离页面底部多远加载下一页的的数据，页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
Tips

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
  • tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

    subPackages

    分包加载配置，此配置为小程序的分包加载机制。
    因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
    所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。
    在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。