android工程师学习微信小程序笔记④ 小程序渲染层和逻辑层

最新推荐文章于 2024-09-11 21:53:17 发布

单片机菜鸟哥

最新推荐文章于 2024-09-11 21:53:17 发布

阅读量3.2k

点赞数 25

本文为博主原创文章，未经允许，请勿转载

本文链接：https://blog.csdn.net/dpjcn1990/article/details/105748046

版权

微信小程序开发笔记专栏收录该内容

12 篇文章 30 订阅

订阅专栏

正常来说，微信小程序是依赖于微信客户端上运行的，并且跟小程序基础库（包括了小程序的整个运行环境以及基础能力，跟具体小程序无关）版本有重大关联关系。

我们可以把微信客户端以及小程序基础库简称为宿主环境（就算去开发类似于百度小程序、字节跳动小程序、京东小程序，它们的概念都是想通的）。

小程序可以调用宿主环境提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力。小程序会运行在不同版本（不同的微信客户端+不同基础库）的宿主环境下，因此针对各个版本的宿主环境做程序上的兼容也是在所难免的。

渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层，分工明确。

WXML 模板和 WXSS 样式工作在渲染层，负责展示数据
JS 脚本工作在逻辑层，负责产生、处理数据，通过Page 实例或者Component实例的 setData 方法传递数据到渲染层。

WXML模板可以使用 view等标签，其节点用 {{ }} 的语法绑定一个数据变量；
WXSS 样式负责整体展示效果，类似于位置、宽高、字体颜色等等；
JS 脚本使用 this.setData 方法来修改数据变量达到动态修改 WXML显示内容；

通信模型

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图3-1所示。

在这里插入图片描述
从这个图，理解出以下内容：

整个图有点类似于Android MVP的设计概念，渲染层负责渲染绘制相关内容，也就是View层，逻辑层处理网络请求，产生处理数据，也就是Model层，Native类似于Presenter层，负责协调逻辑层（Model）和渲染层（View）之间的操作关系，逻辑层和渲染层不直接进行交互。三者职责分离。
逻辑层运行在一个单独线程，负责执行JsCore，也就是我们小程序代码中的那一堆JS代码，而渲染层运行于另一个UI单独线程，负责绘制内容，并且维护了一个页面栈（android开发工程师应该对页面栈很熟悉，特别是Activity生命周期），每一个Page对应一个Webview，由于有多个页面，也就意味着有多个Webview。
所有的网络请求都是通过Native去调用，也就是JsCore的网络请求最终都会经过Native去执行，也就是通过微信客户端本身的网络库去执行。

数据驱动

在开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。随着界面越来越复杂，我们需要维护很多变量状态，同时要处理很多界面上的交互事件，整个程序变得越来越复杂。通常界面视图和变量状态是相关联的，如果有某种“方法”可以让状态和视图绑定在一起（状态变更时，视图也能自动变更，MVVM），那我们就可以省去手动修改视图的工作。

这个方法就是“数据驱动。

WXML结构实际上等价于一棵Dom树（但是小程序中没有支持直接操作DOM），通过一个JS对象也可以来表达Dom树的结构。

在这里插入图片描述
WXML可以先转成JS对象，然后再渲染出真正的Dom树。