页面卡片显示方法、装置、设备及介质制造方法及图纸

本申请提供一种页面卡片显示方法、装置、设备及介质，该方法包括：响应于在Web页面显示页面卡片的请求，加载第一文件，第一文件包括与前端框架代码相关的可执行文件；通过对第一文件进行解析，为页面卡片的显示提供框架环境；加载第二文件，第二文件包括与页面卡片的业务代码相关且适合客户端原生页面的可执行文件；在框架环境中，对第二文件进行解析；根据第二文件的解析结果，在Web页面显示页面卡片，解析结果包括页面卡片中页面元素的渲染指令。从而，基于适合于客户端原生页面的可执行文件，在Web页面上实现页面卡片的渲染，降低了开发成本，节约资源，还能够保持Web页面和客户端原生页面上页面卡片渲染效果的一致。原生页面上页面卡片渲染效果的一致。原生页面上页面卡片渲染效果的一致。

【技术实现步骤摘要】
页面卡片显示方法、装置、设备及介质


[0001]本申请涉及计算机
，尤其涉及一种页面卡片显示方法、装置、设备及介质。

技术介绍

[0002]页面卡片(又可称为小部件)是嵌入在业务页面上的页面区块，主要的视觉展现形式为卡片形式，可以独立开发、独立执行且动态下发。页面卡片可应用于直播间、店铺等多个商家私域场景的业务展示，为用户提供更为轻便、快捷、完整、灵活的业务服务，还起到为相关业务吸引用户注意力的作用。
[0003]目前，主要是以移动设备的客户端作为页面卡片的承接主体，即主要在客户端执行页面卡片的业务代码的可执行文件。在面对Web场景中的页面卡片渲染需求时，前端人员需要将页面卡片的业务代码另行打包为适合Web场景的可执行文件。
[0004]然而，将页面卡片的业务代码另行打包为适合Web场景的可执行文件的方式，开发成本较高且存在资源浪费。

技术实现思路

[0005]本申请的多个方面提供一种页面卡片显示方法、装置、设备及介质，用以解决Web场景中页面卡片显示所存在的开发成本较高、浪费资源的问题。
[0006]第一方面，本申请实施例提供一种页面卡片显示方法，包括：响应于在Web页面显示页面卡片的请求，加载第一文件，第一文件包括与前端框架代码相关的可执行文件；通过对第一文件进行解析，为页面卡片的显示提供框架环境；加载第二文件，第二文件包括与页面卡片的业务代码相关且适合客户端原生页面的可执行文件；在框架环境中，对第二文件进行解析；根据第二文件的解析结果，在Web页面显示页面卡片，解析结果包括页面卡片中页面元素的渲染指令。
[0007]第二方面，本申请实施例提供一种页面卡片显示装置，包括：第一加载单元，用于响应于在Web页面显示页面卡片的请求，加载第一文件，第一文件包括与前端框架代码相关的可执行文件；第一解析单元，用于通过对第一文件进行解析，为页面卡片的显示提供框架环境；第二加载单元，用于加载第二文件，第二文件包括与页面卡片的业务代码相关且适合客户端原生页面的可执行文件；第二解析单元，用于在框架环境中，对第二文件进行解析；显示单元，用于根据第二文件的解析结果，在Web页面显示页面卡片，解析结果包括页面卡片中页面元素的渲染指令。
[0008]第三方面，本申请实施例提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使电子设备能够执行本申请第一方面中任一项提供的页面卡片显示方法。
[0009]第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，
计算机程序被处理器执行时实现本申请第一方面中任一项提供的页面卡片显示方法。
[0010]在本申请实施例中，响应于在Web页面显示页面卡片的请求，先通过加载和解析第一文件，为页面卡片的显示提供合适的框架环境，即为第二文件的解析提供合适的框架环境，接着加载和解析第二文件，实现页面卡片在Web页面的渲染和显示。其中，第一文件包括与前端框架代码相关的可执行文件，第二文件包括与页面卡片的业务代码相关且适合客户端原生页面的可执行文件。
[0011]从而，通过为与页面卡片的业务代码相关且适合客户端原生页面的可执行文件提供合适的框架环境的方式，使得该可执行文件应用于Web场景中的页面卡片渲染，而无需另行开发专门适合Web场景的页面卡片业务代码的可执行文件，降低了开发成本、节约了资源，还能够保持Web页面上和客户端原生页面上页面卡片渲染效果的一致性，提高用户体验。
附图说明
[0012]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0013]图1为本申请实施例提供的前端架构示意图；
[0014]图2为本申请实施例提供的应用场景示意图；
[0015]图3为本申请实施例提供的页面卡片显示方法的流程示意图一；
[0016]图4为本申请实施例提供的页面卡片显示方法的流程示意图二；
[0017]图5为本申请实施例提供的页面卡片显示方法的流程示意图三；
[0018]图6为本申请实施例提供的页面卡片显示装置600的结构框图；
[0019]图7为本申请示例性实施例提供的一种电子设备的硬件结构示意图。
具体实施方式
[0020]为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0021]首先，对本申请实施例的部分用语进行解释：
[0022]页面卡片(又可称为小部件)：是指嵌入在页面上的页面区块，主要的视觉展现形式为卡片形式，通常用于展示重要的业务信息，以吸引用户注意，比如在页面的卡片上展示店铺的优惠信息、热卖商品等。页面卡片可以独立开发、独立执行且动态下发，换句话说，可以独立于页面，对页面卡片的业务代码的可执行文件进行开发、执行，还可以动态下发该可执行文件，灵活性较高。
[0023]客户端原生(Native)页面：基于终端的本地操作系统(又称为原生系统)进行开发的应用程序页面，例如基于手机本地操作系统如IOS、安卓(Android)提供的开发语言、开发类库、开发工具开发的应用程序页面。
[0024]万维网(Web)页面：基于超文本标记语言(HyperText Markup Language，HTML)、Java和/或其他编程语言编写的网页。通常，通过浏览器展示Web页面，即通过浏览器的内核
将Web页面的源码转换为Web页面。
[0025]在页面卡片的应用市场中，主要是在客户端原生页面上显示页面卡片，所以前端人员主要出于在客户端显示页面卡片的需求编写页面卡片的业务代码，将页面卡片的业务代码打包为适合在客户端上执行的可执行文件。客户端主要利用容器技术，即利用原生(native)容器执行该可执行文件，实现页面卡片的渲染。不可忽视的是，目前也有在Web页面上显示页面卡片的市场需求，然而Web场景的页面显示主要是基于浏览器实现的，浏览器上并没有原生容器，使得适合在客户端执行的可执行文件并不适用于Web场景。
[0026]一种解决方案是，前端人员将小布家的业务代码另行打包为适合Web场景的可执行文件。该方案中，开发成本较高，而且服务端需要存储两套可执行文件，存在资源浪费。此外，浏览器显示Web页面的前端架构(即前端方案架构)与客户端的原生容器渲染页面卡片的前端架构不同，可能导致页面卡片在Web页面和客户端原生页面上的渲染效果不一致。
[0027]为解决上述问题，本申请实施例提出了一种页面卡片显示方法、装置、设备及介质。在本申请实施例中，响应于在Web页面显示页本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面卡片显示方法，其特征在于，包括：响应于在Web页面显示页面卡片的请求，加载第一文件，所述第一文件包括与前端框架代码相关的可执行文件；通过对所述第一文件进行解析，为所述页面卡片的显示提供框架环境；加载第二文件，所述第二文件包括与所述页面卡片的业务代码相关且适合客户端原生页面的可执行文件；在所述框架环境中，对所述第二文件进行解析；根据所述第二文件的解析结果，在所述Web页面显示所述页面卡片，所述解析结果包括所述页面卡片中页面元素的渲染指令。2.根据权利要求1所述的页面卡片显示方法，其特征在于，所述响应于在Web页面显示页面卡片的请求，加载第一文件，包括：响应于在所述Web页面显示页面卡片的请求，初始化前端框架执行引擎；在所述前端框架执行引擎初始化完成后，从服务端加载所述第一文件。3.根据权利要求2所述的页面卡片显示方法，其特征在于，所述通过对所述第一文件进行解析，为所述页面卡片的显示提供框架环境，包括：通过所述前端框架执行引擎解析所述第一文件，为所述页面卡片的显示提供框架环境。4.根据权利要求2或3所述的页面卡片显示方法，其特征在于，所述加载第二文件，包括：初始化业务代码执行引擎；在所述业务代码执行引擎初始化完成后，从服务端加载所述第二文件。5.根据权利要求4所述的页面卡片显示方法，其特征在于，所述在所述框架环境中，对所述第二文件进行解析，包括：在所述框架环境中，通过所述业务代码执行引擎解析所述第二文件。6.根据权利要求5所述的页面卡片显示方法，其特征在于，所述根据所述第二文件的解析结果，在所述Web页面显示所述页面卡片，包括：通过所述业务代码执行引擎，向所述前端框架执行引擎发送所述第二...

【专利技术属性】
技术研发人员：章健，钱程，张力本，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：