走进微信小程序与flex布局

走进微信小程序

刚创建小程序时的样子：

• pages中存放的是各个页面与页面的配置信息
• utils存放的是工具
• app.js/app.json/app.wxss 全局的js/json/css
• project.config.json 是整个编辑器的配置，在设置里就可以进行更改
• sitemap.json

实验：

当你用开发者工具创建了一个项目以后，将所有内容删除，看编辑器的提示：

根据提示创建app.json

app.json中写入{} 并保存

根据提示创建

保存后就会自动出现hello/hello的目录结构
可以看出这四个文件是最最基本的文件：js处理逻辑、json存储数据、wxml页面展示、wxss修改样式
所以全局也是需要这几个文件的，除了html，app.js/app.wxss/app.json，其中app.js需要App({})

---

Flex

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
Flex 布局语法教程

display: flex;//注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

六个属性

1. flex-direction 如何排列，横着?竖着？
   flex-direction: row | row-reverse | column | column-reverse;
2. flex-wrap 一行塞不下，如何换行?
   flex-wrap: nowrap | wrap | wrap-reverse;
   wrap:第一行在上
3. flex-flow 前两个的简写形式
4. justify-content 主轴上对齐方式
   justify-content: flex-start | flex-end | center | space-between | space-around;
   start:偏左
   space-between:两端对齐
5. align-items 垂直线对齐方式
   align-items: flex-start | flex-end | center | baseline | stretch;
6. align-content 多根轴对齐方式

实现一行平均分三列

• flex: 0 0 30%;//根据实际调整百分比 不如gird好用! grid当你拖拽屏幕时也是保持着三列, 记录于html css笔记中
• width: calc(33% - 30px);//这样写width比上面好用,30px是我设置的margin值,就因为有margin所以才会有问题