小程序底层架构剖析( 三 ) _小程序

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