微信小程序开发常用元素总结1-1

1-1框架

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

1. page > 哪个页面在最上面保存后哪个显示在最上面

2.window>小程序最上边显示栏

用于设置小程序的状态栏、导航条、标题、窗口背景色。

1. backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
2. navigationBarBackgroundColor：导航栏背景颜色，十六进制
3. navigationBarTitleText：导航栏标题文字内容
4. navigationBarTextStyle：导航栏标题颜色，支持 black / white
5. backgroundColor：窗口背景色

js中

3.tabBar>页面设置

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

1. color：tab 上的文字默认颜色，仅支持十六进制颜色
2. selectedColor：tab 上的文字选中时的颜色，仅支持十六进制颜色
3. backgroundColor：tab 的背景色，仅支持十六进制颜色
4. borderStyle：tabbar上边框的颜色， 仅支持 black / white

“list”数组 三个数组为页面下的三个分栏

1. pagePath：页面路径，必须在 pages 中先定义
2. text：tab 上按钮文字
3. iconPath：图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 postion 为 top 时，不显示 icon。
4. 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 左右两边为中间的一半