微信小程序

第一章—小程序微信生态圈

2011年1月21日，腾讯公司推出一个即时通讯服务的免费应用程序，由张小龙带领的腾讯广州研发中心产品团队打造

张小龙（腾讯广州研发中心团队经理）：团队经理张小龙所带领的团队曾成功开发过QQ邮箱等互联网项目

腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。

1. 小程序：英文名 Mini Program
   　　2017年年初，第一批小程序正式低调上线
   　　2018年元旦，开放了小游戏，启动页面重点推荐了小游戏「跳一跳」。
   　　优势：
   　　　 　1. 无需下载，随走随关
   　　　 　2. 功能丰富，体验更简便
   　　　 　3. 接口众多，可以进行不断的开发 。
   　　　 　4. 流量入口大，背靠日活9.6亿的微信
   　　　 　5. 有强大的微信生态环境
   　　小程序对比APP的好处：
   　　　　 1.开发成本低
   　　　 　2.获客成本低于App
   　　　 　3.开发周期更短，节省开发成本
   　　　 　4.App已经饱和
   　　市场优势：
   　　　　 1. 用户：减轻内存，用完即可关闭，不占用空间
   　　　　 2. 创业者：应用广泛，创业更简单
   　　　　 3. 自带推广：店铺根据距离来排名，与品牌大小无关，也就是说，用户离你越近，你就排得越前。
   　　　　 4. 小程序码：小程序码
   　　　　 5. 成本更低：小程序的花费仅为APP的十分之一
   　　小程序限制：
   　 　　　1. 不能被分享到微信朋友圈
   　 　　　2. 所有更新需要经过腾讯的审核
   　 　　　3. 小程序的代码不能超过2MB
   　　小程序对比APP的劣势：
   　　　　 1. 从技术层面来说，小程序的体验不及APP
   　　　　 2. 从功能体量上来说，小程序不及APP
   　　　 　3. 从开放性来说，小程序不及APP
   　　小程序占了方便快捷的优势，而且解决了手机内存的问题
2. 小游戏
   　　优点：产品简单好玩易操作，上手操作几乎无门槛
   　　缺点：这类游戏产品的定位是短平快，容易玩腻
   　　小游戏VS手游：
   　　　　小游戏：抓住了用户贪图新鲜感喜欢跟风的心理惯性
   　　　　手游：让用户长久的沉迷，因此留存率相对较高，小游戏本质还是H5游戏
   　　小游戏限制：
   　　　　 1. 大小限制：4MB以内
   　　　　 2. 轻量化：适用于快餐式，短链条、用户快速审美疲劳失去兴趣
   　　　 　3. 抄袭严重
   　　　 　4. 诱导分享限制
   　　　　 5. 产业困境
   　　　　 6. 手游市场打压：充钱复活
3. 公众号
   　　微信公众号是开发者或商家在微信公众平台上申请的应用账号
   　　公众号是以微信用户的一个联系人形式存在的
4. 公众平台
   　　微信公众平台分订阅号和服务号、企业号三类平台

第二章—小程序版本，极限管理，编写设计理念

不要随意将功能不完整的小程序demo提交审核发布，如果发现随意发布，后台审核人员会进行封号处理

1. 小程序严格意义上来说有４个版本：
   　　1. 开发版(开发优化阶段)
   　　2. 体验版(管理员和开发人员体验和测试阶段)
   　　3. 审核中版本
   　　4. 线上版(开发微信用户体验)
   一个团队多人同时参与同一个小程序项目
2. 人员组织结构
   　　
3. 项目的工作流程：
   　　需求提出—设计—开发—体验—测试—发布
4. 微信4大价值观：
   　　1. 一切以用户价值为依归
   　　2. 让创造发挥价值
   　　3. 好的产品应该是用完即走的
   　　4. 让商业化存在于无形之中
5. 编写原则：
   　　1. 导航清晰
   　　2. 流程明确
   　　3. 重点突出
   　　4. 符合预期
   　　5. 等待与反馈
   　　6. 异常处理
   　　7. 内容和文案准确友好
   　　8. 和谐统一
   　　9. 平台适配
6. 在设计加载等待状态时，应注意以下事项：
   　　1. 若载入等待时间较长，应提供取消操作，并使用进度条显示载入的进度
   　　2. 载入过程中，应保持动画效果；无动画效果的加载很容易让人产生该界面已经卡死的错觉
   　　3. 不要在同一个页面同时使用超过1个加载动画
7. 用户体验测试的一些建议
   　　1. 用户体验测试，可以在设计、开发、测试等全部阶段使用
   　　2. 尽早进行用户体验测试
   　　3. 用户测试之前需要确定好需要被检验的流程和任务，需要为用户构建明确的目标，并提示用户以完成任务的方式完成目标
   　　4. 最好选择产品真实，作为被测试的用户
   　　5. 设计开放性的问题让用户回答
   　　6. 在用户测试过程中，需要全程做好记录

第三章—发布审核，人员及目标结构分析

上传代码是用于提交体验或者审核使用的

开发版—仅仅开发人员和管理员可以浏览项目

体验版—只要在小程序后台，加入到体验人员名单里，即可扫码体验小程序

注意：在发布体验版本之前，只有管理员和开发人员才可以体验使用小程序，其他人员均无法使用。

点击发布后，即可发布小程序，新发布后的小程序一般会在12-24小时内在客户端更新

1. 小程序提供了两种发布模式：全量发布和分阶段发布/灰度发布
   　　1. 全量发布：当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本
   　　2. 分阶段发布/灰度发布：指分不同时间段来控制部分用户使用最新的发布版本
   　　3. 一般来说，普通小程序发布时采用全量发布即可，当小程序承载的功能越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法
2. 小程序目录结构，里面包括不同类型的文件：
   　　1. JSON 配置文件
   　　2. WXML 模板文件
   　　3. WXSS 样式文件
   　　4. JS 脚本逻辑文件
3. 开发中主要将其归为两个级别：
   　　1. 小程序级别app
   　　2. 页面级别pages
4. 后来又新增了两个：
   　　1. sitemap.json小程序收录设置
   　　2. project.config.json项目配置文件
5. 根目录文件：
   　　1. pages，必须，用于存放页面文件的文件夹
   　　2. utils，非必，用于存放公共js的文件夹
   　　3. app.js，必须，小程序逻辑文件
   　　4. app.json，必须，小程序配置文件
   　　5. app.wxss，非必，小程序公共样式文件
   　　6. project.config.json，更新后自带，项目配置文件(无需关注)
   　　7. sitemap.json，更新后自带，小程序收录设置文件（无需关注）
6. 小程序级别：
   
7. 页面APP级别：
   　　
   在[pages]文件夹下，每个页面都具备一个独立的文件夹

第四章—JSON配置文件

JSON作用：对微信小程序进行全局配置，设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等

分类：小程序全局配置文件app.json和页面配置文件page.json

1. app.json
   
2. window属性
   
3. page.json
   　　特性：覆盖性，即每一个小程序页面可以使用同名 .json 文件来对本页面的窗口表现进行配置，但页面中配置项会覆盖 app.json 的 window 中相同的配置项
   　　常用配置属性
   
4. navigationStyle导航栏样式：
   　　　1. 最低版本要求：微信客户端 7.0.0），客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效
   　　　2. 图片存储：本地图片过大会有限制提示，一般本地只存项目所用图标即可，如果是大图片，在开发里可以用链接指向图片位置
5. JSON的值只能是以下几种数据格式：
   
6. 小程序配置也叫全局配置，页面配置也叫局部配置
   　　页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性

第五章—WXML模块文件一

根元素：page　每一个页面都具备一个根元素：

WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言

1. 标签闭合编译：
   　　 WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误
2. 标签写法：
   　　单标签／双标签
   
   　　解析结果
   
   WXML中的属性是大小写敏感
3. WXML和 HTML不一样的地方：
   　　1.标签名不一致
   　　2.属性不一致（WXML采用的是MVVM模式）
4. 数据
   　　1. 设置数据：this.setData（{属性，属性值}）
   　　2. 获取数据：this.data 属性名
5. 试图容器标签：
6. 文本标签：
7. wx:if="{{}}" 决定是否渲染，条件渲染
   数据绑定 {{}} 里面可以进行算术运算
8. wx:for="{{}}" 列表渲染，下标默认为 index 当前只默认为 item
9. wx:for-item="" 指定数组当前元素的变量名
10. wx:for-index="" 指定数组当前下标的变量名
11. 不会渲染读取出来
12. wx:key="" 指定列表中项目的唯一的标识符
    　　小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

第六章—WXML模块文件二

key：不建议用index，因为用key可能导致第一次执行循环体初始化失败
　　　正确的做法是尽量使用理想的 key 值，比如每项都有的唯一 id或者名字
　　　
条件渲染：多路分支 wx:if=" " 　　 wx:elif=" " 　　 wx:else

block并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

1. hidden隐藏元素：相当于v-show
   　 eg：
   　 　　　　　　　　　true 隐藏　false渲染
   　 hidden元素对块状布局才有效
2. wx:if与hidden：
   　 1. wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染
   　 2. wx:if是惰性的，切换开销大，但初始化开销小
   　 3. hidden组件始终会被渲染，只是简单的控制显示与隐藏
   　 4. 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好
3. 模板 template 引入步骤：
   　 1. template.wxml定义模板
   　 2. 在其他页面通过import和include引入
   　 3. 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
   　 import：使用目标文件定义的 template
   　 include：可以将整个代码引入
4. 共同属性：所有wxml 标签都支持的属性
   
5. 获取自定义属性值
   　event.currentTarget.data.***
   　event.currentTarget代表的是注册了监听点击事件的组件

第七章—WXSS样式文件

WXSS：WeiXin Style Sheets小程序样式文件

全局样式/页面公共样式　　app.wxss
局部样式/页面样式　　page.wxss，会覆盖 app.wxss 中相同的选择器

1. wxss仅支持部分选择器：
   
   与css相比，wxss扩展的特征有：①尺寸单位 ②样式导入

2. WXSS引入了　rpx（responsive pixel响应像素）尺寸单位

3. 原理：
   　　小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px

4. 用@import语句导入外联样式表
   　　内联样式：style 接收动态的样式，要尽量避免将静态的样式写进 style 中，以免影响渲染速度

第八章—布局适配与物理逻辑像素

1. 屏幕尺寸：
   　　屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
   　　常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等
2. 物理像素/屏幕分辨率/物理分辨率：
   　　一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点
   　　单位：px，即1px=1个像素点
   　　屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的
3. 逻辑像素/设备独立像素：
   　　DIP：（Device Independent Pixel）　　反映在CSS/JS代码里的像素点数　　
   　　比如: css像素-----逻辑像素
4. 屏幕像素密度：
   　　每英寸屏幕所拥有的像素数，英文简称PPI单位：dpi
   　　PPI：（pixels per inch）
   　　像素密度越高，代表屏幕显示效果越精细
5. 设备像素比：
   　　DPR：（Device Pixel Ratio, DPR）一个设备的物理像素与逻辑像素之比
   　　当像素比为1:1时，使用1个物理像素显示1个逻辑像素
   　　当像素比为2:1时，使用4个物理像素显示1个逻辑像素　
6. 显示标准/视网膜显示屏：
   　　Retina　　由摩托罗拉公司研发
   　　工程师尺寸就是逻辑像素，设计师尺寸就是物理像素
7. CSS中的1px并不等于设备的1px：
   　　1px边框问题：解决：transform：scale（0.5）
8. rpx
   　　小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
   　　1rpx=（screenWidth / 750）px
9. vw和vh的视图单位：
   　　小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
   　　小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
10. 二倍图：1个逻辑像素等于2个物理像素

第九章—适配小结、移动端1px与选择器权重

1. WXSS优先级：
   
2. 移动端1px解决方案：
   　 1. 媒体查询：
   　　　 css写法：
   　　　
   　　　 JS写法
   　　　
   　　　 优点：简单，好理解
   　　　 缺点：兼容性差
   　 2. border-image：
   　 　　
   　 　　缺点：需要制作图片，圆角可能出现模糊
   　 3. box-shadow：
   　 　　
   　 　　优点：没有圆角问题
   　 　　缺点：颜色不好控制
   　 4. transform: scale(0.5)：常用比较灵活
   　　　
   　 5. 媒体查询 + transfrom：
   　

第十章—Flex布局-容器属性

微信小程序 View视图标签支持两种布局方式：Block 和 Flex
采用flex布局的元素，一般简称为“容器”
容器内的元素简称为“项目”或者“元素”
水平方向的是主轴（main axis），垂直方向的是交叉轴（cross axis）

1. 容器属性：
   　 1. 弹性盒模型：
   　 　　display:flex
   　 2. 元素的排列方向：
   　　　 flex-direction:row（默认值） | row-reverse | column（垂直） | column-reverse
   　 3. 元素是否换行：
   　 　　flex-wrap:nowrap（默认值） | wrap | wrap-reverse
   　 4. flex-flow：相当于direction和wray的集合
   　 　　row nowrap；顺序排列且不换行
   　 　　row-reverse wray；顺序排列且换行
   　 5. 元素在主轴上的对齐方式justify-content：
   　 　　flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
   　 6. 元素在交叉轴的对齐方式align-items：
   　 　　stretch（默认值） | center | flex-end | baseline | flex-start
   　 7. 多行元素在交叉轴的对齐方式align-content：
   　 　　stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly
2. align-content会以多行作为整体进行对齐，容器必须开启换行

第十一章—Flex布局-项目属性

1. order：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数
2. flex-shrink：项目收缩因子，默认值为1
3. flex-grow：项目扩张因子，默认值为０
4. flex-basis：
   　 1. 当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性
   　 2. 当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性
   　 3. 当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高
5. flex ：flex-grow，flex-shrink，flex-basis的简写方式
   　　值设置为none，等价于00 auto
   　　值设置为auto，等价于1 1 auto
6. align-self：auto（默认值） | flex-start | center | flex-end | baseline |stretch
   　　设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items

第十二章—补充BFC

1. BFC全程：　Box、Formatting Context　　块级格式化上下文
   　　BFC：Block formatting context　　块级格式化上下文　　独立的渲染区域
   　　IFC：Inline formatting context
2. 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的高度时，浮动元素也参与计算
3. 哪些元素会生成BFC
   　 1. 根元素
   　 2. float属性不为none
   　 3. position为absolute或fixed
   　 4. display为inline-block, table-cell, table-caption, flex, inline-flex
   　 5. overflow不为visible
4. BFC的应用
   　 1. 浮动覆盖问题
   　 2. 清除内部浮动
   　 3. 防止垂直margin重叠

第十三章—IFC、FFC、GFC

1. CSS3新属性：
   　 1. IFC：Inline Formatting Context　　行级格式化上下文
   　 2. FFC：Flexible Formatting Context　　弹性盒格式化上下文
   　 3. GFC：Grids Formatting Context　　网格格式化上下文
   Grid 布局则是将容器划分成"行"和"列"，产生单元格
2. CSS中主要有三种流：
   　 1. normal flow　　普通流
   　 2. floats　　浮动流
   　 3. Absolute Posioning 　　定位流
3. 脱离文档流：
   　　将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位

第十四章—JS逻辑文件

小程序的主要开发语言是 JavaScript

1. JS 作用：
   　　①开发者使用 JS来开发业务逻辑；
   　　②调用小程序的 API 来完成业务需求
2. 调用API案例
   　　
   　　
   　　
3. wx.scanCode(Object object)调起客户端扫码界面进行扫码
   　　
   　　
4. ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现
5. ECMAScript(简称ES)是一个语言标准，javascript则是基于这个标准实现的脚本语言
6. 2011年6月发布ECMAscript 5版本，2015年6月17日发布了ES6版本
7. 小程序中的 JS同浏览器中的JS以及 NodeJS 中的JS是不相同的：
   　　1. 浏览器中的JavaScript 构成：
   　　　　ES　DOM　BOM
   　　2. NodeJS中的JavaScript 构成：
   　　　　ES　NPM　Native
   　　3. 小程序中的JavaScript 构成：
   　　　　ES　小程序框架　小程序API
8. 小程序不能用JQuery和NPM 包
9. 小程序目前可以运行在三大平台：
   　　1. iOS平台，包括iOS9、iOS10、iOS11
   　　2. Android平台
   　　3. 小程序IDE
10. 模块化：
    　　通过module.exports 或者 exports 对外导出接口，用require导入模块（写在最上面）
11. 执行顺序：
    　　1. 浏览器中脚本严格按照加载的顺序执行，即自上而下执行
    　　2. 小程序中的脚本执行顺序有所不同，小程序的执行的入口文件是 app.js ，并且会根据其中 require 的模块顺序决定文件的运行顺序
12. 作用域：
    　　在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响
    　　当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的

第十五章—小程序模型与宿主环境

小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层
小程序模型：渲染层和逻辑层的分离

1. 模型的基本工作方式：
   　　1. 数据驱动：渲染层和数据相关
   　　2. 脚本逻辑：逻辑层负责产生、处理数据
   　　3. 通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层
2. 数据驱动基本原理：
   　　WXML可以先转成JS对象，然后再渲染出真正的DOM树
3. 小程序的渲染层和逻辑层分别由2个线程管理：
   　　1. 渲染层的界面使用了WebView 进行渲染数据驱动：渲染层和数据相关
   　　2. 逻辑层采用JsCore线程运行JS脚本
4. 通信模式：
   　　一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（常用Native代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发
   　　
5. WebView：
   　　WebView（网络视图）能加载显示网页，可以将其视为一个浏览器，它使用了WebKit渲染引擎加载显示网页
   　　优点：
   　　　1. 可以直接显示和渲染web页面，直接显示网页
   　　　2. 可以直接使用html文件（网络上或本地文件）作布局
   　　　3. 可以和JavaScript交互调用
6. JsCore：
   　　JsCore全称为JavaScriptCore ，是一款 JavaScript 引擎，通常会被叫做虚拟机，专门设计来解释和执行 JavaScript 代码
   　　目前 JavaScript 引擎还有 Google 的 V8 ，Mozilla 的 SpiderMonkey，这些主要涉及 JS 的解析和处理方式
   　　Firefox便 由 Mozilla 打造

第十六章—跳页之tabBar导航跳转

在App.json里设置tabBar属性，它下面可以设置一下属性：

list下边的属性值：

第十七章—逻辑层与程序注册构造器

1. 逻辑层 App Service（APP服务）：
   　　开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service
2. ServiceWorker：
   　　Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件
   　　作用：
   　　　　1. 当应用程序处于没有活动状态时，Service Worker 可以从服务器接收推送消息。这可以让应用程序向用户显示推送通知，即使它未打开
   　　　　2. Service Worker 不能直接访问 DOM
3. web worker：web worker 是运行在后台的 JavaScript，不会影响页面的性能
   　　作用：
   　　　　为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程
   　　浏览器支持：
   　　　　除了 Internet Explorer，所有主流浏览器均支持 web worker
   　　注意：
   　　　　Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断，这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用
4. 逻辑层 App Service
   　　注意：
   　　　　小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等
   　　缘由：
   　　　　小程序逻辑层的行为类似 ServiceWorker，而ServiceWorker的本质是一种 Web Worker，它本质上是一个与主浏览器线程分开运行的 JavaScript 文件。由于 web worker 位于外部文件中，所以无法访问相关BOM和DOM
   　　在 JavaScript 的基础上，App Service增加了一些功能：
   　　　　1. 增加 App({}) 和 Page({}) 方法，进行程序注册和页面注册
   　　　　2. 增加 getApp 和 getCurrentPages 方法
   　　　　3. 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力
   　　　　4. 提供模块化能力，每个页面有独立的作用域
5. 程序构造/注册器App()：
   　　逻辑层分为小程序级别和页面级别，所以小程序的生命周期也可以分为：程序生命周期和页面生命周期
   　　注册小程序：App()方法也被称为程序构造器或者程序注册器
   　　App() 参数：
   
   　　小程序的JS脚本是运行在JsCore的线程里，小程序的每个页面各自有一个WebView线程进行渲染，但是小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中，比如定时器需要消除

第十八章—小程序生命周期、运行机制、场景值

1. 小程序生命周期：
   　　1. onLaunch 生命周期函数–监听小程序初始化，全局只触发一次
   　　2. onShow 生命周期函数–监听小程序显示，后台进入前台
   　　3. onHide 生命周期函数–监听小程序隐藏，前台进入后台
2. 小程序的生命周期函数的调用顺序为：
   　　onLaunch>onShow>onHide
   　　小程序初始化→小程序显示→小程序隐藏
3. 小程序运行机制：
   　　1. 小程序启动
   　　　　冷启动：用户首次打开或小程序主动销毁后再次打开的情况
   　　　　热启动：已经打开过该程序在一定时间内再次打开，只需要小程序切换到前台
   　　注意：小程序没有重启的概念
   　　2. 前台/后台状态：
   　　　　前台→后台：当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时
   　　　　后台→前台：当用户再次进入微信或再次打开小程序
4. 小程序销毁：
   　　只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁
5. onLaunch，onShow方法会返回一个参数对象，里面包括多个参数，常用有：
   　　1. path是打开小程序的页面路径
   　　2. query是打开小程序页面url的参数
   　　3. scene是打开小程序的场景值
6. scene场景值：用来描述用户进入小程序的路径

第十九章—页面生命周期

1. 页面构造器/注册器Page()：
   　　Page构造器接受一个Object参数
   　　1. data属性是当前页面的初始数据
   　　2. onLoad、onReady、onShow、onHide、onUnload为页面生命周期
   　　3. onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll 为页面用户行为
2. 生命周期函数：
   　　
3. 页面生命周期函数的调用顺序为：
   　　onLoad>onShow>onReady
4. 小程序切换后台：
   　　onHide页面隐藏-onHide小程序隐藏
5. 小程序后台切换前台：
   　　onShow小程序显示-onShow页面隐藏
6. 加载一个小程序进来之后的执行顺序为：
   　　onLaunch–onShow（小程序显示）–onLoad–onShow（页面显示）onReady–onHide

第二十章—页面栈和API跳转

1. 页面数据data的操作限制：
   　　1. 直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致
   　　2. 每次设置的数据不应超过1024KB
   　　3. 不要把data中任意一项的value设为undefined
2. 页面栈：
   　　页面层级：第一个元素为首页，最后一个元素为当前页面
   　　
   　　最大层级为10层
3. wx.navigateTo({})：
   　　打开新页面，将原来的页面保留在页面栈中，会增加页面栈大小，直到页面栈大小为10
   　　在跳入到下一个页面的时候，目标页面同时进入页面栈中，在这种情况下点击手机的返回按钮才可以跳转到上一个页面
   　　新添加的页面与原来的页面状态是独立的
   　　获取获取当前的页面栈：getCurrentPages()
4. wx.navigateBack({})：
   　　页面回退，会减少页面栈大小，知道页面栈大小为1
   　　关闭当前页面，返回上一页面或多级页面
   　　有一个参数delta，不写即为默认值1，返回上一个页面
   　　当delta的取值大于现有的返回页面数时，则返回到用户进入小程序的第一个页面
   　　可以结合页面栈返回首页，
   　　
5. wx.redirectTo({})：
   　　页面重定向，不会增加页面栈大小
   　　关闭当前页面，跳转到应用内的某个页面
   　　新跳转到的页面与原来的页面状态是独立的
   　　优缺点：这样的跳转可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间
6. wx.switchTab({})：
   　　跳转tabBar页面专用API
   　　ab切换，跳转的页面必须是app.json 中 tabBar 配置的页面。跳转到tabBar页面同时关闭其他非tabBar页面
   　　wx.navigateTo和wx.redirectTo只能打开非tabBar页面，switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
7. wx.reLaunch({})：
   　　关闭所有页面，打开到应用内的某个页面。即重新启动， 可以打开任意页面
   　　跳转tabBar页面：
   　　　　1.最好选择 wx.switchTab()
   　　　　2.也可以用 wx.reLaunch()
   　　Tab 切换对应的生命周期：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面
   　　

第二十一章—组件跳转、hove样式、层级准备

给元素添加触屏点击样式，可以给元素添加hover-class属性
注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用

1. navigator组件跳转属性：
   　　1.url：必填项，当前小程序内的跳转链接
   　　2.open-type：默认为navigate跳转方式：
   　　3.target：默认为self，在哪个目标上发生跳转，默认当前小程序
   　　4.delta：默认为1，当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
   　　注意：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator 的子节点背景色应为透明色
2. 路由跳转规范：
   　　页面深度限制：页面深度为10
   　　如何正确使用页面跳转：
   　　　　1.对于可逆操作，使用wx.navigateTo。比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
   　　　　2.对于不可逆操作，使用wx.redirectTo。比如用户登录成功后，关闭登录页面，不能返回到登录界面
   　　　　3.对于一些介绍性等不常用页面，可以用wx.redirectTo或wx.navigateBack
   　　　　4.对于类似九宫格、列表项，使用跳转
   　　　　5.不要在首页使用wx.redirectTo，这样会导致应用无法返回首页
3. 页面层级准备：
   　　在视图层内，小程序的每一个页面都独立运行在一个页面层级上
   　　小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；相对地，wx.navigateBack会销毁一个页面层级
   　　准备阶段3部曲：.
   　　　　1.启动一个WebView
   　　　　2.在WebView中初始化基础库
   　　　　3.注入小程序WXML结构和WXSS样式
   　　注意：对于wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化

第二十二章—路由及组件跳转传参

1. 路由跳转传参：
   　　1.给元素绑定事件bindtap="toDetail"和绑定完自定义属性data-item="{{item}}"
   　　2.在JS中通过事件对象获取event。currentTarget.dataset.item
2. 路由跳转传参：
   　　1.url：跳转页面的路径
   　　2.success：接口调用成功的回调函数
   　　3.fail：接口调用失败的回调函数
   　　4.complete：接口调用结束的回调函数（调用成功，失败都会执行）
3. url参数：
   　　参数与路径之间用？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔
4. navigator组件跳页传参：
   　　直接在url里拼接即可

第二十二章—视图容器组件

1. view视图容器：
   　　 ①hover-class 这个属性后面接string，string是一个类名，在这个组件被点击的时候，加上string这个类，相当于PC端的鼠标移动上去的效果
   　　 ②hover-stop-propagation 布尔类型值，用于阻止hover-class的冒泡行为
   　　 ③hover-start-time 点击view之后，string延迟多少毫秒出现
   　　 ④hover-stay-time 手指松开后string保留时间，单位毫秒
2. 滑块视图容器swiper和滑块swiper-item组件
   　　
   　　 swiper—参数