网页网站项目综合,网络推广协议,sqlite 做网站,手机上编程软件微信小程序开发学习笔记《7》全局配置以及小程序窗口
博主正在学习微信小程序开发#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。全局配置官方文档
一、全局配置文件及常用的配置项
小程序根目录下的app.json 文件是小程序的全局配置文件。
常用的配置项如…微信小程序开发学习笔记《7》全局配置以及小程序窗口
博主正在学习微信小程序开发希望记录自己学习过程同时与广大网友共同学习讨论。全局配置官方文档
一、全局配置文件及常用的配置项
小程序根目录下的app.json 文件是小程序的全局配置文件。
常用的配置项如下:
pages记录当前小程序所有页面的存放路径window全局设置小程序窗口的外观tabBar设置小程序底部的tabBar 效果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站学习黑马程序员课程时的学习笔记如果有什么问题烦请联系我删除。
