当前位置:网站首页>小程序全局配置
小程序全局配置
2022-07-05 20:19:00 【'wx】
小程序根目录下的app.json文件是小程序的全局配置文件。常用配置项如下:
1.pages
记录当前小程序所有页面的存放路径
2.window
全局设置小程序窗口的外观
3.tabBar
设置小程序底部的tarBar效果
4.style
是否启用新版的组件样式
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 |
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#bfa",
"navigationBarTitleText": "wx",
"navigationBarTextStyle":"black",
"backgroundColor": "#bfa",
"enablePullDownRefresh": true
},
3.tabBar
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换(tabBar中只能由2-5个tab页签,只有底部tabBar才会显示icon图标)
tabBar6个组成部分
tabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
position | String | 否 | bottom | tabBar 的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中) 颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景色 | |
list | Array | 是 | tab 页签的列表, 最少 2 个、最多 5 个 tab |
"tabBar": {
"list":[
{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/message.png",
"selectedIconPath": "/images/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/contact.png",
"selectedIconPath": "/images/contact-active.png"
}
]
},
每个tab项的配置选项
属性 | 类型 | 必填 | 描述 |
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当 postion 为 top 时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径;当 postion 为 top 时,不显示 icon |
边栏推荐
- 信息学奥赛一本通 1340:【例3-5】扩展二叉树
- 银河证券在网上开户安全吗?
- CVPR 2022 | 常见3D损坏和数据增强
- [quick start of Digital IC Verification] 1. Talk about Digital IC Verification, understand the contents of the column, and clarify the learning objectives
- 物联网智能家居基本方法实现之经典
- . Net distributed transaction and landing solution
- leetcode刷题:二叉树18(最大二叉树)
- 14. Users, groups, and permissions (14)
- 解决Thinkphp框架应用目录下数据库配置信息修改后依然按默认方式连接
- Leetcode brush question: binary tree 14 (sum of left leaves)
猜你喜欢
Go language | 03 array, pointer, slice usage
Hong Kong stocks will welcome the "best ten yuan store". Can famous creative products break through through the IPO?
Wechat applet regular expression extraction link
[Yugong series] go teaching course in July 2022 004 go code Notes
Leetcode skimming: binary tree 16 (path sum)
A solution to PHP's inability to convert strings into JSON
【数字IC验证快速入门】1、浅谈数字IC验证,了解专栏内容,明确学习目标
如何形成规范的接口文档
leetcode刷题:二叉树14(左叶子之和)
Leetcode skimming: binary tree 17 (construct binary tree from middle order and post order traversal sequence)
随机推荐
微信小程序正则表达式提取链接
B站UP搭建世界首个纯红石神经网络、基于深度学习动作识别的色情检测、陈天奇《机器学编译MLC》课程进展、AI前沿论文 | ShowMeAI资讯日报 #07.05
leetcode刷题:二叉树18(最大二叉树)
Go language learning tutorial (XV)
【数字IC验证快速入门】6、Questasim 快速上手使用(以全加器设计与验证为例)
Is it safe for Galaxy Securities to open an account online?
ROS2专题【01】:win10上安装ROS2
ICTCLAS用的字Lucene4.9捆绑
强化学习-学习笔记4 | Actor-Critic
Bzoj 3747 poi2015 kinoman segment tree
sort和投影
About the priority of Bram IP reset
CCPC 2021威海 - G. Shinyruo and KFC(组合数,小技巧)
mongodb文档间关系
处理文件和目录名
ICTCLAS word Lucene 4.9 binding
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
炒股开户最低佣金,低佣金开户去哪里手机上开户安全吗
BZOJ 3747 POI2015 Kinoman 段树
【数字IC验证快速入门】3、数字IC设计全流程介绍