【微信小程序】全局配置

简介: 全局配置文件及常用的配置项全局配置 - window1. 小程序窗口的组成部分2. 了解 window 节点常用的配置项 3. 设置导航栏的标题4. 设置导航栏的背景色 5. 设置导航栏的标题颜色6. 全局开启下拉刷新功能7. 设置下拉刷新时窗口的背景色8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离

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


小程序根目录下的 app.json 文件是小程序的 全局配置文件 。常用的配置项如下:


① pages


记录当前小程序所有页面的存放路径


② window


全局设置小程序窗口的外观


③ tabBar


设置小程序底部的 t9abBar 效果


④ style


是否启用新版的组件样式


全局配置 - window


1. 小程序窗口的组成部分


2. 了解 window 节点常用的配置项


属性名 类型 默认值 说明


navigationBarTitleText String 字符串 导航栏标题文字内容


navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000

navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white

backgroundColor HexColor #ffffff 窗口的背景色


backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light

enablePullDownRefresh Boolean false 是否全局开启下拉刷新


onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px


3. 设置导航栏的标题


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


需求:把导航栏上的标题,从默认的 “ WeChat ”修改为“测试 ”,效果如图所示:

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle": "black"
  },

4. 设置导航栏的背景色


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


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

"navigationBarBackgroundColor": "#ff1176",


5. 设置导航栏的标题颜色


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


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


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

6. 全局开启下拉刷新功能


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


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

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


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


当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:


app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef 。效果如下:

代码:

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff1176",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh" :true,
    "backgroundColor":"#efefef"
  },

8. 设置下拉刷新时 loading 的样式


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


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


9. 设置上拉触底的距离


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


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


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


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

热门文章

最新文章