小程序的配置

痛定思痛。 2021-10-24 00:48 271阅读 0赞

## 小程序的配置 ##

我们新建一个小程序项目，都要对项目进行一些配置，如头对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。而这些配置都是在`aap.json`这个文件中完成的。

一般新建的一个小程序的`app.json`会有`pages`和`window`这两个配置；当然，肯定不止这两个配置哟：

pages：是用来设置页面的路径的
    
    window：是用来设置页面窗口的表现
    
    tabBar：用来设置底部的表现，一般我用来设置底部的导航栏
    
    networkTimeout：设置网络超时的时间
    
    debug：是否开启debug调试模式

**详解每个配置：**

> pages：指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对  
> pages 数组进行修改。
> 
> 文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
> 
> 我们也可以直接通过pages路径来新建一个页面目录

> window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
> 
> 其可设置的属性有：
> 
> navigationBarBackgroundColor： 导航栏背景颜色，如"\#000000"
> 
> navigationBarTextStyle： 导航栏标题颜色，仅支持 black/white
> 
> navigationBarTitleText： 导航栏标题文字内容
> 
> backgroundColor： 窗口的背景色
> 
> backgroundTextStyle： 下拉背景字体、loading 图的样式，仅支持 dark/light
> 
> enablePullDownRefresh： 是否开启下拉刷新
> 
> onReachBottomDistance： 页面上拉触底事件触发时距页面底部距离，单位为px

> tabBar：如果我们的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过 tabBar 配置项指定  
> tab 栏的表现，以及 tab 切换时显示的对应页面。 （ps：说白了，就是底部导航栏的设置）
> 
> 1.  当设置 position 为 top 时，将不会显示 icon
> 2.  tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
> 
> 其属性有：
> 
> color： tab 上的文字默认颜色
> 
> selectedColor： tab 上的文字选中时的颜色
> 
> backgroundColor： tab 的背景色
> 
> borderStyle： tabbar上边框的颜色， 仅支持 black/white
> 
> list：tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
> 
> position：可选值 bottom、top
> 
> list的属性值有：
> 
> pagePath： 页面路径，必须在 pages 中先定义
> 
> text： tab 上按钮文字
> 
> iconPath： 图片路径
> 
> selectedIconPath： 选中时的图片路径

> networkTimeout：可以设置各种网络请求的超时时间。 （ps：不一定非要设置哦）
> 
> 其属性说明：
> 
> request： wx.request的超时时间，单位毫秒
> 
> connectSocket： wx.connectSocket的超时时间，单位毫秒
> 
> uploadFile： wx.uploadFile的超时时间，单位毫秒
> 
> downloadFile： wx.downloadFile的超时时间，单位毫秒

> debug：可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info  
> 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。可以帮助开发者快速定位一些常见的问题。

好啦，一些app.json的配置就讲解到这里了，大家还是要多多上手项目来熟练运用哦！！！