微信小程序---全局配置及页面配置

简介: 微信小程序---全局配置及页面配置

学习笔记

阿里云盘 : https://www.aliyundrive.com/s/5Zrfw9EpKwa

提取码:37sc


全局配置


全局配置文件及常用配置项

52eb3abd044842e8afc96583ec5f306d.png



全局配置—window


小程序窗口组成部分

2.png


了解window节点常用的配置项


3.png



设置导航栏的标题


设置步骤:app.json => window => navigationBarTitteText


需求:把导航条上的标题,从默认的“WeChat”修改为"黑马程序员",效果如图所示:


4.png


设置导航栏的背景色


设置步骤:app.json => window => navigationBarBackgroundColor


需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b ,效果如图所示:


5.png


设置导航栏的标题颜色


设置步骤:app.json -> window -> navigationBarTextStyle


需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示:

6.png


注意: navigationBarTextStyle 的可选值只有 black 和 white


全局开启下拉刷新功能


概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。


设置步骤:app.json -> window -> 把 enablePullDownRefresh 的值设置为 true


注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!


设置下拉刷新时窗口的背景色


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


7.png


设置下拉刷新时loading的样式


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

8.png


注意: backgroundTextStyle 的可选值只有 light 和 dark


设置上拉触底的距离


概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。


设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值


注意:默认距离为0,如果没有特殊需求,建议使用默认值即可。


全局配置—tabbar


什么是tabbar


tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:


  1. 底部 tabBar
  2. 顶部 tabBar


9.png


注意:


  1. tabBar中只能配置 最少 2 个 、 最多 5 个 tab 页签
  2. 当渲染 顶部 tabBar 时, 不显示 icon ,只显示文本


tabbar的6个组成部分


10.png


tabbar节点的配置项


11.png

每个tab项的配置选项

12.png


页面配置


页面配置文件的作用

小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。


页面配置全局配置的关系

小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。


如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。


注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。


页面配置中常用的配置项


13.png


小结


这一块内容其实就是页一些的简单样式配置,在我们熟悉的小程序中大家都能看到,这部分内容相对来说非常简单,不用去过多的记住,心里有一个大概即可,等项目开发需要的时候看看配置的属性即可!


相关文章
|
3月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
121 1
|
4月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
4月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
3月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
51 1
|
3月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
46 0
|
4月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
4月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
10天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
53 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
448 3