从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计 (3)

下面以官网的一幅图来说视图动态更新的过程:

// wxml <view>{{msg}}</view> // js data: { msg: \'Hello World\' }

从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计

上面说明了视图如何更新的,其实在数据响应的过程中,还有最重要的一环,即业务逻辑层的如何将变化的数据同步到视图层呢,这就涉及到双线程的通信了,具体可以参考从微信小程序开发者工具源码看实现原理(三)- - 双线程通信

5、小程序基础库作用到底是什么?

我们在开发者工具开发小程序时,一般都会选择一个基础库,如小程序开发者工具选择界面:

从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计

小程序基础库是用JavaScript写的,但是我们并没有在我们的小程序中直接引用,那么我们是怎么使用基础库提供功能的呢?答案是:

微信宿主环境会提前内置基础库,打开小程序时会自动将基础库注入到小程序的视图层和业务逻辑层中,小程序开发者工具则是由底层HTTP服务负责注入。

下图是小程序底层HTTP服务通过script脚本注入的相关代码:

从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计

小程序基础库功能包括两个部分视图层的WAWebview.js和业务逻辑层的WAService.js。下面就简单说下对应功能:

WAService为业务逻辑层提供基础功能

下看看一下WAService.js源码内容缩略图:

从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计

从源码可以看出基础库提供的WAService.js有很多功能,主要包括以下几部分

WeixinJSBridge:消息通信的统一封装易于调用,主要微信环境与native,开发环境与开发者工具后台服务的通信。

wx: wx对象下面的api方法封装

appServiceEngine:定义了全局的方法如define,require, App,Page,Component,getApp,getCurrentPages等

virtualDOM: VirtualDOM,Diff和Render UI实现

expraser: expraser框架组件的方法定义,这意味着逻辑层也具有一定的组件树组织能力。

Reporter: 小程序日志组件

WAWebview为视图层提供基础功能

小程序基础库为视图层提供的基础功能有些与WAService相同,主要功能如下:

消息通信封装为WeixinJSBridge

日志组件Reporter封装

wx对象下的api,跟WAService里的不同的是其大部分都是处理UI显示相关的方法

小程序Expraser组件框架的实现和内置组件的注册

VirtualDOM,Diff和Render UI实现

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxpyj.html