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

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

学习笔记

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


小结


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


相关文章
|
9月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
623 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
9月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
649 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
|
8月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
10月前
|
小程序
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
342 2
【01】微信支付商户申请下户到配置完整流程-微信商户申请-资料准备以及提交-微信商户密钥申请-申请+配置完整流程-优雅草卓伊凡
|
10月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
720 3
|
10月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
911 1
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
159 1
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
298 0