您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

小程序底层架构剖析

时间:2023-06-09 13:29:43  来源:微信公众号  作者:大转转FE

当我们前端切图崽网上冲浪的时候,会发现有很多技术文章都在分析vue框架,react框架,显少有分析小程序框架的。那今天就通过这篇短小精悍的文章带大家了解一下微信小程序的底层架构。(如无特殊说明,下文中提到的小程序都是微信小程序)

小程序的由来

我们先抛出一个问题,在没有小程序的时候,企业们都在微信里怎么运营? 答案就是小程序的“前身”-公众号,企业们普遍会把H5网站放在公众号作为流量转换的入口。但是h5确实让公众号遇到了一些问题。

首先就是白屏过程,对于一些复杂页面,受限于设备性能和网络速度,白屏会更加明显;再就是缺少操作反馈,比如页面切换生硬以及点击所带来的迟滞感等等;

微信团队内部通过JS-SDK以及后来的增强JS-SDK已经能够解决一些问题,但是对于上述问题是JS-SDK所处理不了的,急需一个全新的系统来完成,它需要具备以下能力:

  • 快速加载
  • 更强大的能力
  • 原生的体验
  • 易用且安全的微信数据开放
  • 高效,简单的开发

于是,小程序诞生了。

双线程架构

此处点题一下,本文我们讨论的是小程序的底层架构,其实,双线程架构就是小程序的核心。

图片

那为什么要设计成双线程架构呢?首先我们来回顾一下浏览器的线程模型,浏览器是一个单线程架构,主要原因是js允许访问操作DOM,因此js线程和渲染线程只能互斥运行。

那小程序又是如何做到双线程的呢,根本原因就是微信小程序禁止js操作DOM。

使用双线程架构的优势一目了然:

  • 提高用户体验(ui和逻辑分离,避免页面长时间阻塞和卡顿)
  • 优化应用性能(运行在不同的线程中,可以同时渲染或者计算)
  • 开发效率更高(解耦和松散耦合)

接下来就带大家了解一下渲染层以及逻辑层的设计思路。

设计思路-渲染层

标签实现

小程序使用的是Exparser组件模型,Exparser组件模型与Web Components中的shadow DOM高度相似,微信为什么使用自定义组件框架,而不使用Web Components呢?主要还是出于安全考虑,并且方便管控。既然Exparser组件框架与shadow DOM高度相似,那么我们首先来了解一下shadow DOM。

shadow DOM: Web Components的一个重要属性是封装-可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,shadow DOM接口是关键所在,它可以将一个隐藏的,独立的DOM附加到一个元素上。

图片

shadow DOM允许将隐藏的DOM树附加到常规的DOM树中-它以shadow root节点为起始根节点,在根节点的下方,可以是任意元素,和普通的DOM一样。

以上解释来源于MDN,其实shadow DOM并不神秘,像我们非常熟悉的video标签本质上就是用shadow DOM实现的。我们先打开chrome浏览器设置中的“打开用户代理shadow DOM”,然后再点击video标签就能看到。

图片

创建shadow DOM也非常简单,直接使用attachShadow方法就可以创建。

var shadow = Element.attachShadow({ mode: 'closed'})
  • 1.

Exparser组件模型:Exparser组件模型参考了shadow DOM并进行了一些修改,像事件系统就是完全复刻的,slot插槽,属性传递等都基本一致。但同时它又具有一些特点:

  • 基于shadow DOM模型:模型上与Web Components的shadow DOM高度相似,但不依赖浏览器的原生支持,也没有其他依赖库;实现时,还针对性地增加了其他API以支持小程序组件编程
  • 可在纯JS环境中运行:这意味着逻辑层也具有一定的组件树组织能力;
  • 高效轻量:性能表现好,在组件实例极多的环境下表现尤其优异,同时代码尺寸也较小;

WXML编译

了解了小程序的组件系统之后,接下来看看WXML的编译过程。小程序中的DOM编译流程与vue类似,也会先将代码字符串编译为虚拟DOM,小程序中的虚拟DOM结构如下:WXML最终会被编译为JS文件,然后插入到渲染层的script标签中。

图片

图片

 

WXSS动态适配

WXSS是小程序中使用的样式语言,WXSS具有css的大部分特性,同时它对CSS进行了扩充以及修改。

小程序中使用的尺寸单位为rpx(Responsive px),不同于h5中对于px的处理,需要使用postcss进行统一的转换,小程序底层已经为开发者做好了这层转换,那具体它是怎么做到的呢?

图片

我们看它的这段源码,其实它与阿里的flexible.js方案是类似的,不同的是它做了一个精度收拢的优化,主要是为了解决1px的问题。

WXSS同样会经过编译,最终的编译产物为wxss.js,不同于WXML通过script标签的形式插入到渲染层,wxss.js则是通过eval的方式注入到渲染层代码中。

渲染层webview

全局变量: 渲染线程中存在着以下全局变量。

  • webviewId:webview的唯一标识,当用户打开一个小程序页面的时候,相当于打开了一个webview,不同的webview用webviewid来区分;
  • wxAppCode:整个页面的json wxss wxml编译之后都存储在这里;
  • Vd_version_info:版本信息;
  • ./dev/wxconfig.js:小程序默认总配置项,包括用户自定义与系统默认的整合结果。在控制台输入__wxConfig可以看出打印结果;
  • ./dev/devtoolsconfig.js:小程序开发者配置,包括navigationBarHeight,标题栏的高度,状态栏高度,等等,控制台输入__devtoolsConfig可以看到其对应的信息;
  • ./dev/deviceinfo.js:设备信息,包含尺寸/像素点pixelRatio;
  • ./dev/jsdebug.js:debug工具;
  • ./dev/WAWebview.js:渲染层底层基础库;
  • ./dev/hls.js:优秀的视频流处理工具;
  • ./dev/WARemoteDebug.js:底层基础库调试工具;

那小程序是如何快速启动一个webview的呢?

我们在打开pages/index/index视图页面时,发现DOM中多加载了一个__pageframe__/pageframe.html的视图层。这个视图层的作用正是小程序提前为一个新的页面层准备的。小程序每个视图层页面内容都是通过pageframe.html模板来生成的,包括小程序启动的首页。

下面来看看小程序为快速打开小程序页面做的技术优化:

  • 首页启动时,即第一次通过pageframe.html生成内容后,后台服务会缓存pageframe.html模板首次生成的html内容;
  • 非首次新打开页面时,页面请求的pageframe.html内容直接走后台缓存;
  • 非首次新打开页面时,pageframe.html页面引入的外链js资源走本地缓存; 这样在后续新打开页面时,都会走缓存的pageframe的内容,避免重复生成,快速打开一个新页面。

视图层打开新页面的流程

在创建每个视图层页面的webview时,都会为其绑定了onLoadCommit事件(它会在页面加载完成后触发,包含当前文档的导航和副框架的文档加载)。初始时webview的src会被指定为空页面地址http://127.0.0.1:${global.proxyPort}/aboutblank?${c},其中c为对应webview的id。webview从空页面到具体页面视图的过程如下:

  1. 空页面地址webview加载完毕后执行事件中的reload方法,即设置webview的src为pageframe地址;
  2. 加载完成后,设置其src为pageframe.html, 新的src内容加载完成后再次触发onLoadCommit事件但根据条件不会执行reload方法;
  3. pageframe.html页面在dom ready之后触发注入并执行具体页面相关的代码,此时通过history.pushState方法修改webview的src但是webview并不会发送页面请求;

设计思路-逻辑层

接下来我们看看小程序在逻辑层都做了哪些事情。

逻辑层与视图层通信

在小程序中,逻辑层只有一个,但是渲染层有多个,渲染层和逻辑层之间是通过微信客户端进行桥接通信的。那具体是怎么实现的呢?其实它使用的就是WeixinJSBridge通信机制。

在小程序执行的过程中,微信客户端分别向渲染层和逻辑层注入WeixinJSBridge,WeixinJSBridge主要提供了以下几个方法:

  • invoke:调用native API;
  • invokeCallbackHandler:Native 传递 invoke 方法回调结果;
  • publish:渲染层用来向逻辑业务层发送消息,也就是说要调用逻辑层的事件方法;
  • subscribe:订阅逻辑层消息;
  • subscribeHandler:视图层和逻辑层消息订阅转发;
  • setCustomPublishHandler:自定义消息转发;

渲染层如何向逻辑层通信?

图片

图片

渲染层向逻辑层通信的方式就是采用事件系统,以上就是完整的事件系统流程。

开发者在DOM上通过@click绑定事件,WXML文件被编译的时候,会通过$gwx函数生成虚拟DOM,然后小程序执行的时候渲染层底层基础库会对虚拟DOM进行解析,事件绑定最终会以attr属性的形式生成到虚拟DOM中,所以底层基础库通过applyPropeties解析事件并通过addEventListener绑定到相应DOM并声明回调。

用户点击相应DOM时,Exparser组件系统接收到这个事件,然后开始执行回调。回调函数在逻辑层,事件的触发在渲染层,此时,小程序会通过setData发送数据到逻辑层,这个时候WeixinJSBridge就派上用场了,渲染层调用publish方法发送数据,逻辑层通过registercallback进行监听,并执行相应的回调。此时,渲染层到逻辑层的通信流程结束。

那逻辑层又是如何将改变后的数据回传给渲染层的呢?逻辑层改变数据之后,同样是触发setData方法,然后渲染层通过subscribe进行监听,从eventname和触发事件时候记录的回调函数来判断是哪个事件被触发了,从而获取动态数据。

第三方小程序框架

WXML,WXSS都是小程序的原生开发语言,使用原生语言开发还是存在诸多限制,尤其是17年小程序刚推出那会。因此,第三方小程序框架应运而生。第三方框架可以分为三大类。

第一类是预编译框架,预编译框架就是在执行前就进行编译。像我司在17年开发“转转二手交易网”的时候使用的wepy框架就属于预编译框架。预编译框架也有一些显而易见的缺点,这类预编译框架要么是类vue,要么是类React,如果后期vue或者React再出一些新特性的话,预编译框架就要进行扩展编写;还有一些兼容问题,对于小程序本身不支持的一些属性,预编译框架需要进行兼容;

第二类是半编译半运行框架,像美团的mpvue就是此类框架,半编译指的是vue的template需要单独编译为wxml,半运行讲的是vue整体的特性都会在逻辑层中运行。为了符合小程序的渲染框架,修改了vue的框架;

第三类是运行时框架,像Remax就是运行时框架,它可以使开发者使用完整的React语法来开发小程序。因为小程序框架本身是不支持js直接操作DOM的,那Remax框架是如何解决这个问题的呢?其实它自己复刻了一套操作DOM的API,例如appendChild,innterHtml等,但是它真正操作的并不是dom,而是data中的数据结构。从而达到了操作DOM的目的。使得自己真正成了一个运行时框架;

结语

介绍到这里,小程序的底层框架原理基本已经介绍完了,想跟大家分享的是,小程序确实和h5非常类似,其实它相当于一个借助了native强大功能的加强版h5,小程序并不神秘,除了微信小程序之外,现在各大超级APP都已经推出了自己的小程序,原理应该都大差不差。

本篇文章其实相当于一个学习笔记,作者本身非常想搞清楚微信小程序的架构,但是微信小程序并没有开源,某次偶然的机会逛掘金的时候看到这篇小册,就整个学习了一下,在此感谢原作者!

参考

https://juejin.cn/book/6982013809212784676?enter_from=course_center&utm_source=course_center



Tags:小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  Search: 小程序  点击:(10)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  Search: 小程序  点击:(13)  评论:(0)  加入收藏
2024年微信小程序分账全攻略:对接流程详解,轻松实现资金分配
在微信小程序运营中,分账功能对于实现多方收益分配、优化资金流转至关重要。那么,微信小程序如何分账?又有哪些对接流程呢?跟着小编去看看吧!一、微信小程序分账概述微信小程序分...【详细内容】
2024-03-15  Search: 小程序  点击:(17)  评论:(0)  加入收藏
微信宣布规范“公众号文章诱骗点击小程序,骗取广告收益”行为
IT之家 3 月 14 日消息,微信公众平台运营中心今日发文称,平台近期发现部分创作者在文章中使用不完全或擦边的标题、擦边的封面和无意义或不完整的内容,并插入诱导性小程序卡片...【详细内容】
2024-03-15  Search: 小程序  点击:(17)  评论:(0)  加入收藏
抖音加大对短剧小程序推荐力度
新腕儿联合鞭牛士报道,2月26日消息,短剧近期数据平稳且持续发展,抖音加强了对短剧抖音小程序的推荐力度。以碧海剧场小程序为例,抖音短剧小程序向用户申请更多「通知信息」权限...【详细内容】
2024-02-26  Search: 小程序  点击:(39)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24  Search: 小程序  点击:(55)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  Search: 小程序  点击:(70)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  Search: 小程序  点击:(90)  评论:(0)  加入收藏
微信商户号怎么开通?教你申请0.2%费率商户码对接小程序公众号
随着移动互联网的快速发展,电子支付方式已经深入到人们的生活中,而微信支付作为中国领先的移动支付平台,在无数的应用场景中发挥着重要作用。这里先免费分享一个0.2费率的商户...【详细内容】
2023-12-16  Search: 小程序  点击:(64)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  Search: 小程序  点击:(113)  评论:(0)  加入收藏
▌简易百科推荐
京东小程序数据中心架构设计与最佳实践
一、京东小程序是什么京东小程序平台能够提供开放、安全的产品,成为品牌开发者链接京东内部核心产品的桥梁,致力于服务每一个信任我们的外部开发者,为不同开发能力的品牌商家提...【详细内容】
2024-03-27  dbaplus社群    Tags:小程序   点击:(10)  评论:(0)  加入收藏
我们一起解锁小程序开发新姿势
如今,鸿蒙开发日益受到广大开发者的关注,而小程序开发也早已成为互联网领域的热门话题。那么,我们不禁要问:是否有可能将这两者融为一体,将小程序开发的便捷与高效带入鸿蒙生态中...【详细内容】
2024-03-20  前端充电宝  微信公众号  Tags:小程序   点击:(13)  评论:(0)  加入收藏
一段微信小程序前端与后端连接的代码,带注解
微信小程序的前端和后端连接通常涉及到使用微信小程序提供的网络请求API与后端服务器进行通信。以下是一个简单的示例,展示如何使用微信小程序的前端代码向后端发送请求并处...【详细内容】
2024-01-24    简易百科  Tags:代码   点击:(55)  评论:(0)  加入收藏
小程序必须要安装部署SSL证书吗?
自2017年9月21日,微信发布一则《关于公众平台接口不再支持HTTP方式调用的公告》。明确表示,为保证数据传输安全,提高业务安全性,公众平台不再支持HTTP方式调用。应避免影响正常...【详细内容】
2024-01-02  云诏    Tags:小程序   点击:(70)  评论:(0)  加入收藏
一文了解什么是微信小程序
如果您无需下载和管理即可获得像原生 iOS 或 Android APP 一样流畅的体验会怎样?腾讯通过微信小程序实现了这一替代方案。一、什么是微信小程序?它们与原生应用程序和 H5 迷你...【详细内容】
2023-12-26  小文智能    Tags:微信小程序   点击:(90)  评论:(0)  加入收藏
小程序开发需要多少钱?小程序开发的真实成本:报价案例、费用价格表与开发周期解析
分享一个上海客户的微信小程序定制开发的需求,销售课程与相关商品。项目分为后台管理系统和小程序前端,功能不是太复杂,周期大概1个月,费用3万。大家可能比较关心几个地方,比如一...【详细内容】
2023-12-11  久码小程序开发  今日头条  Tags:小程序   点击:(113)  评论:(0)  加入收藏
小程序技术分享:安全机制与运行机制
小程序凭借其高曝光率、开发成本低、运行更流畅等优势和特点,一经推出就被广泛使用,面对小程序的火爆,自然而然地,就有很多开发者转战小程序领域,本文主要带大家了解下小程序运行...【详细内容】
2023-12-07  前端实习生Findan    Tags:小程序   点击:(138)  评论:(0)  加入收藏
微信小程序的编译原理
2021年来,随着科技的进步,人们的生活水平也在不断提高。现在,微信小程序已经成为了现代人生活中不可或缺的一部分,它可以帮助我们更方便地查找信息,购物,预订机票和酒店,进行社交等...【详细内容】
2023-12-06  前端实习生Findan    Tags:小程序   点击:(126)  评论:(0)  加入收藏
模板小程序和订制开发小程序的区别?
相比外卖APP,外卖小程序是不用下载到手机的,所以对于用户来说更方便一点。简单方便的程序用户才更愿意使用。现在不少商家越来越重视外卖小程序开发,想通过外卖小程序冲进这片...【详细内容】
2023-11-24  重庆洺宸传媒    Tags:小程序   点击:(232)  评论:(0)  加入收藏
一分钟学会用宝塔面板搭建小程序
宝塔面板搭建小程序怎样用?想要使用宝塔面板搭建小程序?这里是实用教程,帮助您快速上手。在本教程中,我们将扼要了解宝塔面板的基础知识,并一步步演示怎么搭建一个小程序。第一步...【详细内容】
2023-11-15    网络  Tags:小程序   点击:(191)  评论:(0)  加入收藏
站内最新
站内热门
站内头条