1-1框架
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
1. page > 哪个页面在最上面保存后哪个显示在最上面
2.window>小程序最上边显示栏
用于设置小程序的状态栏、导航条、标题、窗口背景色。
- backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light
- navigationBarBackgroundColor:导航栏背景颜色,十六进制
- navigationBarTitleText:导航栏标题文字内容
- navigationBarTextStyle:导航栏标题颜色,支持 black / white
- backgroundColor:窗口背景色
js中
3.tabBar>页面设置
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
1. color:tab 上的文字默认颜色,仅支持十六进制颜色
2. selectedColor:tab 上的文字选中时的颜色,仅支持十六进制颜色
3. backgroundColor:tab 的背景色,仅支持十六进制颜色
4. borderStyle:tabbar上边框的颜色, 仅支持 black / white
“list”数组 三个数组为页面下的三个分栏
- pagePath:页面路径,必须在 pages 中先定义
- text:tab 上按钮文字
- iconPath:图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 postion 为 top 时,不显示 icon。
- selectedIconPath:选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
margin:块元素相对于父容器的空白
margin:100rpx
上:100rpx 右:100rpx 下:100rpx 左:10rpx
margin:50rpx 100rpx
上:50rpx 右:100rpx 下:50rpx 左:100rpx
margin:50rpx 60rpx 100rpx
上:50rpx 右:60rpx 下:100rpx 左:60rpx
margin:50rpx 60rpx 80rpx 100rpx
上:50rpx 右:60rpx 下:80rpx 左:100rpx
border:设定边框
border-style:soild;
border-color:#xxxxxx;
border-width:xxrpx;
等价
border:soild #xxxxxx xxrp
Flexbox弹性盒模型
-
Justify-content:
flex-start 集中在首部
flex-end 集中在尾部
Center 中部
space-betwee 均匀分布
Space-around 左右两边为中间的一半