当前位置:网站首页>小程序全局配置
小程序全局配置
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 |
边栏推荐
- 【愚公系列】2022年7月 Go教学课程 004-Go代码注释
- 本季度干货导航 | 2022年Q2
- 怎么挑选好的外盘平台,安全正规的?
- Wechat applet regular expression extraction link
- leetcode刷题:二叉树15(找树左下角的值)
- model方法
- 计算lnx的一种方式
- sun. misc. Base64encoder error reporting solution [easy to understand]
- c語言oj得pe,ACM入門之OJ~
- Leetcode brush question: binary tree 13 (the same tree)
猜你喜欢
Enter the parallel world
leetcode刷题:二叉树14(左叶子之和)
【数字IC验证快速入门】6、Questasim 快速上手使用(以全加器设计与验证为例)
Go language | 02 for loop and the use of common functions
Oracle tablespace management
CTF逆向基础
Rainbond 5.7.1 支持对接多家公有云和集群异常报警
A way to calculate LNX
Station B up builds the world's first pure red stone neural network, pornographic detection based on deep learning action recognition, Chen Tianqi's course progress of machine science compilation MLC,
How to select the Block Editor? Impression notes verse, notation, flowus
随机推荐
Station B up builds the world's first pure red stone neural network, pornographic detection based on deep learning action recognition, Chen Tianqi's course progress of machine science compilation MLC,
July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)
常用的视图容器类组件
Mongodb basic exercises
信息学奥赛一本通 1340:【例3-5】扩展二叉树
计算lnx的一种方式
C langue OJ obtenir PE, ACM démarrer OJ
1: Citation;
【数字IC验证快速入门】3、数字IC设计全流程介绍
零道云新UI设计中
Informatics Orsay all in one 1339: [example 3-4] find the post order traversal | Valley p1827 [usaco3.4] American Heritage
leetcode刷题:二叉树12(二叉树的所有路径)
. Net distributed transaction and landing solution
强化学习-学习笔记4 | Actor-Critic
1、强化学习基础知识点
MySql的root密码忘记该怎么找回
[C language] merge sort
Mongodb/ document operation
Guidelines for application of Shenzhen green and low carbon industry support plan in 2023
小程序项目结构