小程序底层框架原理

开发模式

由于小程序宿主是客户端的App,如果采用纯客户端的原生技术来编写,那小程序的代码需要和App代码一起发布,这种开发节奏不符合小程序的需求所以要像 web 技术一样存放一份随时可以更新的资源包放在云端,下载到本地动态执行后即可渲染出页面。选择Hybrid的渲染方式。

双线程模型

可以阻止开发者使用一些浏览器提供的跳转页面,操作 DOM ,动态执行脚本等开放性接口。

  • 渲染层: 多个 WebView 线程进行渲染,由逻辑层代码控制
  • 逻辑层: JsCore线程运行JS脚本,提供一个沙箱环境去运行开发者的 js 代码,这个沙箱没有 BOM 和DOM 等对象,只提供 setData 方法让开发者可以操控页面

双线程通信

在这里插入图片描述
通过系统 Native 层的JSBridge进行通信,逻辑层和渲染层的通信由Native转发,逻辑层发送的网络请求也由Native转发,DOM的更新由virtual DOM 实现,通信过程由 JS 基础库实现,小程序的基础库不会被打包到小程序而是内置在客户端。

组件

H5组件:

  • 微信小程序的组件组织框架 Exparser: 核心方法有registerBehavior(注册组件的一些基础行为,供组件继承),registerElement (注册组件,跟我们交互接口主要是属性和事件)
  • 小程序的基础组件可以通过 Polymer 实现。

native原生组件:

  • 绕过一些数据通信重渲染和 setData 等流程,性能更好
  • 扩展 Web 的能力,比如input textArea 和 Video 等组件,可以有更好的控制键盘的能力
  • 减轻 WebView 渲染map等复杂组件的渲染工作,其渲染不占用 WebView 的线程
  • 原生组件的本质是 WebView 上盖了 native 的原生组件,这也是为什么有时候不管页面上的元素z-index设置多大都盖不住一个 focus 的 input 或 textarea 的问题。
发布了15 篇原创文章 · 获赞 21 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_41531446/article/details/95101151