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

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

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

相关文章
|
5月前
|
小程序 JavaScript
小程序中的数据双向绑定和Vue的有什么区别
小程序中的数据双向绑定和Vue的有什么区别
|
5月前
|
存储 小程序
微信小程序的bindtap和catchtap的区别
微信小程序的bindtap和catchtap的区别
105 0
|
5月前
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
5月前
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
83 0
|
5月前
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
5月前
|
小程序 JavaScript
小程序bindtap 和 catchtap 的区别以及如何使用
小程序bindtap 和 catchtap 的区别以及如何使用
113 0
|
1月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
2月前
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
62 3
|
5月前
|
JavaScript 小程序 前端开发
小程序和vue写法的区别
小程序和vue写法的区别
50 1
|
5月前
|
小程序 JavaScript
Vue和小程序的区别
Vue和小程序的区别