当前位置: 首页 > 网站小程序 > 小程序与普通网页开发的区别

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

2021-03-05 来源:

【版权声明】该文章由挖数据整理发布,如需转载请注明出处。

我们平时写的微信小程序,明明只写了一套代码,为什么小程序可以在安卓的微信里面运行,也可以在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引擎开发的)