小程序的线程架构
每个小程序包含一个描述整体程序的 App 实例和多个描述页面的 page.
其中 App 由 3 个文件构成:
App.JSON 公共配置文件
App.wxss 公共样式文件
App.JS 主体逻辑文件
page 页面最多由 4 个文件构成:
page.jason 页面配置
page.wxml 页面结构
page.wxss 页面样式
page.JS 页面主体逻辑
App.JS 和 page.JS 中包含小程序在生命周期的每个阶段相应的事件.
典型的 App.JS 代码结构如下:
- App({
- onLaunch:function(){
- // 小程序启动时执行的初始化工作
- },
- onShow:function(){
- // 程序启动或从后台进入前台时, 触发执行的操作
- },
- onHide:function(){
- // 程序从前台进入后台时, 触发执行的操作
- },
- globalConf:{
- indexDate:'',
- matchData:''
- },
- dataCache:{},
- globalData:''
- })
典型的 page.JS 代码结构如下:
- Page({
- Data:{
- }
- onLoad:function(){
- // 页面加载时, 执行的初始化工作
- },
- onReady:function(){
- // 页面就绪后, 触发执行的操作
- },
- onShow:function(){
- // 页面打开时, 触发执行的操作
- },
- onHide:function(){
- // 页面隐藏时, 触发执行的操作
- },
- onUnload:function(){
- // 页面关闭时, 触发执行的操作
- },
- //Events handler
- viewTap:function(){
- this.setData({
- text:'set some data for updating view.'
- })
- }
- })
一个完整的小程序执行的过程或生命周期如下:
- App.onLaunch-->App.onShow-->page1.onLoad-->page1.onShow-->page1.onReady
- (打开程序, 第一个页面 page1 加载完成)
- -->page1.onHide-->page2.onLoad-->page2.onShow-->page2.onReady
- (从第 1 个页面打开第 2 个页面)
- -->page2.onUnload-->page1.onShow-->...-->App.onUnload
- (关闭 page2, 返回 page1... 退出小程序)
一个 page 的生命周期开始于 onLoad 事件, 在整个生命周期内 onLoad,onReady,onUnload 这三个事件各执行一次, onHide 和 onShow 事件在每次页面隐藏和显示时都会触发.
当用户手动触发小程序的退出箭头时, 小程序仅触发 App.Hide, 下次进入小程序时会触发 App.onShow 以及当前页的 page.onShow. 仅当小程序在后台运行超过一定时间未被唤起, 或者用户手动在小程序的控制栏里点击退出程序, 或者小程序内存占用过大被系统关闭时, 小程序将被销毁, 会触发 App.onUnload 事件.
每个小程序分为 2 个线程, view 与 appServer.
view 线程 | appServer 线程 |
.wxml + wxss
ios:safari Android:X5 浏览器 开发工具:chrome | .js
ios:JavaScriptCore Android:X5 内核 开发工具:nwjs |
view 线程负责解析渲染页面 (wxml 和 wxss 文件).
appServer 线程负责运行 JS.appServer 线程运行在 jsCore(安卓下运行在 X5 中, 开发工具运行在 nwjs 中). 由于 JS 不跑在 webView 里, 就不能直接操纵 DOM 和 BOM, 这就是小程序没有 Windows 全局变量的原因.
来源: https://www.cnblogs.com/idreamo/p/10853965.html