作者：京东零售胡本奎一背景1什么是XView？它是一个透明的塑料袋（容器），基于通用的webview框架进行修改。通常用于大促弹窗等营销场景，展示形式如下：2痛点在实际开发和使用中，XView存在产研过程效率低和曝光度低两大核心痛点速度。1、产研流程低效：研发流程繁琐，不仅需要前端开发弹窗内容，还需要客户端接入XViewSDK和服务端数据配置。同时依赖于release版本，导致交付周期长，重复工作多。2、曝光率不高：升级前的XView加载过程比较长，导致曝光率不高。3升级为了解决上述XView的诸多痛点，我们对XView弹窗进行了三个时代的升级，具体如下：1、客户端H5弹窗组件时代：传统的xview仅支持h5链接，使弹窗在加载过程中存在加载速度慢、性能差、曝光率低等问题。2、弹窗配置时代：通过配置弹窗，不仅可以支持h5链接，还可以支持图片、Gif、视频、Lottiles等各类素材。通过SDK提供统一的弹窗控制，保证弹窗的稳定性，通过快速配置，最快2小时内测试弹窗的稳定性，并可在线交付。同时XViewCMS提供数据中心查询，可以查询在线弹窗的实时数据动态，包括曝光、点击量、点击率等弹窗数据，也可以支持生成数据报表，但配置繁琐，概念多，理解成本高，导致“客服”工作量大。同时，内容生产能力薄弱，无法覆盖上游内容生产环节。有效上限是有限的。3.弹窗视觉构建时代：采用原生构建方式，尽可能使用原生渲染方式，提高曝光率，从配置时代进入页面弹窗构建时代，丰富弹窗-up窗口触发场景，并增加回车、摇一摇等触发形式。2、升级方案XView的升级方案主要介绍了构建过程、互斥管理、预加载升级、页面管理和访问。1构建过程XView构建全过程包括CMS弹窗构建、策略配置、客户端展示、数据采集4个阶段：1弹窗构建：通过业务或产品在XViewCMS构建平台上拖拽组件到将完成弹窗内容的构建。在构建过程中，XViewCMS通过低代码引擎生成弹窗页面的描述文件Schema(json)，并导出终端代码构建产品（代码输出）。点击弹窗保存时，构建的产品通过协议Convert映射到BabelDSL生成Babel可以渲染的数据模板。这套数据模板发布在OSS平台上，最终客户端使用BabelflexibleSDK渲染弹窗内容。2策略配置：当弹窗模板生成时，会配置弹窗的弹出策略。对于频率策略，可以通过客户端的本地频率或者服务端的暴露频率来控制。还支持针对性策略，包括版本间隔、生效时间、白名单、黑名单、目标群体等策略的配置和下发。3客户端展示：CMS配置完成后，客户端通过BabelFlexibleSDK完成弹窗内容渲染。通过预加载资源进行速率。4数据采集：为了验证和提高弹窗的曝光率和点击率，XView提供了一套完整的数据采集和展示解决方案。通过对数据埋点和异常埋点的分析建模，保证弹窗曝光的成功率。2互斥管理同一个页面可能同时有多个弹窗，每个弹窗的弹出顺序和优先级可能不同，所以需要对页面进行互斥管理弹出窗口。互斥管理流程如下：1Same一次互斥（只有同时触发优先级才有用），允许高优先级弹出弹出低优先级.2当互斥组号相同时，对于独占设置，设置非独占、按天独占、有效期内独占。当两个弹窗同时参与独占时，那么在同一时间段内，一个弹出，另一个不弹出。3预加载升级H5时代：手动预加载，预加载成功率不高。配置时代：支持预加载图片、视频、webview。应用程序启动时会触发预加载。可以配置提前多少天缓存，多少天缓存。预加载成功率不高，影响应用的启动性能。构建时代：支持预加载图片、视频、webviews、Lottie、DSL文件等，在App启动或进入目标页面时触发预加载。预加载元素的优先级将根据权重和优先级组合条件确定。加载顺序。4页面管理原生页面：对于只有Activity的，只配置Activity的路径，对于有Fragment或者页面中有多个tab的页面，同时配置Activity和Fragment的路径来标记页面。H5页面：通过页面Url链接中的host和path进行匹配标记。RNpage：使用RN的moduleName来标记匹配。babel页面：使用activity的acitivityId标记匹配或者与H5页面的匹配规则保持一致。Flutter页面：有待改进。动态构建页面：有待改进。5接入：低成本三升级框架升级后的XView包括外部依赖、CMS后台、CMS构建引擎、客户端四部分。外部依赖：包括对Babel、Waterdrop、Launch、Switchquery、Meridian、Luban、国盾屏蔽系统等系统的依赖。CMS后台：处理数据库数据，低代码引擎搭建产品与通天塔灵活协议的转换，用户权限设置，搭建过程中上传图片、视频等文件的处理，业务方接入和发布审批，第三方派对数据源编排等CMS构建引擎：管理、配置弹出窗口、复制、删除弹出窗口。弹窗内容的构建目前支持关闭按钮、内嵌网页、布局等单例组件。还支持热点、图片、文字、视频、Lottie等基础组件的构建。同时包含构建实时UV数据、弹出性能等指标数据。客户端：包括客户端接口的处理，客户端SDK的触发时机、触发策略、元素预加载策略、事件协议处理等；不同技术栈页面触发弹窗的处理；弹窗容器的动态效果和交互处理；Babel灵活渲染弹窗内容等四大数据中心数据中心支持实时统计子平台数据，包括总曝光数、关闭点击数、部分可点击总点击数元素。还支持点击率、曝光率等数据指标的统计。**通过饼图直观展示弹窗点击率数据，建立漏洞模型展示弹窗曝光率等数据指标。未来可以通过分析用户群体等数据来提升弹窗的商业价值。弹窗实时数据查询，让业务方实时了解弹窗数据。五现状及未来规划1现状目前已赋能业务10+；涵盖首页、秒杀、新品、互动（领先京豆）、短视频、发现好品等服务，弹窗制作时间可缩短至半小时以内。2未来规划XView未来规划技术赋能主要从技术赋能和商业价值两个方面：降低运营和产品的学习成本和运营门槛，提供更强大的内容生产能力，让部分H5页面可以原生构建在同时可以实现在线自助服务，精准配送，达到降本增效的目的。业务价值：尽可能使用原生渲染，增加曝光度，支持更多素材类型和呈现形式，包括动态数据和事件绑定等灵活交互，支持更丰富的触发形式，包括返回、摇一摇、下拉刷新等触发场??景，引入动画交互，提升点击转化，达到提升商业价值的目的。
