微信小程序开发学习笔记《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。
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第1张图片

window节点中常用的配置项

微信小程序开发学习笔记《7》全局配置以及小程序窗口_第2张图片
图中为常用的配置项,建议所有学习者阅读一下官方文档。
以上常用配置主要可以分为三类,第一类带有navigationBar,用于配置导航栏;第二类带有backgroud,主要是配置背景;第三类控制页面效果。

三、window中navigationBar配置

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

3.1 navigationBarTitleText设置导航栏标题

设置步骤:app.json -> window -> navigationBarTitleText
我们打开别人的公众号,导航栏往往会是别人公众号的名称,这个需求可以通过设置navigationBarTitleText实现。
代码与效果如图所示:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第3张图片
上半部分为没有设置navigationBarTitleText的展示,导航栏并没有内容;下半部分为设置"navigationBarTitleText": “王子的小程序”,导航栏就展示了“王子的小程序”。

3.2 navigationBarBackgroundcolor设置导航栏背景色

设置步骤:app.json -> window -> navigationBarBackgroundColor
需求:把导航栏标题的背景色,从#000000 修改为#2b4b6b,效果如图所示:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第4张图片
可以看到,上半图展示了导航栏背景色为#000000,下半张图通过修改背景色为#2b4b6b。
注:navigationBarBackgroundColor仅支持#色号设置,不支持直接使用red、blue等单词文本设置。

3.3 navigationBarTextStyle设置导航栏文字颜色

设置步骤: app.json -> window -> navigationBarTextStyle
需求:把导航条上的文字,从black修改为white,效果如图所示:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第5张图片
如图,上半部分导航栏文字颜色设置为黑色,下半部分导航栏文字颜色设置为白色。
注意:navigationBarTextStyle的可选值只有black和 white

四、enablePullDownRefresh设置全局下拉刷新

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

效果如下:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第6张图片
刷新的空白区域为背景区域,只有下拉才能看到。
注意:在app.json中启用下拉刷新功能,会作用于每个小程序页面! true是布尔类型,不能用双引号包裹,不然变成字符串型了。

五、设置下拉刷新背景

5.1 backgroundColor设置下拉刷新背景色

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色。设置步骤为;app.json -> window ->为backgroundColor指定16进制的颜色值#efefef。效果如下:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第7张图片
默认颜色如四中图片所示,通过修改如上图。

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

当全局开启下拉刷新功能之后,默认窗口的loading 样式为dark,如果要更改loading样式的效果,设置步骤为app.json -> window ->为backgroundTextStyle指定 light值。
backgroundTextStyle仅支持 dark / light设置
效果如下:
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第8张图片
如5.1图为默认加载样式,通过修改为light如上图所示。

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

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值
微信小程序开发学习笔记《7》全局配置以及小程序窗口_第9张图片
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
50px意味着,当上拉滑动页面时,滚动条不足50px时,加载更多数据。

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

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

你可能感兴趣的:(小程序,微信小程序,学习)