微信小程序开发学习笔记《7》全局配置以及小程序窗口

微信小程序开发学习笔记《7》全局配置以及小程序窗口

博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。全局配置官方文档

一、全局配置文件及常用的配置项

小程序根目录下的app.json 文件是小程序的全局配置文件。

常用的配置项如下:

1. pages记录当前小程序所有页面的存放路径
2. window全局设置小程序窗口的外观
3. tabBar设置小程序底部的tabBar 效果
4. style·是否启用新版的组件样式

pages和style之前学习过了，这次主要学习window和tabBar。

二、window小程序窗口设置

小程序窗口主要由下图三个部分组成，分别是navigationBar、backgroud、page页面。
app.json文件中的window配置可以配置navigationBar、backgroud。

window节点中常用的配置项

图中为常用的配置项，建议所有学习者阅读一下官方文档。
以上常用配置主要可以分为三类，第一类带有navigationBar,用于配置导航栏；第二类带有backgroud，主要是配置背景；第三类控制页面效果。

三、window中navigationBar配置

主要讲解上图三个配置项：navigationBarTitleText、navigationBarBackgroundcolor、navigationBarTextStyle。
注：在设置此节内容时，如果没有生效，请设置"navigationStyle": “default”。

3.1 navigationBarTitleText设置导航栏标题

设置步骤:app.json -> window -> navigationBarTitleText
我们打开别人的公众号，导航栏往往会是别人公众号的名称，这个需求可以通过设置navigationBarTitleText实现。
代码与效果如图所示:

上半部分为没有设置navigationBarTitleText的展示，导航栏并没有内容；下半部分为设置"navigationBarTitleText": “王子的小程序”，导航栏就展示了“王子的小程序”。

3.2 navigationBarBackgroundcolor设置导航栏背景色

设置步骤:app.json -> window -> navigationBarBackgroundColor
需求:把导航栏标题的背景色，从#000000 修改为#2b4b6b，效果如图所示:

可以看到，上半图展示了导航栏背景色为#000000，下半张图通过修改背景色为#2b4b6b。
注：navigationBarBackgroundColor仅支持#色号设置，不支持直接使用red、blue等单词文本设置。

3.3 navigationBarTextStyle设置导航栏文字颜色

设置步骤: app.json -> window -> navigationBarTextStyle
需求:把导航条上的文字，从black修改为white，效果如图所示:

如图，上半部分导航栏文字颜色设置为黑色，下半部分导航栏文字颜色设置为白色。
注意:navigationBarTextStyle的可选值只有black和 white

四、enablePullDownRefresh设置全局下拉刷新

概念:下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤: app.json -> window ->把enablePullDownRefresh的值设置为true.

效果如下：

刷新的空白区域为背景区域，只有下拉才能看到。
注意:在app.json中启用下拉刷新功能，会作用于每个小程序页面! true是布尔类型，不能用双引号包裹，不然变成字符串型了。

五、设置下拉刷新背景

5.1 backgroundColor设置下拉刷新背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色。设置步骤为;app.json -> window ->为backgroundColor指定16进制的颜色值#efefef。效果如下:

默认颜色如四中图片所示，通过修改如上图。

5.2 backgroundTextStyle设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading 样式为dark，如果要更改loading样式的效果，设置步骤为app.json -> window ->为backgroundTextStyle指定 light值。
backgroundTextStyle仅支持 dark / light设置
效果如下：

如5.1图为默认加载样式，通过修改为light如上图所示。

六、onReachBottomDistance设置上拉触底的距离

概念:上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值

注意:默认距离为50px，如果没有特殊需求，建议使用默认值即可。
50px意味着，当上拉滑动页面时，滚动条不足50px时，加载更多数据。

总结：小程序根目录下的app.json 文件是小程序的全局配置文件
app.json文件中的window配置可以配置navigationBar、backgroud。

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记，如果有什么问题，烦请联系我删除。