小程序学习记录四：小程序的配置.json文件

男娘i 2021-09-07 06:19 400阅读 0赞

### 小程序的配置.json文件 ###

*  一、全局.json文件pages属性
 *  二、全局.json文件window属性
 *  三、全局.json文件tabBar属性
 *  四、全局.json文件style属性
 *  五、局部.json文件

# 一、全局.json文件pages属性 #

存放当前小程序的所有页面路径

# 二、全局.json文件window属性 #

全局设置小程序窗口的外观  
即小程序导航栏有三个点的部分叫导航栏。  
还有下拉的背景颜色。  
不能配置页面主题的样式。需要wxss  
window节点常用属性配置

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td>字符串</td> 
   <td>导航栏标题内容</td> 
  </tr> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏的背景颜色，使用#号开头的颜色，不要red</td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持black/white</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#fffff</td> 
   <td>下拉窗口的背景色，只能是16进制</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>

# 三、全局.json文件tabBar属性 #

设置小程序底部的taBar效果  
tabBar有顶部和底部之分  
顶部tabBar不会显示icon图标，只会显示文本  
而底部tabBar都会显示  
tabBar配置最少2个、最多5个标签。  
tabBar有6个组成部分

<table> 
 <thead> 
  <tr> 
   <th>部分</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundColor</td> 
   <td>tabBar的背景颜色</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>tabBar上文字的默认，即未选中的颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>选中时的文字的颜色</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>未选中时的图片路径</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>选中时的图片路径</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>tabBar上边框的样式</td> 
  </tr> 
 </tbody> 
</table>

tabBar节点配置

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td>tabBar的位置，仅支持bottom/top</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td>tabBar上边框的颜色，仅支持black/white</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td>/</td> 
   <td>tabBar上文字的默认，即未选中的颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td>/</td> 
   <td>tab上的文字选中时的颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td>/</td> 
   <td>tabBar的背景色</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td>/</td> 
   <td>tab页签的列表，最少2个，最多5个</td> 
  </tr> 
 </tbody> 
</table>

list是必不可少的配置,有如下几个属性

<table> 
 <thead> 
  <tr> 
   <th>list属性</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>是</td> 
   <td>页面路径，页面必须在pages中预先定义，且pages前面不要加“/‘，表示根路径，直接写"Pages/index/index"</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>是</td> 
   <td>tab上显示的文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>否</td> 
   <td>未选中时的图标路径，当postition为top时，不显示icon</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>否</td> 
   <td>选中时的图标路径，当postition为top时，不显示icon</td> 
  </tr> 
 </tbody> 
</table>

# 四、全局.json文件style属性 #

是否启用新版的组件样式。

# 五、局部.json文件 #

即当前页面的的.json文件，会覆盖全局配置中冲突的样式和配置。

局部json文件的常用属性，局部页面json文件没有window属性

<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>导航栏的背景颜色，使用#号开头的颜色，不要red</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>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#fffff</td> 
   <td>当前页面下拉窗口的背景色，只能是16进制</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>