小程序

课程大纲：

（1）场景
（2）容器与项目元素
（3）主轴与交叉轴
（4）容器属性

盒模型分类：

盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式

微信小程序 View视图标签支持两种布局方式：Block 和 Flex

注意：
所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明

容器与项目元素：

简称：
日常开发中，采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”

布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

flex不单是一个属性，还包含了一套新的属性集
属性集包括设置容器和项目两部分

容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse

容器属性
④项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

项目元素属性
①多余空间时元素放大比例flex-grow：0（默认值） |
②空间不足时元素缩小比例flex-shrink:1（默认值） |
③元素在主轴上占据空间flex-basis:auto（默认值） |
④flex 是grow、shrink 、basis的简写
⑤元素的排列顺序order:0（默认值） |
⑥单独对某个元素设置交叉轴对齐方式align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

容器属性flex-direction：

flex-direction 属性
作用：设置项目排列方向
值：
①row（默认值）：主轴横向，项目沿主轴排列，从左到右排列

flex-direction 属性
值：
②row-reverse：row的反方向，从右到左排列

flex-direction 属性
值：
③column：主轴纵向，项目沿主轴排列，从上到下排列

主轴与交叉轴：

在介绍各个属性之前，需要先明确一个坐标轴
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

容器属性flex-direction：

flex-direction 属性
作用：设置项目排列方向
值：
①row（默认值）：主轴横向，项目沿主轴排列，从左到右排列

flex-direction 属性
值：
②row-reverse：row的反方向，从右到左排列

flex-direction 属性
值：
③column：主轴纵向，项目沿主轴排列，从上到下排列

容器属性flex-wrap：

flex-wrap 属性
作用：设置是否允许项目多行排列，以及多行排列时换行的方向
值：
①nowrap（默认值）：不换行。如果单行内容过多，则溢出容器
②wrap：容器单行容不下所有项目时，换行排列。
③wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

flex-wrap 属性：

容器属性flex-flow：

flex-flow 属性
相当于direction和wrap的集合
flex-flow: row nowrap;/* 顺序排列且不换行 /
flex-flow:row-reverse wrap;/ 反序排列且自动换行 */

容器属性justify-content

justify-content 属性
作用：设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
值：
①flex-start（默认值）：项目对齐主轴起点，项目间不留空隙

justify-content 属性
值：
②center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离

justify-content 属性
值：
③flex-end：项目对齐主轴终点，项目间不留空隙

justify-content 属性
值：
④space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。

justify-content 属性
值：
⑤space-around：与space-between相似。
不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

justify-content 属性
值：
⑥space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

容器属性align-items：
align-items属性
作用：元素在交叉轴的对齐方式
值：
①stretch（默认值）：当未设置项目尺寸，项目拉伸至填满行高。
②flex-start：项目顶部与行起点对齐。
③center：项目在行中居中对齐。

align-items属性值：
④flex-end：项目底部与行终点对齐。
⑤baseline：项目的第一行文字的基线对齐，以子元素的第一行文字对齐。

容器属性align-content：

align-content 属性
作用：多行元素在交叉轴的对齐方式
值：
①stretch（默认值）：当未设置项目尺寸，项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
②flex-start：首行在交叉轴起点开始排列，行间不留间距
③center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等

align-content 属性
值：
④flex-end：尾行在交叉轴终点开始排列，行间不留间距
⑤space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0
⑥space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半

align-content 属性值：
⑦space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

交叉轴上的多行对齐：

通过flex-wrap: wrap使得元素在一行放不下时进行换行。
在这种场景下就会在交叉轴上出现多行，多行情况下，flex布局提供了align-content属性设置对齐。

重点：
align-content与align-items比较类似，同时也比较容易迷糊。下面会将两者对比着来看它们的异同。
首先明确一点：align-content会以多行作为整体进行对齐，容器必须开启换行。

对比：

区别：
在属性值上，align-content比align-items多了两个值：space-between和space-around

课程大纲：

（1）项目属性集合
（2）order、flex-grow、flex-shrink、flex-basis、flex、align-self

项目属性

项目属性：
设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。

项目元素属性集合：
order、flex-grow、flex-shrink、flex-basis、flex、align-self

项目属性：
①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>
②项目的收缩因子flex-shrink: 1（默认值） |
③项目的扩张因子flex-grow: 0（默认值） |
④项目width属性替代品flex-basis: auto（默认值） | px
⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性
⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

项目属性order

order属性
作用：
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。

项目属性flex-shrink

flex-shrink属性
作用：
时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数
未设置flex-shrink时，默认flex-shrink值为1

flex-shrink属性案例：
一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。分别对这项目1和项目2设置flex-shrink值为2和3。

在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：

flex-shrink属性案例：
①item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
②item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
③item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

注意：其中计算时候值如果为小数，则向下取整。

flex-shrink属性案例：
当项目压缩因子相加小于1时，参与计算的溢出空间不等于完整溢出空间

flex-shrink属性案例：
总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
①item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px
②item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px
③item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px

扩张因子flex-grow: 0（默认值） |

场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。

取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。

扩张因子flex-grow: 0（默认值） |
案例：

项目属性flex-basis
flex-basis属性
当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

项目属性flex

flex 属性
本质：
flex-grow，flex-shrink，flex-basis的简写方式。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

项目属性align-self：

align-self属性
设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，可以对项目的对齐方式做特殊处理。
默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

Formatting Context格式化上下文

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的 Formatting context 格式化上下文有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC简介

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，

它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

（1）内部的Box会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）计算BFC的高度时，浮动元素也参与计算（清除浮动）
ul–li–float------父级–高度塌陷----overflow:hidden----触发BFC属性—计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display为inline-block, table-cell, table-caption, flex, inline-flex
（5）overflow不为visible，

overflow:hidden—触发BFC属性—BFC的区域不会与float box重叠

BFC的应用-浮动覆盖问题

1. 浮动覆盖问题
   1）根据BFC布局规则第3条：
   每个元素的margin box的左边， 与包含块border box的左边相接触。即使存在浮动也是如此。
   因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
   

BFC的应用-浮动覆盖问题

1. 浮动覆盖问题
   根据BFC布局规则第四条：
   BFC的区域不会与float box重叠。
   我们可以通过触发main生成BFC， 来实现自适应两栏布局。当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。效果如下：
   

BFC的应用-清除浮动影响

2. 清除浮动影响（元素浮动后造成父级高度塌陷）
   根据BFC布局规则第六条：
   计算BFC的高度时，浮动元素也参与计算。为达到清除内部浮动，以触发父级生成BFC，那么父级par在计算高度时，par内部的浮动元素child也会参与计算。
   

3. 清除浮动影响（元素浮动后造成父级高度塌陷）
   

BFC的应用-防止边距重叠

3. 垂直方向上的兄弟元素会发生边距重叠（听从较大的margin外边距）
   
   垂直方向上的兄弟元素会发生边距重叠（听从较大的margin外边距）
   方案：可以在任意一个元素外面再包裹一层容器，并触发该容器生成一个BFC。那么两个块便不属于同一个BFC，就不会发生margin重叠了。

BFC的应用

小结：
（1）以上的几个例子都体现了BFC布局规则第五条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

（2）BFC应用
①浮动覆盖问题
②清除内部浮动
③防止垂直margin重叠

Web页面的布局，常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。

IFC简介

IFC简介：行级格式化上下文Inline Formatting Context
IFC布局规则：
①在一个行内格式化上下文中，盒是一个接一个水平放置
②这些盒之间的水平margin，border和padding都有效
③盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
④行内块级元素之间默认留有间隙
⑤矩形区域包含着来自一行的盒子叫做line box，line box的宽度由浮动情况和它的包含块决定，高度由line-height的计算结果决定

FFC简介

FFC全称：Flexible Formatting Context弹性盒格式化上下文
简介：
CSS3引入了一种新的布局模型——flex布局。
flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)

GFC简介

GFC全称：Grids Formatting Context网格格式化上下文
简介：
CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，使用频率较低，简单了解即可。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

文档流

场景：
在布局时候，较早时经常会使用浮动，使用浮动元素会脱离文档流，那文档流到底是什么东西呢？
"流"是render tree（渲染树）在布局时的一个概念。

渲染规则：
流实际上规定了元素怎么排放以及相互作用（之前讲的渲染规则）。
在CSS中主要有三种流： normal flow（普通流，我们经常将的脱离，脱离的就是它）、floats浮动流、Absolute Position定位流（position不为static、relative）。

脱离文档流

脱离文档流
将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

小结

（1）BFC为块级格式化上下文
（2）IFC为行级格式化上下文
（3）GFC和FFC为CSS3新布局属性

课程大纲

（1）业务逻辑案例
（2）调用API案例
（3）ECMAScript----
（4）小程序执行环境
（5）模块化
（6）作用域与全局变量

前言：
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。
小程序的主要开发语言是 JavaScript

JS 作用：
①开发者使用 JS来开发业务逻辑；
②调用小程序的 API 来完成业务需求。

①业务逻辑案例

②调用API案例

调用API：
除了业务逻辑外，开发者还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、地理定位、本地存储、微信支付、扫一扫、界面交互等等。
在初始化的项目里，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。
更多API调用到之后课程详细介绍。

本节结合界面交互API做个简单案例

调用界面交互API案例：
wx.showToast(Object object)显示消息提示框

扫一扫API案例：
wx.scanCode(Object object)调起客户端扫码界面进行扫码

场景：
为了让用户减少输入，我们可以把复杂的信息编码成一个二维码，利用宿主环境/微信客户端wx.scanCode这个API调起微信扫一扫，用户扫码之后，wx.scanCode的success回调会收到这个二维码所对应的字符串信息。

扫一扫API案例：

ECMAScript

在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。
ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。

简介：
ECMAScript(简称ES)是一个语言标准，javascript则是基于这个标准实现的脚本语言。

发展历史：
①命名：
javascript于1996年发布了第一版，当时的名字其实不叫javascipt，而是叫livescript，不过发布之后一直不温不火，正好这个时候sun公司推出来了一个面向对象的语言—Java，Java拥有很好的跨平台特性，所以很快得到了市场的认可。
②改名：
为了蹭Java的热度，livescript的母公司Netscape网景公司，就将livescript改为javascript，事实证明，这次名字改的非常明智。

③三足鼎立：
javascript的火爆引起了微软公司的注意，他们很快也推出了Jscript脚本语言，以此来抗衡Netscape公司，并且当时还有一门浏览器脚本语言，叫ScriptEase，这样市场上就有了三种脚本语言，并且各个语言各有特色，互不兼容。
④制定规范
1997年，Netscape给欧洲计算机制造商协会(European Computer Manufacturers Association，简称ECMA)提交了一个草案，要求根据javascript来制定一个浏览器脚本语言标准。

④制定规范：
ECMA邀请了Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了一个技术委员会—第 39 技术委员会(TC39)，共同商讨制定了一个脚本语言的规范：ECMAScript。各个脚本语言必须按照规范来实现和约束自己的功能。
当然这个规范也是不断发展的，第一版规范叫做：ECMA-262，现在则以es+年份来命名，基本每年发一次新规范。
由此，JavaScript 的正式名称是 ECMAScript 。

⑤近期发布
2011年6月发布ECMAscript 5版本
2013年3月，ECMAScript 6草案冻结，不再添加新功能。新的功能设想将被放到ECMAScript 7。2013年12月，ECMAScript 6草案发布。然后是12个月的讨论期，听取各方反馈。2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。所以ECMAScript 2015简称ES6。ES5和ES6
⑥分析：
关于Netscape为什么要提交草案建立标准，有一种说法是为了提高javascript的权威性，和行业影响力

JS是 ECMAScript 一种实现后，即ES是一个语言标准，JS则是基于这个标准实现的脚本语言。
理解这个关系可以帮助开发者理解小程序中的 JS同浏览器中的JS以及 NodeJS 中的JS是不相同的。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：
语法、类型、语句、关键字、操作符、对象

浏览器的JavaScript

浏览器中的JavaScript 是由 ECMAScript 和 BOM（浏览器对象模型）以及 DOM（文档对象模型）组成的，Web前端开发者很熟悉这两个对象模型，它使得开发者可以去操作浏览器的一些表现。

NodeJS的JavaScript

NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模块组成，NodeJS的开发者会非常熟悉 NPM 的包管理系统，通过各种拓展包来快速的实现一些功能

小程序的JavaScript

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。

注意：
①同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，
②因为缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

小程序执行环境

明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后
开发者还需要注意到另外一个问题，不同的平台的小程序的脚本执行环境也是有所区别的。

小程序目前可以运行在三大平台：
①iOS平台，包括iOS9、iOS10、iOS11
②Android平台
③小程序IDE

这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准

兼容问题：
目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的，例如：箭头函数、let const、模板字符串等…

方案：
一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了解决这类问题，小程序IDE提供语法转码工具，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。
开发者需要在项目设置中，勾选 ES6 转 ES5 开启此功能

模块化

模块化：
浏览器中，所有 JavaScript 是在运行在同一个作用域下的，定义的参数或者方法可以被后续加载的脚本访问或者改写。
同浏览器不同，小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。

模块示例：
B.js 引用模块A，并使用A暴露的方法完成排序的操作
header.js文件引用sort.js暴露的模块，完成排序操作

①根目录下新建data→sort.js文件 ②编写模块，进行导出暴露

模块示例：
③header.js文件利用require导入模块

④使用模块暴露导出的排序方法进行排序

脚本执行顺序

执行顺序：
浏览器中脚本严格按照加载的顺序执行，即自上而下执行
小程序中的脚本执行顺序有所不同，小程序的执行的入口文件是 app.js ，并且会根据其中 require 的模块顺序决定文件的运行顺序
app.js示例：

作用域

同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。

在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响

案例：
①在脚本 a.js 中定义局部变量

②在脚本 b.js 中无法访问 a.js 定义的变量

全局变量设置：
当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的
案例：
①在脚本 a.js 中设置全局变量

全局变量设置：
案例：
②在脚本 b.js 中访问 a.js 定义的全局变量

注意：上述示例只有在 a.js 比 b.js 先执行才有效，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置

app.js定义全局变量
定义全局变量num（userInfo为用户数据，暂时不用关注）

操作全局变量
①获取以及修改 global 变量的方法

②获取 更改后的global 变量