走进微信小程序
刚创建小程序时的样子:
- 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属性将失效。
六个属性
- flex-direction 如何排列,横着?竖着?
flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap 一行塞不下,如何换行?
flex-wrap: nowrap | wrap | wrap-reverse;
wrap:第一行在上 - flex-flow 前两个的简写形式
- justify-content 主轴上对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
start:偏左
space-between:两端对齐 - align-items 垂直线对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
- align-content 多根轴对齐方式