作者 |马谦
来源 |
原创分析
官方介绍
“它是专门针对微信小程序和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点