本文主要讲解的是小程序文档中的框架模块，说是讲解，其实更主要的是自己再整理下代码思路。
记得自己刚做完第一个小程序时，急需补充知识点，看过一个视频教程，有个讲师讲到这个模块，说这个不重要，于是就从头念到尾，读的还不认真，一点都不做解释，还跳读。如果没做过项目，自己也觉着老师讲的很对，但是做过项目后，发现老师这是对学生的开发误导，估计老师备课也就看看基础就开始教学了，确实挺坑人的，这个框架模块对小程序开发至关重要，尤其是复杂页面，你会发现这个框架的精华所在，不多说了，先简单列下内容有哪些。
- 目录结构
全局文件：app.js（添加全局变量或方法）、app.json、app.wxss
页面文件： page.js、page.json、page.wxml、page.wxss
- 配置（熟知，使用时知道存在这个配置参数）
app.json配置，全局配置。
page_xxx.json配置，某个页面配置。
- 逻辑层
小程序开发框架的逻辑层使用JavaScript编写的，逻辑层功能是：将数据进行处理后发送给视图层，同时接收视图层的反馈事件。
1. 注册程序、场景值：
App(obj) #注册小程序，及其生命周期
var app = getApp() #可以获取App()中的全局变量及方法
onLaunch()和onShow() #可以获取场景值，可以**获取来源应用、小程序或公众号的appId**。
2. 注册界面
Page(obj) #注册界面，包含初始数据data、生命周期函数、事件处理函数等。
data:{} #页面加载时，data将会（以JSON字符串的形式）由逻辑层传到渲染层。
生命周期函数（理解），明白其机制。
事件处理函数：系统（熟用）和自定义的。
3. 页面路由
框架管理 #在小程序中所有页面的路由全部由框架进行管理。
页面栈 #框架以栈的形式维护所有页面，熟悉页面入栈、出栈，不要尝试修改页面栈，可能会导致路由及页面状态错误。
路由方式（熟用）#做到页面切换用最合理的路由。
4. 模块化
文件作用域 #使用getApp()来获取全局数据
module.exports = {} #模块化:公共代码抽离，对外暴露接口，使用require(path)引入代码（不能是绝对路径）。
5. API
wx.on_xxx() #事件监听API
wx.xxx_Sync #同步API
异步API # 小程序提供的api大部分是异步的，参数有：success、fail、complete、Any（其它参数）。
所以，我们可以使用排除法，方法名中没有Sync和on，就可以使用其参数（未必准确，模糊判断）
- 视图层
构成（组件）：WXML(结构)、WXS(脚本) + WXSS(样式)
注意点：
1. <view id="item-{{id}}"> </view> #组件属性使用{{}}
2. <view wx:if="{{condition}}"> </view> #控制属性使用{{}}
3. <checkbox checked="{{false}}"> </checkbox> #不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
4. block wx:for #存在多个节点时
5. wx:key #列表中唯一的标识符
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch> #item中唯一的字符串或数字
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch> #表在 for 循环中的 item 本身。
6. 条件渲染
单节点：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
多节点：block wx:if
wx:if vs hidden #wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
7. 模板 #重复使用界面可以提取成模板
定义：
<template name="msgItem">
...
</template>
引用：
<template is="msgItem" data="{{...item}}"/>
8. 事件：视图层->逻辑层 #绑定在组件上，视图层反馈到逻辑层，可以传递参数。
冒泡事件：触发传递
非冒泡事件：触发不传递
bind、catch #bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
事件的截获阶段 #事件到达节点的顺序与冒泡阶段恰好相反
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
事件对象 #事件能传递对象，不同的事件传递的对象格式不同
baseEvent：currentTarget
customEvent: detail
touchEvent: touches、changedTouches
9. 静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
继续...
10. 选择器
#id #选择拥有 id="xxx" 的组件
view #选择所有 view 组件
view, checkbox #选择所有文档的 view 组件和所有的 checkbox 组件
view::after #在 view 组件后边插入内容
view::before #在 view 组件前边插入内容
11. 基础组件
所有组件与属性都是小写，以连字符-连接
type #属性类型要大写
EventHandler #事件处理函数名
Any #表示任意类型
data-* #自定义属性，事件触发是，会传递到逻辑层
WXS
12. wxs是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意：
wxs 支持所有版本，不依赖基础库。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
13. wxs exports: 通过该属性，可以对外共享本模块的私有变量与函数。
实例代码：
定义：
// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
引用：
//page/index/index.wxml
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
14. 获取页面的节点信息
wx.createSelectorQuery() #可以用于获取节点属性、样式、在界面上的位置等信息。
下面代码是项目中获取页面高度的代码：
query.select('#text_bd').boundingClientRect((res) => {
if (res) {
var height = res.height * app.globalData.rpxRatio;
// 获取list高度
that.data.element.css.height = that.appToPc(height);
that.data.widget_h = height;
}
}).exec()
注：在自定义组件中，推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ，这样会将选择器选取范围定在这个自定义组件内。
WXML节点布局相交状态API：可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
实例代码：#在目标节点（用选择器 .target-class 指定）与参照节点（用选择器 .relative-class 指定）在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发回调函数。
wx.createIntersectionObserver(this, { thresholds: [0.5, 1.0] }).relativeTo('.page-section').relativeToViewport().observe('.page-body', (res) => {
console.info('相交节点');
console.info(res);
res.id // 目标节点 id
res.dataset // 目标节点 dataset
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
});
注：在自定义组件中，推荐使用 this.createIntersectionObserver 来代替 wx.createIntersectionObserver ，这样会将选择器选取范围定在这个自定义组件内。
