Kbone原理解析:微信小程序与Web端同构解决方案详解

2025-01-26
来源:网络整理

作者 |马谦

来源 |

原创分析

官方介绍

“它是专门针对微信小程序和Web端的解决方案。”

Web端框架基本原理

首先我们看一下普通的Web端框架。以VUE框架为例,一个Vue模板对应一个组件,在代码构建阶段编译成调用DOM接口的JS函数。如果这个JS函数被执行,从而渲染在浏览器页面上。

但小程序是双线程的,没有DOM树的概念。逻辑层和视图层完全分离。逻辑层是纯粹的。开发者可以编写JS脚本,但不能直接调用DOM/BOM的API。浏览器的实现。

在小程序中,视图层和逻辑层之间的交互是由数据和时间驱动的。

因此,要实现跨端同质,问题是:如何将Web端代码转换为小程序代码?

行业惯例

目前业界第三方跨端框架的常规做法是:静态编译兼容。

原理是分析一次代码语法,然后将部分模板翻译成对应的模板(微信小程序、支付宝小程序、H5、APP等)。

静态编译的最大限制是无法保证转换的完整性,因为Vue模板和WXML模板的语法并不直接相等。 VUE的特性设计和小程序的设计是不可分割的。 Vue 特性的丧失。

比如Vue中的V-HTML指令、Ref获取DOM节点、过滤器等就不能通用。

除了Vue本身的特性之外,一些原本依赖DOM/BOM接口的Vue插件页面无法使用,比如Vue-.

实践

是通过提供适配器来实现同质性,即运行时兼容,而不是静态编译。

适配器的核心包含两部分:

-:创建DOM/BOM接口,构建仿DOM树;

-:监视模仿DOM树的变化,渲染到页面,同时监视用户行为并触发事件。

仿DOM树和浏览器的对比:

改进的 DOM 树:

使用内置组件和自定义组件的自引用进行递归来创建组件树。

如图所示,-DOM是从引用组件中递归递归而来:

递归的条件是遇到特定节点、文本节点或空节点。

创建模块树猴子,绑定DOM节点和自定义组件实例,以便后续DOM更新和操作。

这里还优化了节点数量:

小程序原生开发与第三方框架选择_第三方框架软件_第三方开源框架

如果一个DOM节点对应一个自定义组件,就会创建很多自定义组件,浪费开销。这里是子树的合并,这意味着3层创建一个自定义组件以节省开支。

优化前:17个dom=17个自定义组件;优化后:17个DOM = 4个自定义组件,蓝色的是单个节点,会合并到最上面;

DOM子树的层数可以通过配置引入作为自定义组件渲染。理论上级别越多,自定义组件的数量越少,性能就越好。

一棵大的DOM树,一次性到视图层,可能会超出大小限制(),被分割成多个子DOM树,然后批量到视图层,这样可以节省开支。

事件监控

小程序事件是视图层到逻辑层的一种通信方式。事件绑定到组件。当它被触发时,就会执行逻辑层相应的事件处理函数。

小程序的捕获冒泡是在视图层的视图上。因此,整个冒泡过程中各个节点接收到的逻辑层事件都不是同一个对象。模板中的生命不能在接口中实现。

为了让WEB端和小程序端的事件系统行为,除了模仿一棵DOM树之外,还模仿整个事件系统,即在模仿DOM树上捕获冒泡。

自定义组件监听到用户的操作后,将事件发送给仿DOM树。后续自定义组件监听该组件听到的同一个事件的冒泡直接被忽略。

当触发变化的节点时,模仿DOM树接收事件,然后捕获并冒泡,从而在每个节点触发事件。

优势实践脚手架-CLI

官方提供了-Cli可以用来快速开发:

使用npm安装-Cli全局

可以根据自己的技术栈选择不同的开发模板:/Vue/OMI/

然后就可以愉快的发展啦~

生成的DEMO工程结构如下:

DEMO包含多页面跳转、Vue-、Vuex等示例,以及MP-配置示例。

对于多页面应用,在Web端可以直接通过A标签或对象进行跳转,但在小程序中也并非没有道理。同时,Web端的URL实现与小程序路由完全不同。

DEMO示例对比

其中,一些两端不同的业务逻辑功能在3中也给出了不同的解决方案:

使用Vue--构建时删除DOM树节点,添加-属性利用-属性使用-属性使用-属性使用-属性使用-属性使用。 ,即不需要显示的节点样式为:None

其他问题

小程序原生开发与第三方框架选择_第三方框架软件_第三方开源框架

在实际开发中,你会遇到一些细节,比如:

更新迭代

由于目前处于快速发展时期,更新迭代非常快。以下功能与8月版本和11月版本进行对比,可以看到近2/3的问题得到了解决。

小程序技术选型

详细了解之后,我们来分析一下小程序技术框架如何选择?

& 小程序原生第三方框架总结

没有跨端需求,只需微信小程序==>小程序原生

Web端过渡小程序还是两端还是想尝鲜==>

多端或者Vue技术栈==>UNI-APP

多端OR技术栈==> taro

不介意学习新的技术栈==> Wepy 2.0 或者

在最后

小程序更新很快。即使原生框架也存在一些坑,所以没有一个框架是100%完美的。您需要根据业务的具体需求以及自己的技术栈偏好来选择。

如果是你,你会选择什么?欢迎您在留言区给出答案。

PS:文中提到的一些第三方框架只是参考了官方文档,并没有一一尝试。如果有问题请指出,鞠躬~~,这里给大家分享一个懂云的平台。如果您有兴趣,可以了解一下。一度:

另外,因为今天是端午节,所以我们和【智云】平台一起准备了一份端午礼物。

【免费赠品】

我们的赠品活动规则非常简单。在开发过程中您如何选择选择哪种技术?如果您有什么心得体会,请在留言区告诉我们,我们会选出最精彩的留言。评论最高的前10名好友将获得【知云】平台知识T恤一件。本质

礼品图片如下:

▲ T恤正面图

▲ T恤背面图

活动截止时间:2020年2006年2月27日晚上9点

分享