微信小程序开发笔记（一）

微信小程序开发笔记

微信小程序基础

微信小程序文件类型

类型微信小程序前端开发

文件 wxss css

文件 wxml html

文件 js js

文件 json 无

小程序的开发和web开发很多情况下基本无差别
微信小程序的基本结构
- 每一个小程序都有一个全局配置文件 app.json
- 小程序是由多个page页面构成
- 一个page页面是由四种基本文件构成
组件化开发（项目工程化）

类型	微信小程序	前端开发
文件	wxss	css
文件	wxml	html
文件	js	js
文件	json	无

flex布局

微信小程序代码编写规范
- 属性用双引号
- 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
    换行，翻转，如下所示：