我们平时写的微信小程序,明明只写了一套代码,为什么小程序可以在安卓的微信里面运行,也可以在iOS的微信里面运行呢?我们写的小程序代码是真的h5代码吗?小程序代码是如何实现同时支持安卓和iOS的呢?今天就来探讨一下这个问题。
小程序当然不是H5,它也不用html写,使用WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
微信会将基础组件渲染为原生平台UI组件,意味着每个视图和原生应用都别无二致。
小程序使你可以创建真正原生的应用,用户体验绝不拉胯。它提供了一些平台无关的抽象核心组件,像是view, text 以及 image等,可直接映射渲染为 对应平台的原生UI组件。(和 react-native 类似)
小程序的运行环境
运行环境 | 逻辑层 | 渲染层 |
---|---|---|
iOS | JavaScriptCore | WKWebView |
安卓 | V8 | chromium定制内核 |
小程序开发者工具 | NWJS | Chrome WebView |
小程序同层渲染原理剖析:链接
使用JavaScript以及CSS来开发应用,生成虚拟DOM树后,再通过JavaScriptCore映射为原生控件树。再渲染成对应原生控件展示内容。
注意:Flutter 有所不同,是使用Dart语言进行内容开发,通过跨平台的自绘引擎Skia,调用系统API直接进行内容的渲染。
基础知识
JavaScriptCore(之后简称 JSCore)是一个开源的框架,是 WebKit 的一部分,用最简单的话描述这个框架,它大概提供了两种能力:
在原生代码里面执行 JavaScript,而不用通过浏览器
把原生对象注入到 JavaScript 环境里面去
上面这两句话归纳一下就是:提供了 JS 代码与原生代码交互的能力,通过 JSCore 可以更好的进行两端的对象暴露,这使得代码可以不断地在 JS 环境和原生环境穿梭。
有一点需要注意的是,JSCore 只是实现了标准 JavaScript 语言,所以也自然就没有浏览器对象(BOM),也就是说在 JSCore 里面执行代码,是没有 window, 没有 dom, 没有 XMLHTTPRequest 这些内容的。
Webview 是一个基于webkit的引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待。(chrome浏览器也是基于webkit引擎开发的,Mozilla浏览器是基于Gecko引擎开发的)
Web 浏览器相关的一些概念:链接