小程序如何用data的数据控制页面展示_深入小程序系列之一: 小程序原理及模拟...

最新推荐文章于 2021-11-13 15:14:34 发布

weixin_39538877

最新推荐文章于 2021-11-13 15:14:34 发布

阅读量75

点赞数

文章标签：小程序如何用data的数据控制页面展示

本文将介绍小程序的核心视图层逻辑层分离架构，并通过 iOS 的代码来模拟这种双线程模型。

小程序是一种新的移动应用程序格式，是一种依赖 Web 技术，但也集成了原生应用程序功能的混合解决方案。

目前市面上小程序平台微信、支付宝、百度、头条、京东、凡泰等；小程序一些特性有助于填补 Web 和原生平台之间的鸿沟，因此小程序受到了一些超级应用程序的欢迎。

在小程序中，视图层通常与逻辑层分离。

视图层 View 负责渲染小程序页面，包括 Web 组件和原生组件渲染，可以将其视为混合渲染。例如，Web 组件渲染可以由 WebView 处理，但 WebView 不支持某些 Web 组件渲染，或者是性能受限；小程序还依赖于某些原生组件，例如地图、视频等。
逻辑层 Service 是用主要用于执行小程序的 JS 逻辑。主要负责小程序的事件处理、API 调用和生命周期管理。扩展的原生功能通常来自宿主原生应用程序或操作系统，这些功能包括拍照、位置、蓝牙、网络状态、文件处理、扫描、电话等。它们通过某些 API 调用。当小程序调用原生 API 时，它会将 API 调用传递给扩展的原生功能，以便通过 JSBridge 进一步处理，并通过 JSBridge 从扩展的原生功能获取结果。Service 为每个 Render 建立连接，传输需要渲染的数据以进一步处理。
如果事件由小程序页面中的组件触发，则此页面将向 Service 发送事件以进一步处理。同时，页面将等待 Service 发送的数据来重新渲染小程序页面。
渲染过程可被视为无状态，并且所有状态都将存储在 Service 中。

视图层和逻辑层分离有很多好处：

方便多个小程序页面之间的数据共享和交互。
在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验。
Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能。
因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序是不能操作 DOM 结构的，这也就使得小程序的性能比传统的 H5 更好。

~~先看一下运行结果

接下来我们将用 iOS 代码来模拟上述的双线程模型。首先我们来实现视图层与逻辑层的数据通讯

如上图所示，视图层与逻辑层都分别通过 JS Bridge 的 publish 和 subscribe 来实现数据的收发。

1、视图层调用JSBridge.publish把事件传递给原生;参数: {eventName: '', data: {}}

//点击按钮，通知JS执行业务逻辑

2、原生 view 层收到 page 的事件，把事件传递转发给 service 层处理

if

3、原生 service 层收到原生 view 层的事件，通过 jsbridge 把事件及参数传递给视图 ervice 层执行 js 逻辑

NSString

4、视图 service，收到事件后，执行 JS 业务代码

var

5、执行业务 JS 代码后，把数据更新传递给视图层去更新 UI 界面展示数据

ServiceJSBridge

6、原生 service 层收到视图 service 层的事件，把事件传递给原生视图层

if

7、原生视图层把收到的事件，传递给视图 view 层

NSString

8、视图 view 层，收到事件后，更新界面

FinChatJSBridge

// 首先订阅数据回调

WKUserContentController

// 执行视图层事件回调

function

// page 对像模拟

文档中心: Document

本文示例代码: https://github.com/finogeeks/fino-applet

关注