第二天学习日志

最新推荐文章于 2023-12-15 23:45:00 发布

weixin_41939072

最新推荐文章于 2023-12-15 23:45:00 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/weixin_41939072/article/details/92839831

版权

一、骰子布局（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>

</div>

</div>

</head>

</div>

<body>

</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

......

weixin_41939072

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二天学习日志

一、骰子布局（Flex布局）骰子的一面，最多可以放置9个点。1.单面一个首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了，设置项目的对齐方式，就能实现居中对齐和右对齐，设置交叉轴对齐方式，可以垂直移动主轴。.box {display: flex;justify-content: center;align-items: cent...
复制链接

扫一扫