微信小程序文件类型
类型微信小程序前端开发文件wxsscss文件wxmlhtml文件jsjs文件json无小程序的开发和web开发很多情况下基本无差别
微信小程序的基本结构
每一个小程序都有一个全局配置文件 app.json小程序是由多个page页面构成一个page页面是由四种基本文件构成组件化开发（项目工程化）
微信小程序代码编写规范
属性用双引号js变量命名用驼峰命名文件及文件夹命名。。。参考：https://shimo.im/docs/EZKacqyM018gmopv
布局
所谓布局就是使用代码来控制页面中的每一个元素按照设计图中的样式来正确的排布。
用嵌套的思路来理解布局宏观布局和微观布局使用flex布局block，inline，inline-block
view类似于html中的div，默认是块状元素，独占一行；
可以设置display属性来改变；
display设置为inline时，不可以再设置宽和高，如果要设置宽高，display：inline-block
小程序中使用flex的布局。
flex容器将消除item的块状特性
flexible box 的缩写（弹性盒子）
flex container（弹性容器）flex item（容器中的子元素）所谓弹性布局是对弹性容器下的子元素使用flex进行布局。
将块状元素放置到弹性盒子中时，该块状元素的bloack属性就自动被消除掉。
示例代码：
wxml文件：
<!-- 示例 --> <view class="container"> <view class="chunk color1"></view> <view class="chunk color2"></view> <view class="chunk color3"></view> </view>wxss文件：
.container{ display: flex; /* flex-direction: row; */ } .chunk { width: 100px; height: 100px; } .color1{ background-color: green; } .color2{ background-color: blue; } .color3{ background-color: red; }显示效果：
审查元素：
flex-direction 默认为row
flex布局的优势
需求： 将色块翻转排列顺序
行的倒序
flex-direction:row-reverse
列的倒序
flex-direction:column-reverse
view组件：默认宽度100%
flex布局的justify-content属性
控制felx中的item的对齐方式的：
flex-start：上|左
flex-end: 下|右
当flex-direction为column-reverse|row-reverse时，反之即可
居中：center
space-between(实现的是一种平均分布)
除了头尾两个元素之外，中间的元素等距分布
space-around（实现了一种等距分布）
每一个flex-item元素左右两侧之间的距离都相等
flex布局的align-items属性
与justify-items属性相同有：flex-start,flex-end,center,没有space-around和space-between值
stretch： 交叉轴属性，实现拉伸效果baseline: 保证元素内部中的文字对齐（参考第一个子元素的文字的底线作为对齐的基线）flex布局的主轴与交叉轴
实现如下效果
代码实现：
//主轴上的对齐 justify-content: center; //交叉轴上的对齐方式 align-items: center;主轴和交叉轴的确定
主轴和交叉轴的确定并不是固定的，取决于flex-direction的取值：
column时，主轴为垂直方向的（从上往下）column-reverse时，主轴为垂直方向（从下往上）row-reverse时，主轴为水平方向（从右往左）取值为row时，主轴为水平方向（从左往右）实现如下效果（水平居中，垂直方向向上对齐）
分析：
整体按列排列
flex-direction:column
确定主轴和交叉轴
主轴：垂直方向 交叉轴：水平方向
确定主轴和交叉轴的对齐方式
水平（交叉轴）居中：align-items:center 垂直（主轴）向上对齐：justify-items:flex-start
换行处理（flex-warp）
flex-warp:warp
换行：换行会出现间距
出现间距的原因是因为外层容器的高度有富裕，flex将3号元素进行了居中处理
消除间距的方法：精确计算外层容器的高度，或者外层容器高度自适应都可以。
flex-warp:nowarp(默认值） 不换行
flex-warp:wrap-reverse 换行，翻转，如下所示：
