小程序----全局配置(一)

简介: 小程序----全局配置

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

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

  1. pages
    记录当前小程序所有页面的存放路径
  2. window
    全局设置小程序窗口的外观
  3. tabBar
    设置小程序底部的 tabBar 效果
  4. style
    是否启用新版的组件样式

2. window

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

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

2.3. 设置导航栏的标题

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

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的微信小程序",
    "navigationBarTextStyle":"black"
  },

2.4. 设置导航栏的背景色

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

把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b

只支持16进制

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "我的微信小程序",
    "navigationBarTextStyle":"black"
  },

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

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

把导航栏上的标题颜色,从默认的 black 修改为 white

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

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "我的微信小程序",
    "navigationBarTextStyle":"white"
  },

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

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

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

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

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "我的微信小程序",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true
  },



相关文章
|
6月前
|
JSON 小程序 数据格式
微信小程序的tabbar怎么配置
微信小程序的tabbar怎么配置
457 2
|
7月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
41 1
|
7月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
167 0
|
5月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
63 0
|
7月前
|
JSON 小程序 安全
微信小程序介绍、账号申请、开发者工具目录结构详解及小程序配置
微信小程序介绍、账号申请、开发者工具目录结构详解及小程序配置
|
7月前
|
小程序 Windows
【微信小程序】全局配置和windows节点常用配置
【微信小程序】全局配置和windows节点常用配置
|
7月前
|
JSON 小程序 数据格式
【微信小程序】-- 页面配置(十八)
【微信小程序】-- 页面配置(十八)
【微信小程序】-- 页面配置(十八)