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

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

学习笔记

阿里云盘 : 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


小结


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


相关文章
|
1天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
6 1
|
1月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
15天前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
31 1
|
1月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
1月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
5天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
78 7
|
5天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
59 1
|
19天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
68 7
ly~
|
1月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
67 6
|
9天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
51 1

热门文章

最新文章