专栏首页艺述思维微信小程序底层机制:小程序基础库主要包括什么内容?

微信小程序底层机制:小程序基础库主要包括什么内容?

小程序基础库目前已经走到了2.11版本,它主要包括两部分:

(一)WAWebview

视图层基础库,提供视图层基础能力

(二)WAService

逻辑层基础库,提供逻辑层基础能力

小程序基础库采用双线程架构,一个是视图层线程,一个是逻辑层线程,两个线程协同工作,共同向上层提供了基础库能力。

WAWebview 基本组成

(一)Foundation

基础模块。提供环境变量 env、发布订阅 EventEmitter、配置/基础库/通信桥 Ready 事件。在iOS App开发中也有一个Foundation模块,功能与这个是类似的。

(二)WeixinJSBridge

消息通信模块。WeixinJSBridge 提供了视图层 JS 与 Native、视图层与逻辑层之间消息通信的机制,提供了如下几个方法:

invoke

JS 调用 Native API

invokeCallbackHandler

Native 传递 invoke 方法回调结果

on

JS 监听 Native 消息

publish

视图层发布消息

subscribe

订阅逻辑层的消息

subscribeHandler

视图层和逻辑层消息订阅转发

setCustomPublishHandler

自定义消息转发

(三)exparser

组件系统模块。Exparser 是微信小程序的组件组织框架,内置在小程序基础库中,为小程序的各种组件提供基础的支持。小程序内的所有组件,包括内置组件和自定义组件,都由 Exparser 组织管理。Exparser 的组件模型与 WebComponents 标准中的 ShadowDOM 高度相似。

什么是ShadowDOM?它可以将shadow DOM视为“DOM中的DOM”。它是自己独立的DOM树,具有自己的元素和样式,与原始DOM完全隔离。

小程序中,所有节点树相关的操作都依赖于 Exparser,包括 WXML 到页面最终节点树的构建、createSelectorQuery 调用和自定义组件特性等。

(四)__virtualDOM__

Virtual DOM 模块。模拟了各种 DOM 接口的 wx- element 对象。

(五)__webViewSDK__

WebView SDK 模块。视图层 API。

(六)Reporter

日志上报模块。顾名思义,这是个异常和性能统计数据。

WAService 基本组成

(一)Foundation

基础模块,同上

(二)WeixinJSBridge

消息通信模块,同上

(三)WeixinNativeBuffer

原生 Buffer,原生缓冲区

(四)WeixinWorker

Worker 线程。小程序的逻辑线程是单线程,但通过 Worker 可以另起独立线程,这与 Html5 一致。

(五)JSContext

JS Engine Context,是数据共享对象。小程序是多 WebView 模式,每一个 WebView 都有一个独立的 JSContext,虽然可以通过窗口通信实现数据传递,但是无法共享数据和方法。

(六)Protect

JS 保护的对象,顾名思义。

(七)__subContextEngine__

基类模块。提供 App、Page、Component、Behavior、getApp、getCurrentPages 等方法。

通讯

视图图与逻辑层分别是如何与底层通讯的。

视图层与底层是如何通信的?

这层通信机制在 iOS 和安卓系统的实现方式并不一样,iOS 是利用了WKWebView 的提供 messageHandlers 特性,而在安卓则是往 WebView 的 window 对象注入一个原生方法。

最终会封装成 WeiXinJSBridge 这样一个兼容中间层,这个中间层主要提供了调用(invoke)和监听(on)这两种方法。

逻辑层与底层是如何通讯的?

逻辑层与客户端原生通信机制与视图层类似。

不同在于,iOS平台可以往JavaScripCore框架注入一个全局的原生方法,而安卓方面则是跟渲染层一致的。也往 WebView 的 window 对象注入一个原生方法。

相同的是,最终会封装成 WeiXinJSBridge 这样一个兼容中间层,这个中间层主要提供了调用(invoke)和监听(on)这两种方法。

运行机制、清除机制

1,小程序没有重启的概念,当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后,目前是5分钟,会被微信主动销毁。在此之间被重复打开,被视为热启动,是不检查版本更新的。只有能启动才会从服务器上检查版本。

2,当短时间内(5s)连续收到两次以上系统内存告警,会进行小程序的销毁。

微信上有一个存储空间的管理页面,在这里可以清除聊天消息和缓存数据。

清除聊天消息时,清除的是聊天列表里边缓存的内容,与小程序无关。

清除缓存时,涉及到了小程序运行时缓存的图片等数据,但是不涉及小程序的代码包,以及开发者使用本地存储存储的数据。

有人做过评测,目前如果想将小程序的代码包删除,唯一的办法就是重装微信。

部分图片来自网络,侵删。关于小程序运行机制,推荐阅读:

https://zhaomenghuan.js.org/blog/wechat-miniprogram-principle-analysis.html

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:石桥码农

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于前端开发中的模块化

    AngularJS模块化使用的并不是标准的AMD规范,AngularJS的风格风格大致是这样的:

    李艺
  • React全家桶简介

    当前前端开发已经进入以vue、react、webpack为代表的编程2.0时代。在1.0时代,代码是写给机器的;在2.0时代,代码是写给工具的,然后由工具处理后...

    李艺
  • 关于 JS 模块化的最佳实践总结

    模块化开发是 JS 项目开发中的必备技能,它如同面向对象、设计模式一样,可以兼顾提升软件项目的可维护性和开发效率。

    李艺
  • nodejs--模块化

    eadela
  • 【JS】382- JavaScript 模块化方案总结

    本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法,第二部分则根据实际问题指出在...

    pingan8787
  • Android组件化搭建

    组件化开发 组件化开发这个名词并不陌生,但真正什么才是组件化开发,大家在网上搜可以查看很多相应的文章,我概念中,模块化的开发,就是把很多模块独立出来,基础模块,...

    我就是马云飞
  • docker network (docker 网络的组建) 转

    “docker 网络的组建” 就是需要解决docker容器之间的网络访问以及其他主机访问docker容器的问题。根据实践验证,具体列举以下方法:

    yawn
  • Python学习笔记整理(十三)Pyth

    一、模块 模块是Pyhon最高级别的程序组织单元,它将程序代码和数据封装起来以便重用。实际的角度,模块往往对应Python程序文件。 每个文件都是一个模块,...

    py3study
  • 接口测试工具开发文档

    设计思路:因为测试app和server。首先必须将app和server的通信断开,构造一个连接层,然后再根据这个连接层进行case设计,以及设计case对app...

    测试开发社区
  • vue踩坑记- Cannot find module 'wrappy'

    当你维护别人的项目代码的时候,在自己这里电脑上运行,打开一个项目cnpm run dev的时候,报错如下

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券