微信小程序设计原理

小程序诞生原因

  • 解决web体验问题:页面切换的生硬和点击的迟滞感。
  • 更强大的能力
  • 快速的加载.

小程序与web的区别

JavaScript是单线程的,渲染线程和脚本线程是互斥的,脚本线程会阻塞渲染线程,导致页面失去响应。而在小程序中,二者是分开的,分别运行在不同的线程中。

小程序三大运行环境:

  • 在 iOS 上,小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10;

  • 在 Android 上,

    • 旧版本,小程序逻辑层的 javascript 代码运行中 X5 JSCore 中,视图层是由 X5 基于 Mobile Chrome 57 内核来渲染的;

    • 新版本,小程序逻辑层的 javascript 代码运行在 V8 中,视图层是由自研 XWeb 引擎基于 Mobile Chrome 67 内核来渲染的;

  • 在 开发工具上,小程序逻辑层的 javascript 代码是运行在 NW.js 中,视图层是由 Chromium 60 Webview 来渲染的

image

小程序框架

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View),视图层基于 WXML 和 WXSS,逻辑层基于 JavaScript

渲染层和逻辑层通信

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本,一个小程序存在多个界面,所以渲染层存在多个WebView线程,
这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。

image

逻辑层 App Service

逻辑层提供了以下几个方面的api来控制小程序的行为

  • 启动入口通过 App() 来注册小程序
  • 每个页面通过 Page() 来绑定页面的数据,注册页面的生命周期
  • 页面路由,以栈的形式维护了当前的所有页面,根据页面入栈,出栈的顺序,可以通知到当前执行栈的生命周期

视图层

视图层通过以下几个方面来进行页面的渲染

  • wxml 构建页面的结构
  • WXSS 构建页面的样式
  • Component 视图的基本组件单元

页面生命周期

image