微信小程序开发常用元素总结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 左右两边为中间的一半

相关文章
相关标签/搜索