支付宝小程序启动

353 阅读1分钟

不支持cookie和session,支持storage

小程序线程

视图线程(webview) + worker线程,二者同时运行,相互通信,通过native来进行中转;微信官方的图能说明,支付宝和微信一致;

webview和worker初始冷启动过程

中间省略了native层

sequenceDiagram
    par 并行
        webview->>webview: init
    and
        worker->>worker: init
    end
    worker->>worker: app.onLaunch
    worker->>worker: app.onShow
    worker->>worker: app.onLoad
    worker->>worker: app.onShow,完成page创建
    webview->> + worker: 视图初始化完成,notify worker
    worker->> - webview: 发送初始化数据给视图进行渲染
    webview->>webview: 收到数据,完成第一次渲染,进入ready状态
    webview->>worker: 通知worker进行page.onReady调用
    worker->>worker: 进入活动状态,等待用户事件

触发setData

中间省略了native层

sequenceDiagram
webview->>worker: 用户触发事件
worker-->webview: 事件处理函数setData, 发送新数据,通知视图线程进行渲染
webview-->webview: 重新渲染

退到后台:

中间省略了native层
webview线程不会重新渲染

sequenceDiagram
worker->>worker: 调用page.onHide,线程进入存活状态

onHide里面setData会发生什么呢?

进入前台:

中间省略了native层

sequenceDiagram
worker->>worker: 调用page.onShow,线程进入活动状态

如果onshow里面有数据变化,会通知到webview,webview再进行重新渲染

重定向页面:

sequenceDiagram
worker->>worker: 调用page.onUnload,销毁页面

此处有个疑问,是否是一个页面一个webview,一个worker呢??

启动

冷启动流程

冷启动:打开未启动过的小程序/已销毁小程序

graph TD
打开 --> 从服务器下载资源
从服务器下载资源 --> 缓存资源

热启动流程

graph TD
再次打开 --> 使用缓存

切换到前台运行:触发onShow
切换到后台运行:触发onHide

js引擎

js引擎,即小程序的worker线程运行的环境,worker线程不止一个;在支付宝小程序中,分为逻辑层和sjs,他们分别跑javascript引擎的在两个线程中;

  • iso: javascriptcore引擎
  • 安卓:支付宝提供的v8

事件系统

冒泡事件:onTap 捕获事件:catchTap