走进微信小程序与flex布局

走进微信小程序

刚创建小程序时的样子:

走进微信小程序与flex布局

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

实验:

当你用开发者工具创建了一个项目以后,将所有内容删除,看编辑器的提示:
走进微信小程序与flex布局
根据提示创建app.json
走进微信小程序与flex布局
app.json中写入{} 并保存
走进微信小程序与flex布局
根据提示创建
走进微信小程序与flex布局
保存后就会自动出现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 多根轴对齐方式
上一篇:温习数据算法—罗盘时钟


下一篇:web前端:原生css球体弹跳效果,animation动画keyframes应用,指定停止动画animation-play-state:paused