
一个小程序有很多页面,每个页面又有各自的线程、生命周期和功能逻辑。关于小程序的生命周期、页面之间的跳转有哪些特殊的地方呢?
工具/原料
1.微信小程序开发工具
小程序启动过程
2.初次进入小程序的时候,微信客户端初始化好宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,把它注入到宿主环境。大概是这么个过程:创建线程(渲染层和逻辑层),启动小程序。载入基础库(WebView 基础库和 AppService 基础库)。载入小程序业务代码(下载或者从本地缓存中拿到)。使用App()注册程序实例。为了让小程序业务代码能够调用 API 以及组件,就需要在启动小程序后先载入基础库,接着再载入业务代码。由于所有小程序都需要注入相同的基础库,所以小程序的基础库会被提前内置在微信客户端。而基础库是热更新的,故一般等微信客户端携带上一个稳定版的基础库正式发布后,再进行新版本基础库的灰度和推送。
注册 App 实例
3.宿主环境提供了App()构造器用来注册一个程序 App。App 实例是单例对象,在其他 JS 脚本中可以使用宿主环境提供的getApp()来获取程序实例。App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。App()函数用来注册一个小程序。接受一个Object参数,其指定小程序的生命周期回调等。onLaunch小程序初始化完成时(全局只触发一次)触发onLaunch回调。在微信客户端中打开小程序有很多途径,对不同途径的打开方式,小程序有时需要做不同的业务处理。所以微信客户端会把打开方式带给onLaunch和onShow的调用参数options,我们可以根据参数来判断一些进入方式,以及做对应的逻辑处理。例如,我需要拿到从另外一个小程序跳转过来携带的信息,此时场景值应该是1037
4.onShow小程序启动,或从后台进入前台显示时触发onShow回调。通常我们用来处理数据和状态的更新。小程序进入后台状态:当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁。onHide小程序从前台进入后台时触发onHide回调。小程序进入前台状态:当再次进入微信或再次打开小程序,又会从后台进入前台。
获取 App 实例
5.我们可以使用全局的getApp()函数来获取到小程序 App 实例(在App()内的函数中使用this就可以拿到app实例。)。前面我们可以看到,App 的生命周期是由微信客户端根据用户操作主动触发的。故我们通过getApp()获取实例之后,不应该私自调用生命周期函数。
6.具体的原理是什么呢?小程序的 JS 脚本是运行在 JsCore 的线程里,小程序的每个页面各自有一个 WebView 线程进行渲染,所以小程序切换页面时,小程序逻辑层的 JS 脚本运行上下文依旧在同一个 JsCore 线程中。
7.因此,App 构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。
8.由于所有页面的脚本逻辑都跑在同一个 JsCore 线程,页面使用setTimeout或者setInterval的定时器,即使切换了页面,也需要自行清理定时器。可以选择:
9.在页面离开onUnload、onHide等的时候自行清理
10.做全局的定时器管理(当然也还是需要关闭时清理)
11.说到页面之间的数据共享,我们也该来讲讲小程序里页面的启动。
页面生命周期
12.宿主环境提供了Page(Object)构造器用来注册一个小程序页面,接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
13.注意:Object 内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销。
14.这里我们先来看看官方的生命周期图:
15.渲染层和逻辑层之间通信,是通过 Native 转发实现的。
16.逻辑层通过 Page 实例的setData方法传递数据到渲染层。由于需要两个线程的一些通信消耗,为了提高性能,每次只设置需要改变的最小单位数据。
17.生命周期顺序:onLoad->onShow->onReady。
18.页面生命周期函数:onLoad(Object query)页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。
19.onShow()页面显示/切入前台时触发。
20.onReady()页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
21.onHide()页面隐藏/切入后台时触发。
22.onUnload()页面卸载时触发。
结束语
23.页面的路由和跳转、切入方式,其实和用户的使用和交互紧紧相关,设计合理也是能大大提升用户体验的。其实这一节的内容,大部分都是小程序文档里面有的。只不过好些相关的内容被分散在各个地方,理解和使用起来还是需要查找,这一节就当作整理笔记吧。
注意事项
24.当前页面路径的参数获取,只能在onLoad(query)的query参数中获取,无法在onShow()中获取
25.onLoad、onReady和onUnload,一个页面都只会调用一次
26.页面是卸载还是切换到后台,这些除了与小程序的后台切换有关系,还会与页面的跳转、切换逻辑有关系