微信小程序（小程序模型与宿主环境、跳页之tabBar导航跳转、逻辑层与程序注册构造器、小程序生命周期、运行机制、场景值、页面生命周期、页面用户行为）

【前言】2019.11.27
【内容】

小程序的运行环境分成渲染层和逻辑层

面试：小程序模型
渲染层（wxml、wxss）和逻辑层（js）的分离

模型的基本工作方式
1.数据驱动：渲染层和数据相关
2.脚本逻辑：逻辑层负责产生、处理数据
3.通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层

通常界面视图和变量状态是相关联的，如果有某种“方法”可以让状态和视图绑定在一起（状态变更时，视图也能自动变更），那就可以省去手动修改视图的工作，这个方法就是“数据驱动”

线程：
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

Native微信客户端：
一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（常用Native代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

Web view含义：
WebView也就是我们熟悉的“网络视图”，能加载并显示网页，可以将其视为一个浏览器。主要用于展示网络请求后的内容，就是将网络地址请求的内容展示在里面。

使用场景：
比如你自己写个APP，想要访问网络（如百度页面），可以不使用手机自带的浏览器，只需APP内部展示百度页面，这时候就可以用webView。
即在其他APP内部浏览百度页面

本质：
JsCore全称为JavaScriptCore ，是一款 JavaScript 引擎，通常会被叫做虚拟机，专门设计来解释和执行 JavaScript 代码。

常用引擎：
目前 JavaScript 引擎还有 Google 的 V8 ，Mozilla 的 SpiderMonkey，这些主要涉及 JS 的解析和处理方式。
拓展：Mozilla（缩写MF或MoFo）全称Mozilla基金会，是为支持和领导开源的Mozilla项目而设立的一个非营利组织，Firefox便 由 Mozilla 打造。

线程管理：
小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。

双向绑定：
在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，，在经过对比前后差异，把差异应用到原来的DOM树上，渲染出正确的UI界面。

小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。

逻辑层 App Service（APP服务）
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

作用：
由于 Workers 与主线程分开运行，因此 Service Worker 独立于与其关联的应用程序。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时H5的 web worker 在后台运行。
浏览器支持：
所有主流浏览器均支持 web worker，除了 Internet Explorer。
通俗理解：
web worker 是运行在后台的 JavaScript，不会影响页面的性能

在 JavaScript 的基础上，增加了一些功能，以方便小程序的开发：
①增加 App({}) 和 Page({}) 方法，进行程序注册和页面注册。
②增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈，至于实例与页面栈，后续会一一介绍。
③提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
④提供模块化能力，每个页面有独立的作用域。

逻辑组成上分为小程序级别和页面级别，所以小程序的生命周期也可以分为：程序生命周期和页面生命周期。

所以App方法也被称为程序构造器或者程序注册器。

小程序全局数据
小程序的JS脚本是运行在JsCore的线程里，小程序的每个页面各自有一个WebView线程进行渲染，但是小程序切换页面时，小程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程中

①onLaunch 生命周期函数–监听小程序初始化
当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

②onShow 生命周期函数–监听小程序显示
当小程序启动，或从后台进入前台显示，会触发 onShow

③onHide 生命周期函数–监听小程序隐藏
当小程序从前台进入后台，会触发 onHide

小程序的生命周期函数的调用顺序为：
onLaunch>onShow>onHide
小程序初始化→小程序显示→小程序隐藏

前台/后台状态

前台→后台—onHide
当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态；
后台→前台—onShow
当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。

综上可以看出，App的生命周期是由微信客户端根据用户操作主动触发的。

Page构造器接受一个Object参数
data属性是当前页面的初始数据
onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期
onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll ，这4个回调是页面的用户行为，即页面用户行为

onReady
触发时机：页面初次渲染完成时触发
首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的动态设置一般在onReady之后设置。

Page构造器接受一个Object参数
data属性是当前页面的初始数据
onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期
onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll ，这4个回调是页面的用户行为，即页面用户行为