uni-app入门（uni-app项目结构介绍、pages.json配置项列表）

「爱情、让人受尽委屈。」 2022-12-13 01:37 454阅读 0赞

## 一、uni-app项目结构 ##

> 上一篇博客咱们介绍了如何创建一个uni-app项目，项目创建完成后的目录样式如图所示：

![在这里插入图片描述][20201009103650166.png_pic_center]

1.  pages 业务页面文件存放的目录

> pages里面可以存放.vue的页面，如下图所示：index的页面

![在这里插入图片描述][20201009103858227.png_pic_center]

1.  static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此  
    ![在这里插入图片描述][20201009104434231.png_pic_center]
2.  App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
3.  main.js Vue初始化入口文件
4.  manifest.json 配置应用名称、appid、logo、版本等打包信息  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center]
5.  pages.json 配置页面路由、导航条、选项卡等页面类信息  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 1]

## 二、pages.json配置项列表 ##

> 下面只介绍几个常用的属性，如需其他熟悉可查看uni-app的官方文档

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pages</td> 
   <td>Object Array</td> 
   <td>是</td> 
   <td>设置页面路径及窗口表现</td> 
  </tr> 
  <tr> 
   <td>globalStyle</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置默认页面的窗口表现</td> 
  </tr> 
  <tr> 
   <td>tabBar</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>设置底部 tab 的表现</td> 
  </tr> 
  <tr> 
   <td>condition</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>启动模式配置</td> 
  </tr> 
 </tbody> 
</table>

*  globalStyle

> 用于设置应用的状态栏、导航条、标题、窗口背景色等。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#F7F7F7</td> 
   <td>导航栏背景颜色（同状态栏背景色）</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>String</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>下拉显示出来的窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark / light</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否开启下拉刷新</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位只支持px</td> 
  </tr> 
 </tbody> 
</table>

*  pages

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

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td></td> 
   <td>配置页面路径</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>Object</td> 
   <td></td> 
   <td>配置页面窗口表现 （详细查看下面pages下style的属性）</td> 
  </tr> 
 </tbody> 
</table>

***注意：***

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 2]

*  pages下style的属性：

> 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。  
> 页面中配置项会覆盖 globalStyle 中相同的配置项

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色（同状态栏背景色）</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td>navigationBarShadow</td> 
   <td>Object</td> 
   <td></td> 
   <td>导航栏阴影</td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>String</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 dark/light</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否开启下拉刷新</td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位只支持px</td> 
  </tr> 
 </tbody> 
</table>

> 注意：窗口的背景色backgroundColor，只有在开启下拉刷新时（enablePullDownRefresh：true），当下拉的时候才会看见窗口的背景色

[20201009103650166.png_pic_center]: /images/20221123/55abf79e3d8c4f0f8523c7b5ec88e829.png
[20201009103858227.png_pic_center]: /images/20221123/acc84b6816df4de4ad9249996a9b8ae8.png
[20201009104434231.png_pic_center]: /images/20221123/30731996a0fa4bb385e692db71d8cef9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9b1a468090d348dbab174e3fafa7a536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/cedfe19c7d4b4ca7ada3aacb26c5521e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/dfc61acbddec401bb0e6c3503cd57ffc.png