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

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

我们平时写的微信小程序,明明只写了一套代码,为什么小程序可以在安卓的微信里面运行,也可以在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 浏览器相关的一些概念:链接

相关文章
|
1月前
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
20 0
|
2月前
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
2月前
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
8月前
|
小程序
微信小程序 - block 与 view 的区别
微信小程序 - block 与 view 的区别
334 0
|
20天前
|
移动开发 小程序 前端开发
H5和小程序有什么区别
H5和小程序有什么区别
|
2月前
|
开发框架 小程序 JavaScript
微信小程序和uni-app的区别
微信小程序和uni-app的区别
47 1
|
2月前
|
小程序 API
小程序中用于跳转页面的5个api是什么?区别?
小程序中用于跳转页面的5个api是什么?区别?
|
3月前
|
开发框架 小程序 JavaScript
微信小程序与vue区别
微信小程序与vue区别
|
3月前
|
开发框架 小程序 JavaScript
简单描述下微信小程序的相关文件类型以及微信小程序和uniapp的区别?
简单描述下微信小程序的相关文件类型以及微信小程序和uniapp的区别?
44 0
|
8月前
|
小程序
微信小程序5种路由跳转的区别
微信小程序5种路由跳转的区别