XView 架构升级之路

Tech 导读 XView是一个一站式APP弹窗管理平台，本文介绍XView架构升级后的搭建流程，弹窗间的互斥管理，预加载处理，页面管理等技术方案，以及升级后的XView平台的整体框架，最终使得弹窗可以通过搭建的方式快速触达到APP端，大大减少需求交付周期的实战经验，欢迎大家交流探讨。

01

背景

在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！

1.1 XView 定义

XView是一个透明的塑料袋（容器），基于通用的webview框架改造而来，通常用于大促弹窗等营销场景，展现形式如下图：

图1. 展现形式

1.2 XView 发展问题

在实际的开发使用中XView存在产研过程效率低，曝光率不高的2个核心痛点。

1. 产研过程低效：在研发过程中比较繁琐，不仅需要前端开发弹窗内容还需要客户端接入XView SDK以及服务端数据配置，同时依赖发版，导致交付周期长，重复工作多。
2. 曝光率不高：升级前的XView 加载流程比较长，导致曝光率不高。

1.3 XView 时代升级

为了解决以上XView 的诸多痛点，将XView 弹窗进行了3个时代的升级，具体如下：

1. 客户端H5弹窗组件时代:传统的xview 只支持h5链接，这样弹窗在加载过程中存在加载速度慢，性能差，曝光率低等问题。
2. 弹窗配置化时代：通过配置弹窗可以不仅支持h5链接，同时支持图片，Gif，视频，Lottile等多种类型的素材，通过SDK 的方式，提供统一的弹窗控制，保障了弹窗的稳定性，弹窗可以通过快速配置的方式最快可以做到2个小时内测试，交付上线，同时XView CMS提供数据中心查询，可以查询线上弹窗实时的数据动态，包括曝光量，点击量，点击率等弹窗数据，同时可支持生成数据报表,但是配置繁琐，概念多，理解成本高造成“客服”工作量大，同时内容生产能力弱，不能覆盖更上游的内容生产环节，提效上限有限。
3. 弹窗可视化搭建时代: 采用原生搭建的方式，尽可能的使用原生方式渲染，这样提高了曝光率，从配置化时代进入页面弹窗搭建时代，丰富了弹窗的触发场景，新增了返回，摇一摇等多种触发形式。

图2.升级阶段

02

升级方案

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

XView 的升级方案主要从搭建流程，互斥管理，预加载升级， 页面管理以及接入这几方面介绍。

2.1 XView 搭建流程

。

图3. 搭建流程

XView 搭建整个流程包括4个阶段，CMS 弹窗搭建，策略配置，客户端展示以及数据采集:

1. ‍‍弹窗搭建：由运营或产品在XView 的CMS搭建平台上通过随意拖拽组件的方式完成弹窗的内容搭建，在搭建过程中XView CMS通过低代码引擎生成弹窗页面的描述文件Schema（json），导出终端代码搭建产物（出码），在点击弹窗保存时，搭建产物经协议转换，映射为通天塔DSL，生成通天塔可渲染的数据模版，这套数据模版发布在OSS平台上，最终客户端通过通天塔灵活化SDK进行弹窗内容渲染。
2. 策略配置：在弹窗模版生成的同时，会对弹窗的弹出策略进行配置，对于频次策略，可以通过客户端的本地频次控制也可以通过服务端曝光频次控制，同时支持定向的策略，包括版本的区间，生效时间，白名单，黑名单，定向人群等策略的配置下发。
3. 客户端展示：在CMS的配置完后，客户端通过通天塔灵活化SDK完成弹窗内容渲染，弹窗的触发方式包括进入页面自动弹出和手动弹出等弹出触发方式，为了提高弹窗的曝光率通过对资源预进行预加载。
4. 数据采集：为了验证和提高弹窗的曝光率和点击率，XView 提供一整套的数据采集和展示方案，通过数据埋点以及异常埋点的分析建模，保障了弹窗曝光的成功率。‍‍

2.2 互斥管理

同一个页面可能同时存在多个弹窗，每个弹窗的弹出先后顺序，优先级也可能不一样，因此需要对弹窗进行互斥管理，互斥管理的流程如下：

图4. 互斥管理流程

1. 同一个时刻互斥（同时触发优先级才有用），高优先级的弹过，才允许弹出低优先级的。
2. 互斥组号相同的时候，对于排他设置，设置不排他，按天排他，有效期内排他，当两个弹窗同时参与排他，那么同一个时段，一个弹过，另一个就不会弹出了。

2.3 预加载升级

图5. 预加载升级3个时代

‍‍‍‍‍‍‍H5 时代：手动预加载，预加载成功率不高。

配置时代：支持图片和视频以及webview预加载，在App启动时触发预加载，可以配置提前多少天缓存以及缓存的天数，预加载成功率不高，影响App启动性能。

搭建时代：支持图片，视频，webview，Lottie，DSL 文件等预加载，在App启动或者进入目标页面时会触发预加载，预加载的元素的优先级会根据权重，优先级组合条件进行排序决定预加载先后顺序。‍‍‍‍‍‍‍

2.4 页面管理

图6. 页面管理

原生页面：对只有Activity只配置Activity 的路径，对页面中含有Fragment或者多tab的页面，同时配置Activity 和 Fragment 的路径进行页面标示。

H5页面：通过页面Url 链接中 host 和 path 进行匹配标示。

RN页面：通过RN 的moduleName进行匹配标示。

通天塔页面：通过活动acitivityId进行标示匹配或者和H5页匹配规则保持一致。

Flutter页面：待完善。

动态化搭建页面：待完善。

2.5 低成本接入

图7. 触发模式

图8.接入注意问题

03

升级后XView框架

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

图9. 升级后框架

升级后XView包括外部依赖，CMS后台，CMS搭建引擎，客户端四个部分。

外部依赖：包括对通天塔，水滴，投放，Switchquery开关平台，子午线，鲁班，果盾屏蔽系统等系统的依赖。

CMS后台：处理数据库数据，低代码引擎搭建产物和通天塔灵活化协议的转换，用户权限的设置以及搭建过程中上传图片，视频等文件处理,业务方接入发布审批，以及第三方数据源的编排等。

CMS搭建引擎：管理，配置弹窗，复制，删除弹窗。对弹窗内容的搭建目前支持关闭按钮，内嵌网页，以及布局等单例组件，还支持热区，图片，文本，视频，Lottie等基础组件的搭建。同时包含实时UV数据，弹窗性能等指标数据的建设。

客户端：包括客户端接口的处理，客户端SDK对触发时机，触发策略，元素预加载策略，事件协议处理等；对不同技术栈页面上触发弹窗的处理；对弹窗容器动效，交互处理；通天塔灵活化对弹窗内容的渲染等。

04

数据中心

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面

图10. 数据统计概览

数据中心支持分平台数据实时统计，包括曝光总量，关闭点击量，以及部分可点击元素的点击总量，同时支持点击率，曝光率等数据指标的统计。

图11. 曝光点击数据

通过饼状图直观的展示弹窗的点击率数据，建立漏洞模型展示弹窗的曝光率等数据指标，未来可通过对用户人群等数据分析，提高弹窗的业务价值。

图12. 实时数据

弹窗实时数据查询，让业务方能实时了解弹窗数据情况。

05

现状和未来规划

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

5.1 XView 现状

图13. 赋能现状

目前赋能业务数量10+；覆盖首页，秒杀，新品，互动（领京豆），短视频，发现好货等业务，弹窗生产耗时可缩短到半个小时以内。

5.2 未来规划

图14. 技术和赋能

XView 未来主要从技术赋能和业务价值两方面规划

技术赋能：降低运营和产品的学习成本和操作门槛，同时提供更强大的内容生产能力，可以使得部分H5页通过原生搭建的方式实现，同时能做到自助上线，精准投放达到降本增效的目的。

业务价值：尽可能采用原生渲染，提升曝光率，支持更多的素材类型和展现形式，包括动态数据，事件绑定等灵活化交互，同时支持更丰富的触发形式，包括返回，摇一摇，下拉刷新等多种触发场景，引入动画交互，提升点击转化达到提升业务价值的目标。

06

XView实际案例

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

XView弹窗实际应用案例：

07

结语

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染，最终将目标页面展示到屏幕。

弹窗场景在大促和营销场景中使用越来越普遍，本文介绍在这些使用场景中如何使用XView弹窗管理平台快速，低成本的上线弹窗。如有不足敬请见谅，欢迎交流探讨！