小程序简介

小程序模式由来

移动端应用开发有三种不同的模式:Native App(纯原生开发)、Web App、Hybrid App(混搭开发)。

Native App

Native App,原生APP,使用原生(即Android或iOS)开发的APP,其优势就是应用性能/应用体验最好。

其劣势也相对明显:开发门槛高,资源投入多,升级困难等。

Web App

Web App就是将APP作为一个浏览器看待,APP内的业务实现使用纯前端的方式开发和渲染,可以借助缓存/离线化对内容进行管理。

其优势为:开发简单,一套代码同时覆盖多端环境;

其劣势为:页面加载效率低,用户交互体验差。

Hybrid App

Hybrid App综合了Web App的开发速度和Native App的高性能体验。本章节所描述的小程序的开发模式就是一种混搭式的开发方式。

Light小程序主要技术原理为双进程渲染,即将运行时的逻辑结构一分为二,分成渲染层和逻辑层。

渲染层的界面使用了 WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序包含多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经原生桥做中转,逻辑层发送网络请求也经由Native转发。具体的运行时逻辑可以参考下图的运行时结构:

小程序开发框架的逻辑层使用 JavaScript 引擎为开发者提供小程序 JavaScript 代码的运行环境以及小程序的特有功能。

逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈。

小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript,小程序的开发与普通的网页开发有很大的相似性。对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。网页开发者可以使用浏览器暴露出来的 DOM API,进行 DOM 选中和操作。而如上文所述,小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整的浏览器对象,因而缺少相关的 DOM API 和 BOM API。这一区别导致了前端开发非常熟悉的一些库————例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 npm 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ 浏览器等,在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView 。而 Light 小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的 Light 小程序容器,以及用于辅助开发的 Light 开发者工具。在小程序中三大运行环境也是有所区别的,如下表所示:

运行环境 逻辑层 渲染层
iOS JavaScriptCore WKWebView
安卓 V8 LightWebview
LightView(桌面端) Electron Chrome WebView