2.4 配置
小程序有两种配置:
(1)全局配置文件,用于小程序的全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
(2)页面配置文件,用于配置各个页面,将覆盖app.json的window配置项内容。
2.4.1 全局配置
为了演示所有全局配置,我们做了一个DEMO,完整代码可以查看下载资源中的ch02/settings,包含所有全局配置项目。
参考程序:app.json


配置项列表如表2-6所示。
表2-6 配置项列表

1. Pages
Pages设置程序中所有页面,第一个页面为初始页面。
Pages每一项的命名为路径+文件名,一般为pages/dictionary/file。不需要加文件后缀。
2. window
window设置程序中默认页面的状态栏、导航条、标题、窗口背景色,见表2-7。
表2-7 window属性

注意,如果页面需要启动下拉刷新,务必将enablePullDownRefresh设置为true。可以用onPullDownRefresh监听用户下拉刷新事件。
3. tarBar
tabBar可以配置多个tab页面,配置项包括指定tab栏的表现和tab切换时显示的对应页面。
tabBar的位置可以在顶部(top)或底部(bottom),如图2-5和图2-6所示。

图2-5 顶部示例

图2-6 底部示例
tabBar属性见表2-8。
表2-8 tabBar属性

list属性见表2-9。
表2-9 list属性

4. networkTimeout
设置各种网络请求的超时时间,见表2-10。
表2-10 networkTimeout属性

5. debug
可以在开发者工具中开启debug模式,在开发者工具的控制台面板调试信息以info的形式给出,信息有Page的注册、页面路由、数据更新、事件触发等,可以帮助开发者快速定位一些常见问题。
2.4.2 页面配置
每一个小程序页面都可以使用.json文件对本页面的窗口表现进行配置,页面的配置只能设置app.json中的window配置项的内容,页面中的配置项会覆盖app.json的window中相同的配置项。
页面的.json只能设置window相关的配置项,以决定本页面的窗口表现,所以无须写window键。例如:
参考程序:pages/route/route.json

导航栏的标题会随之改变,而导航栏背景颜色、导航栏标题颜色、窗口的背景色等特性保持不变,如图2-7所示。

图2-7