一、骰子布局(Flex布局)
骰子的一面,最多可以放置9个点。
1.单面一个
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了,设置项目的对齐方式,就能实现居中对齐和右对齐,设置交叉轴对齐方式,可以垂直移动主轴。
.box {
display: flex;
justify-content: center;
align-items: center;
}
2.单面两个
.box {
display: flex;
justify-content: space-between;
}
3.单面三个
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
4.单面四个
HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div class="box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</head>
</div>
<body>
<style type="text/css"></style>
</body>
</html>
CSS代码如下:
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
5.单面六个
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
}
6。单面九个
.box {
display: flex;
flex-wrap: wrap;
}
二、微信小程序项目环境搭建
1.全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:
(1)pages:是字符串类型,是页面路径列表,用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
(2)window:是对象类型,是全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。属性有navigationBarBackgroundColor(导航栏背景颜色,如 #000000)、navigationBarTextStyle(导航栏标题颜色,仅支持 black / white)、navigationBarTitleText(导航栏标题文字内容)、backgroundColor(窗口的背景色)、backgroundTextStyle(下拉 loading 的样式,仅支持 dark / light)等。
(3)tabBar:是对象类型,是底部tab栏的表现,如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。属性有color(tab 上的文字默认颜色,仅支持十六进制颜色)、selectedColor(tab 上的文字选中时的颜色,仅支持十六进制颜色)、backgroundColor(tab 的背景色,仅支持十六进制颜色)、list(tab 的列表)等。
(4)networkTimeout:是对象类型,是网络超时时间
(5)debug:是布尔型,表示是否开启debug模式,默认关闭
(6)functionalPages:是布尔型,表示是否启用插件功能页,默认关闭
(7)subpackages:是对象数组型,是分包结构配置
(8)workers:是字符串类型,是Worker 代码放置的目录
(9)requiredBackgroundModes:是字符串数组类型,是需要在后台使用的能力,如「音乐播放」
(10)plugins:是对象类型,是使用到的插件
(11)preloadRule:是对象类型,是分包预下载规则
......
2.页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性:
(1)navigationBarBackgroundColor:导航栏背景颜色,如 #000000
(2)navigationBarTextStyle:导航栏标题颜色,仅支持 black / white
(3)navigationBarTitleText:导航栏标题文字内容
(4)backgroundColor:窗口的背景色
(5)backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light
......