【 微信小程序 】全局配置项

2024年4月28日 互联网

全局配置

当页面配置和全局配置冲突时 根据就近原则 最终效果以页面配置为准
app.json

  • pages
    • 记录当前小程序的所有页面的存放路径
  • window
    • 全局设置小程序窗口的外观
  • tabBar
    • 设置小程序的地步的效果样式
  • style
    • 是否启用新版的组件样式(启用:v2)

基本结构

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#ed556a","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},// 启用新版的组件样式"style": "v2","tabBar":{"color":"#8a8a8a","selectedColor":"#d4237a","borderStyle":"black","backgroundColor":"#ffffff","list": [{......}]}  
}

配置项

window

导航栏标题文字内容"navigationBarTitleText" : "xxxxx"导航栏背景颜色"navigationBarBackgroundColor" : "16进制颜色"导航栏标题颜色 仅支持white 、 black"navigationBarTextStyle" : "white / black"
// ===============================================
下拉刷新时 能显示的刷新部分窗口的背景色"backgroundColor" : "16进制颜色"下拉loading小圆点的样式 仅支持 dark / light"backgroundTextStyle" : "dark / light"是否全局开启下拉刷新 默认false 会作用于每个小程序页面"enablePullDownRefresh" : Boolean页面上拉触底事件触发时距页面的距离 默认50px (滚动条距离底部的距离 自动加载更多数据)"onReachBottomDistance" : Number

tabBar
最少两个 最多五个tab选项
当渲染顶部tabBar时 不会显示icon图标 只会显示文本内容

tabBar的位置"position" :"bottom / top"
// ================================
tabBar的背景色"backgroundColor" : ""
// ================================
tabBar未选中时的图片路径"iconPath" : ""	
tabBar选中时的图片路径"selectediconPath" : ""
// ================================
tabBar上边框的颜色"borderStyle" : ""
// ================================
tabBar未选中时 文字的颜色"color" : ""
tabBar选中时 文字的颜色"selectedColor" : ""
// ================================
tabBar页签选项 至少两个、最多五个对象"list":[{"pagePath":"<页面路径 页面必须在pages中预先定义>","iconPath":"<未选中时的图标路径>","selectedIconPath":"<选中时的图标路径>""text":"tab显示的文字"}]
最新文章