CN117519877A - 快应用卡片的渲染方法、装置、存储介质及电子设备 - Google Patents
快应用卡片的渲染方法、装置、存储介质及电子设备 Download PDFInfo
- Publication number
- CN117519877A CN117519877A CN202311526874.6A CN202311526874A CN117519877A CN 117519877 A CN117519877 A CN 117519877A CN 202311526874 A CN202311526874 A CN 202311526874A CN 117519877 A CN117519877 A CN 117519877A
- Authority
- CN
- China
- Prior art keywords
- interface
- card
- data
- rendering
- application card
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 144
- 238000000034 method Methods 0.000 title claims abstract description 56
- 238000004590 computer program Methods 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 230000003993 interaction Effects 0.000 description 4
- 238000010276 construction Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000009434 installation Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/42—Syntactic analysis
- G06F8/427—Parsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请公开了一种快应用卡片的渲染方法、装置、存储介质及电子设备。该方法包括:获取快应用卡片对应的声明式界面描述文件,声明式界面描述文件包括界面布局信息及界面数据;对声明式界面描述文件进行解析,得到界面布局信息及界面数据;根据界面布局信息及界面数据,生成用于构建视图树的渲染指令;执行渲染指令,构建视图树,得到快应用卡片的卡片界面。本申请可以实现渲染快应用卡片的卡片界面。
Description
技术领域
本申请属于电子技术领域,尤其涉及一种快应用卡片的渲染方法、装置、计算机可读存储介质及电子设备。
背景技术
快应用是基于手机硬件平台的新型应用形态,使用前端技术栈开发,原生渲染。快应用在构建时封装成轻量级的rpk包,可快速下发、无需安装、即点即用。快应用卡片是一种轻量级的卡片型快应用,支持在其他原生应用中渲染其卡片界面,主要用于展示信息,轻交互。为了实现快应用卡片的卡片界面的渲染,需要提供一种快应用卡片的卡片界面的渲染方法。
发明内容
本申请实施例提供一种快应用卡片的渲染方法、装置、存储介质及电子设备,可以实现渲染快应用卡片的卡片界面。
第一方面,本申请实施例提供一种快应用卡片的渲染方法,包括:
获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;
对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;
根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;
执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
第二方面,本申请实施例提供一种快应用卡片的渲染装置,包括:
文件获取模块,用于获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;
文件解析模块,用于对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;
指令生成模块,用于根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;
界面渲染模块,用于执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
第三方面,本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序,当所述计算机程序在计算机上执行时,使得所述计算机执行本申请实施例提供的快应用卡片的渲染方法。
第四方面,本申请实施例还提供一种电子设备,包括存储器,处理器,所述处理器通过调用所述存储器中存储的计算机程序,用于执行本申请实施例提供的快应用卡片的渲染方法。
本申请实施例中,通过获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面,可以实现渲染快应用卡片的卡片界面。
附图说明
下面结合附图,通过对本申请的具体实施方式详细描述,将使本申请的技术方案及其有益效果显而易见。
图1是本申请实施例提供的快应用卡片的渲染方法的第一种流程示意图。
图2是本申请实施例提供的视图树的示意图。
图3是本申请实施例提供的快应用卡片的渲染方法的第二种流程示意图。
图4是本申请实施例提供的快应用卡片的渲染装置的结构示意图。
图5是本申请实施例提供的电子设备的结构示意图。
具体实施方式
应当说明的是,本申请中的术语“第一”、“第二”和“第三”等是用于区别不同对象,而不是用于描述特定顺序。此外,术语“包括”和“具有”以及它们任何变形,意图在于覆盖不排他的包含。例如包含了一系列步骤或模块的过程、方法、***、产品或设备没有限定于已列出的步骤或模块,而是某些实施例还包括没有列出的步骤或模块,或某些实施例还包括对于这些过程、方法、产品或设备固有的其它步骤或模块。
在本文中提及“实施例”意味着,结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例,也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是,本文所描述的实施例可以与其它实施例相结合。
本申请实施例提供一种快应用卡片的渲染方法、快应用卡片的渲染装置、存储介质及电子设备。快应用卡片的渲染方法的执行主体可以是本申请实施例提供的快应用卡片的渲染装置,或者集成了该快应用卡片的渲染装置的电子设备,其中该快应用卡片的渲染装置可以采用硬件或者软件的方式实现。其中,电子设备可以是智能手机、平板电脑、掌上电脑、笔记本电脑等配置有处理器而具有快应用卡片的渲染能力的设备。
请参阅图1,图1是本申请实施例提供的快应用卡片的渲染方法的第一种流程示意图,流程可以包括:
在101中,获取快应用卡片对应的声明式界面描述文件,声明式界面描述文件包括界面布局信息及界面数据。
快应用是基于手机硬件平台的新型应用形态,使用前端技术栈开发,原生渲染。快应用在构建时封装成轻量级的rpk包,可快速下发、无需安装、即点即用。
快应用卡片是一种轻量级的卡片型快应用,支持在其他原生应用中渲染其卡片界面,主要用于展示信息,轻交互。也即是说,快应用卡片也是快应用的一种,因此,快应用卡片在构建时也会封装成rpk包。
快应用卡片广泛应用在负一屏、桌面、智能短信、全局搜索、语音助手、锁屏杂志等场景,上述在自己的运行环境中加载快应用卡片的原生应用,称为卡片的宿主应用。
相关技术中,在封装rpk包时,会将快应用卡片对应的ux文件编译为js格式的界面文件再连同其他资源文件,如manifest文件、图片资源等封装为rpk包。而快应用卡片引擎在渲染快应用卡片的卡片界面时,会从快应用卡片对应的rpk包中获取该js格式的文件,并创建js线程运行js引擎,使用jsFramework框架配合js引擎从该js格式的文件中解析出creatBody、addElement等渲染指令,并发送给java层。java层在接收到上述渲染指令之后,可以执行上述渲染指令,构建视图树(view tree),得到快应用卡片的卡片界面,从而实现在屏幕上渲染快应用卡片的卡片界面。
而由于相关技术中,java层获取渲染指令必须依赖jsFramework发送渲染指令,所以必须等到jsFramework运行并解析完该js格式的文件后,才能开始渲染界面,由于jsFramework运行和该js格式的文件的解析时间比较久,导致了快应用卡片渲染较慢的问题。
其中,视图树表示了显示界面上的控件之间的布局嵌套关系。图2显示了视图树的结构示意图,根节点及具有子节点的节点被称为ViewGroup,叶子节点被称为View。
以安卓设备为例,设备绘制渲染当前显示界面时,首先会将界面UI解析为视图树,视图树的内容为节点树的形式。View节点具有能反映控件在屏幕上大小位置的属性,同时View节点之间存在各种关系(比如父节点、子节点、同级节点)。其中,父子关系表示显示界面上的控件之间的布局嵌套关系,同级关系就表示控件之间的布局是并列关系。如此,完整的一棵View树就反映了当前显示界面的布局层次信息。
而对于重展示轻交互的快应用模板型卡片而言,不会有复杂的页面变化和交互效果,以一个静态的界面布局和动态的内容填充为主,因此,本实施例中,对于具有上述特征的快应用卡片,在其构建时,会生成包括静态的界面描述及动态内容,也即界面布局信息及界面数据的、json格式的声明式界面描述文件。由于声明式界面描述文件的结构固定,因此,快应用卡片引擎可以直接解析该声明式界面描述文件,得到渲染指令,无需创建js线程,使用jsFramework配合js引擎动态解析渲染指令。
本实施例中,在构建具有上述特征的快应用卡片时,开发人员会先构建该快应用卡片对应的ux文件,与传统快应用卡片对应的ux文件不同的是,该快应用卡片对应的ux文件减少了script脚本部分,增加了data数据事件部分,而template模板部分和style样式部分与传统快应用卡片对应的ux文件一致,即该快应用卡片对应的ux文件由template模版、style样式及data数据事件3部分组成。
需要说明的是,可以由开发人员判断快应用卡片是否具有上述特征,从而在开发人员判定快应用卡片具有上述特征时,开发人员可直接构建该快应用卡片对应的ux文件,再通过相应的工具将该ux文件编译为json格式的声明式界面描述文件。
其中,template模版部分用于描述快应用卡片的界面结构信息,即待编译界面结构信息,如用类型HTML的标签语言、结合基础组件、自定义组件、事件,构建出快应用卡片的界面结构。style样式部分用于描述快应用卡片的界面样式信息,即待编译界面样式信息,如描述template模板的组件样式,决定组件应用如何显示。data数据事件部分用于描述快应用卡片的界面数据,即待编译界面数据,如响应式数据和响应回调事件。
其中,data数据部分包括data和actions两个字段。data字段内存储的是响应式数据,如快应用卡片的卡片界面所显示的内容,如文字、图片等、快应用卡片的卡片界面上可触发跳转的链接等。当data字段内的数据变化会触发快应用卡片的卡片界面重新渲染,支持宿主应用通过加载url更新data数据和快应用卡片通过请求刷新data数据。actions字段内存储的是响应事件回调方法,负责处理响应逻辑,包括响应事件类型,如路由跳转类型、跳转路由地址字段,支持deeplink格式、携带的参数字段等。
当得到快应用卡片对应的ux文件之后,可以将快应用卡片对应的ux文件编译为json格式的声明式界面描述文件。
具体的,可以将待编译界面结构信息编译为声明式界面描述文件中的界面结构信息,将待编译界面样式信息编译为声明式界面描述文件中的界面样式信息,将待编译界面数据编译为声明式界面描述文件中的界面数据,得到json格式的声明式界面描述文件。
在本申请的一些实施例中,json格式的声明式界面描述文件包括template字段、styles字段和data字段。其中,template字段用于描述json格式的声明式界面描述文件中的界面结构信息。styles字段用于描述json格式的声明式界面描述文件中的界面样式信息。该data字段用于描述json格式的声明式界面描述文件中的界面数据。
具体的,在将快应用卡片对应的ux文件编译为json格式的声明式界面描述文件时,可以将ux文件中的template模板部分的内容编译为json对象,保存到json格式的声明式界面描述文件中的template字段下;将ux文件中的style样式字段的内容编译为json对象,保存到json格式的声明式界面描述文件中的styles字段下;将ux文件中的data数据事件部分编译为一个json对象,包含data和actions两个部分,该部分数据通过校验后直接保存到json格式的声明式界面描述文件中的data字段下,得到json格式的声明式界面描述文件中。
在一可选地实施例中,在将ux文件中的待编译界面结构信息编译为声明式界面描述文件中的界面结构信息时,可以将ux文件中的待编译界面结构信息编译为声明式界面描述文件中的抽象语法树结构的界面结构信息。
比如,在将ux文件中的template模板字段的内容编译为json格式的声明式界面描述文件中的json对象时,可以将ux文件中的template模板字段的内容编译为抽象语法树结构的json对象,保存到json格式的声明式界面描述文件中的template字段下。
其中,template字段的内容包括各界面组件的名称、各界面组件的类型,如“div”类型、“text”类型等、各界面组件之间的关系,如父子关系、同级关系等、相应界面组件支持的事件等。styles字段的内容包括各界面组件的界面样式,如界面组件的宽度、高度等。data字段的内容包括相应界面组件所需显示的内容,如文字、图片等、对应的链接等。
在本申请的一些实施例中,快应用轻卡对应的ux文件可以通过hap-toolkit编译生成声明式界面描述文件。
在本申请的一些实施例中,当得到声明式界面描述文件后,可以通过hap-toolkit将声明式界面描述文件和其他资源文件,如图片资源、manifest文件等)一起,经过签名生成快应用卡片对应的rpk文件。
本实施例中,在需要对快应用卡片的卡片界面进行显示时,可以从快应用卡片对应的rpk文件中获取快应用卡片对应的声明式界面描述文件。
在本申请的一些实施例中,由于是在构建具有以一个静态的界面布局和动态的内容填充为主的特征的快应用卡片(以下称轻卡)时,才会构建该轻卡对应的json格式的声明式界面描述文件,为区分轻卡和其他快应用卡片,在构建快应用卡片时,会在快应用卡片对应的manifest文件的卡片信息中添加一个type字段,用于指定快应用卡片的类型是轻卡还是其他快应用卡片。基于此,在获取快应用卡片对应的声明式界面描述文件之前,还可以确定快应用卡片的卡片类型;若该卡片类型为预设类型,则获取快应用卡片对应的声明式界面描述文件。其中,预设类型可以为轻卡。
具体的,可以获取快应用卡片对应的manifest文件,从该manifest文件中解析出该type字段,通过该type字段的内容确定快应用卡片的卡片类型。比如,若通过该type字段的内容确定快应用卡片的卡片类型为轻卡,则可以获取快应用卡片对应的声明式界面描述文件,并执行步骤202。若通过该type字段的内容确定快应用卡片的卡片类型为其他快应用卡片,则可以按照相关技术中渲染快应用卡片的卡片界面的方式渲染快应用卡片的卡片界面。
在102中,对声明式界面描述文件进行解析,得到界面布局信息及界面数据。
比如,通过对声明式界面描述文件进行解析,可以得到界面布局信息包括的界面结构信息及界面样式信息,以及界面数据。
例如,通过对json格式的声明式界面描述文件进行解析,解析出template字段、style字段的内容,可以得到界面布局信息,如界面组件、界面组件之间的关系,如父子关系、同级关系等、组件样式等,解析出data字段,可以得到界面数据,如显示哪些文字、显示哪些图片,点击的链接为哪些链接等。
在103中,根据界面布局信息及界面数据,生成用于构建视图树的渲染指令。
比如,在解析出template字段、styles字段、data字段之后,可以基于template字段的内容确定各界面组件的名称、各界面组件的类型、各界面组件之间的关系、相应界面组件支持的事件等,根据styles字段的内容确定各界面组件的界面样式,根据data字段的内容确定相应界面组件所需显示的内容、对应的链接等,从而生成对应的渲染指令。
例如,对于解析出的某界面组件,如果确定其没有父节点,证明其是根节点,则生成createBody渲染指令,如果确定其有父节点,也有子节点,则生成addElement渲染指令,如果确定其有父节点,但没有子节点,则生成createFinish渲染指令。
在104中,执行渲染指令,构建视图树,得到快应用卡片的卡片界面。
比如,可以将生成的渲染指令依次发送给渲染线程,由渲染线程通过执行渲染指令的管理器,如RenderActionManager进行渲染指令的执行,构建视图树。
可以理解的是,通过执行createBody渲染指令,可以得到视图树的根节点,通过执行addElement渲染指令,可以得到视图树的中间节点,通过执行createFinish渲染指令,可以得到视图树的叶子节点,构成视图树,从而最终将快应用卡片的卡片界面渲染至屏幕上,如加载至宿主应用的应用界面,如负一屏。
在一可选地实施例中,在根据界面布局信息及界面数据,生成用于构建视图树的渲染指令之前,还可以获取宿主应用传入的第一更新数据;根据第一更新数据,对界面数据进行更新,得到第一更新后界面数据;再在根据界面布局信息及界面数据,生成用于构建视图树的渲染指令时,根据界面布局信息及第一更新后界面数据,生成用于构建视图树的渲染指令。
本实施例中,宿主应用加载快应用卡片的时候,需要传入一个加载链接url,url一般由运营配置、经服务端下发,用以指定需要加载的快应用卡片,例如:hap://widget/com.nearme.quickapp.center/Cards?data=xxx。
其中,“hap://widget/”为协议头,之后为快应用卡片的包名“(com.nearme.quickapp.center)”+快应用卡片的路径“/Cards”,“?”之后携带传递给快应用卡片的参数。通过该加载链接,快应用卡片引擎可以获取到宿主应用传入的第一更新数据,将该第一更新数据与声明式界面描述文件中的界面数据进行merge操作,以更新声明式界面描述文件中的界面数据。
例如,某快应用卡片对应的声明式界面描述文件的界面数据包括图片M和文本A1,而快应用卡片引擎通过加载链接获取到的第一更新数据为文本A2,那么,第一更新后界面数据包括图片M和文本A2。
当得到第一更新后界面数据,便可以按照与前述“根据界面布局信息及界面数据,生成用于构建视图树的渲染指令”相同的方式,“根据界面布局信息及第一更新后界面数据,生成用于构建视图树的渲染指令”,并按照与前述“根据界面布局信息及界面数据,生成用于构建视图树的渲染指令”相同的方式“根据界面布局信息及第一更新后界面数据,生成用于构建视图树的渲染指令”。
在一可选地实施例中,在执行渲染指令,构建视图树,得到快应用卡片的卡片界面之后,还可以确定卡片界面的刷新时长;若刷新时长达到预设时长,则从指定链接中拉取第二更新数据;根据第二更新数据,更新界面数据,得到第二更新后界面数据;根据界面布局信息及第二更新后界面数据,生成用于构建更新后视图树的更新后渲染指令;执行更新后渲染指令,构建更新后视图树,得到快应用卡片的更新后卡片界面。
需要说明的是,快应用卡片引擎会以设定的频率,从指定链接中拉取第二更新数据,拉取后更新快应用卡片的卡片界面,从而实现快应用卡片的卡片界面的数据刷新。
其中,设定的频率和指定链接可以在manifest文件中指定。例如,可以在manifest文件中添加一个refreshDuration字段,通过该refreshDuration字段设定该频率。refreshDuration字段的取值可以由快应用卡片的开发人员自行设置,快应用运营方面会根据快应用卡片的卡片类型提供一个最小值管控。可以在manifest文件中添加一个dataFetchUrl字段,指定数据拉取链接,一般是http/https网络链接或本地contentProvider提供的content链接,从服务端或其他原生应用中获取第二更新数据。在一个refreshDuration时间周期内,只会更新1次。也即,预设时长为refreshDuration时间周期。例如,假设一张快应用卡片的refreshDuration设置为10分钟,则可以确定预设时长为10分钟。
刷新时长为当前时间与快应用卡片的卡片界面上一次刷新数据的时间之差。需要说明的是,快应用卡片的卡片界面的加载时间也是快应用卡片的卡片界面首次刷新数据的时间。
例如,假设预设时长为10分钟,快应用卡片的卡片界面上一次刷新数据的时间为2023年11月13日12时0分,若当前时间为2023年11月13日12时5分,则可以确定刷新时长为5分钟,未达到预设时长,那么,此时无需从指定链接中拉取第二更新数据以更新快应用卡片的卡片界面;若当前时间为2023年11月13日12时10分,则可以确定刷新时长为10分钟,达到预设时长,那么,此时可以从指定链接中拉取第二更新数据以更新快应用卡片的卡片界面。当快应用卡片的卡片界面更新后,若刷新时长又达到预设时长,便可继续拉取新的更新数据以更新快应用卡片的卡片界面,以此循环。
在一可选地实施例中,为避免频繁访问网络,当且仅当快应用卡片曝光时更新快应用卡片的卡片界面。也即是说,即使刷新时长已达到预设时长,但快应用卡片当前并未曝光,便暂时不更新快应用卡片的卡片界面,在下一次快应用卡片曝光时再更新快应用卡片的卡片界面。
例如,假设预设时长为10分钟,快应用卡片的卡片界面上一次刷新数据的时间为2023年11月13日12时0分,用户在2023年11月13日12时5分滑出负一屏,此时快应用卡片处于隐藏状态,即不处于曝光状态,那么,若在2023年11月13日12时10分时及之后的时间里用户均未滑入负一屏,则无需拉取第二更新数据以更新快应用卡片的卡片界面。假设用户在2023年11月13日12时15分滑入负一屏,快应用卡片再次曝光,也即快应用卡片处于曝光状态,此时可以确定刷新时长早已达到预设时长,那么,可以去拉取第二更新数据以更新快应用卡片的卡片界面。
当得到第二更新数据之后,可以按照与前述“根据第一更新数据,更新界面数据,得到第一更新后界面数据”相同的方式“根据第二更新数据,更新界面数据,得到第二更新后界面数据”。当得到第二更新后界面数据,便可以按照与前述“根据界面布局信息及界面数据,生成用于构建视图树的渲染指令”相同的方式,“根据界面布局信息及第一更新后界面数据,生成用于构建视图树的渲染指令”,并按照与前述“根据界面布局信息及界面数据,生成用于构建视图树的渲染指令”相同的方式“根据界面布局信息及第二更新后界面数据,生成用于构建更新后视图树的更新后渲染指令”。当得到更新后渲染指令之后,可以按照与前述“执行渲染指令,构建视图树,得到快应用卡片的卡片界面”相同的方式“执行更新后渲染指令,构建更新后视图树,得到快应用卡片的更新后卡片界面”。
本实施例中,通过获取快应用卡片对应的声明式界面描述文件,声明式界面描述文件包括界面布局信息及界面数据;对声明式界面描述文件进行解析,得到界面布局信息及界面数据;根据界面布局信息及界面数据,生成用于构建视图树的渲染指令;执行渲染指令,构建视图树,得到快应用卡片的卡片界面,可以实现渲染快应用卡片的卡片界面。
进一步的,由于本申请无需创建js线程运行js引擎,无需使用jsFramework框架配合js引擎便可直接解析出渲染指令,因此可以加快快应用卡片的渲染时间。
进一步的,开发人员在接入轻卡时使用与快应用卡片一致的DSL,在无需额外学习成本的前提下,通过在manifest配置卡片类型为json(json标识卡片类型为轻卡),即可使用hap-toolkit打包为json格式的轻卡,从而大大提升卡片的性能。
如图3所示,本申请实施例中,在加载快应用卡片的卡片界面时,快应用卡片引擎会获取快应用卡片对应的rpk包。当获取到rpk包之后,快应用卡片引擎会从rpk包中获取manifest文件,并解析该manifest文件,以确定快应用卡片的卡片类型。
若该卡片类型为预设类型,即轻卡类型,则快应用卡片引擎从rpk包中获取json格式的声明式界面描述文件,并解析该json格式的声明式界面描述文件,生成渲染指令。之后,快应用卡片引擎还会创建渲染线程,通过该渲染线程执行该渲染指令,构建view树,完成快应用卡片的卡片界面的渲染。
若该卡片类型不为预设类型,则快应用引擎会从rpk包中获取js文件,以及创建js线程,通过js线程运行js引擎,使用jsFramework框架配合js引擎从该js格式的文件中解析出渲染指令。之后,快应用卡片引擎还会创建渲染线程,通过该渲染线程执行该渲染指令,构建view树,完成快应用卡片的卡片界面的渲染。
请参阅图4,图4为本申请实施例提供的快应用卡片的渲染装置的结构示意图。快应用卡片的渲染装置200包括:文件获取模块201、文件解析模块202、指令生成模块203及界面渲染模块204。
文件获取模块201,用于获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据。
文件解析模块202,用于对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据。
指令生成模块203,用于根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令。
界面渲染模块204,用于执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
在一可选地实施例中,所述声明式界面描述文件的文件格式为json格式。
在一可选地实施例中,所述界面布局信息包括界面结构信息及界面样式信息,快应用卡片的渲染装置200还可以包括文件编译模块,文件编译模块,可以用于:获取所述快应用卡片对应的ux文件,所述ux文件包括待编译界面结构信息、待编译界面样式信息及待编译界面数据;将所述待编译界面结构信息编译为所述界面结构信息,将所述待编译界面样式信息编译为所述界面样式信息,以及将所述待编译界面数据编译为所述界面数据,得到所述json格式的声明式界面描述文件。
在一可选地实施例中,文件编译模块,可以用于:将所述待编译界面结构信息编译为抽象语法树结构的所述界面结构信息。
在一可选地实施例中,快应用卡片的渲染装置200还可以包括数据更新模块,数据更新模块,可以用于:获取宿主应用传入的第一更新数据;根据所述更新数据,对所述界面数据进行更新,得到第一更新后界面数据;
指令生成模块203,可以用于:根据所述界面布局信息及所述第一更新后界面数据,生成用于构建视图树的渲染指令。
在一可选地实施例中,数据更新模块,可以用于:确定所述卡片界面的刷新时长;若所述刷新时长达到预设时长,则从指定链接中拉取第二更新数据;根据所述第二更新数据,更新所述界面数据,得到第二更新后界面数据;
指令生成模块203,可以用于:根据所述界面布局信息及所述第二更新后界面数据,生成用于构建更新后视图树的更新后渲染指令;
界面渲染模块204,可以用于:执行所述更新后渲染指令,构建更新后视图树,得到所述快应用卡片的更新后卡片界面。
在一可选地实施例中,文件获取模块201,可以用于:确定所述快应用卡片的卡片类型;若所述卡片类型为预设类型,则获取快应用卡片对应的声明式界面描述文件。
本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序,当计算机程序在计算机上执行时,使得计算机执行如本实施例提供的快应用卡片的渲染方法。
本申请实施例还提供一种电子设备,包括存储器,处理器,处理器通过调用存储器中存储的计算机程序,用于执行本实施例提供的快应用卡片的渲染方法。
例如,上述电子设备可以是诸如平板电脑或者智能手机等移动终端。请参阅图5,图5为本申请实施例提供的电子设备的结构示意图。
该电子设备300可以包括处理器301、存储器302等部件。本领域技术人员可以理解,图5中示出的电子设备结构并不构成对电子设备的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置,如电子设备300还可包括屏幕。
处理器301是电子设备的控制中心,利用各种接口和线路连接整个电子设备的各个部分,通过运行或执行存储在存储器302内的应用程序,以及调用存储在存储器302内的数据,执行电子设备的各种功能和处理数据,从而对电子设备进行整体监控。
存储器302可用于存储应用程序和数据。存储器302存储的应用程序中包含有可执行代码。应用程序可以组成各种功能模块。处理器301通过运行存储在存储器302的应用程序,从而执行各种功能应用以及数据处理。
在本实施例中,电子设备中的处理器301会按照如下的指令,将一个或一个以上的应用程序的进程对应的可执行代码加载到存储器302中,并由处理器301来运行存储在存储器302中的应用程序,从而实现:
获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;
对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;
根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;
执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
在一可选地实施例中,所述声明式界面描述文件的文件格式为json格式。
在一可选地实施例中,所述界面布局信息包括界面结构信息及界面样式信息,处理器301执行所述获取快应用卡片对应的声明式界面描述文件之前,还可以执行:获取所述快应用卡片对应的ux文件,所述ux文件包括待编译界面结构信息、待编译界面样式信息及待编译界面数据;将所述待编译界面结构信息编译为所述界面结构信息,将所述待编译界面样式信息编译为所述界面样式信息,以及将所述待编译界面数据编译为所述界面数据,得到所述json格式的声明式界面描述文件。
在一可选地实施例中,处理器301执行所述将所述待编译界面结构信息编译为所述界面结构信息时,可以执行:将所述待编译界面结构信息编译为抽象语法树结构的所述界面结构信息。
在一可选地实施例中,处理器301执行所述根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令之前,还可以执行:获取宿主应用传入的第一更新数据;根据所述更新数据,对所述界面数据进行更新,得到第一更新后界面数据;处理器301执行所述根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令时,可以执行:根据所述界面布局信息及所述第一更新后界面数据,生成用于构建视图树的渲染指令。
在一可选地实施例中,处理器301执行所述执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面之后,还可以执行:确定所述卡片界面的刷新时长;若所述刷新时长达到预设时长,则从指定链接中拉取第二更新数据;根据所述第二更新数据,更新所述界面数据,得到第二更新后界面数据;根据所述界面布局信息及所述第二更新后界面数据,生成用于构建更新后视图树的更新后渲染指令;执行所述更新后渲染指令,构建更新后视图树,得到所述快应用卡片的更新后卡片界面。
在一可选地实施例中,处理器301执行所述获取快应用卡片对应的声明式界面描述文件之前,还可以执行:确定所述快应用卡片的卡片类型;处理器301执行所述获取快应用卡片对应的声明式界面描述文件时,可以执行:若所述卡片类型为预设类型,则获取快应用卡片对应的声明式界面描述文件。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见上文针对快应用卡片的渲染方法的详细描述,此处不再赘述。
本申请实施例提供的快应用卡片的渲染装置与上文实施例中的快应用卡片的渲染方法属于同一构思,在快应用卡片的渲染装置上可以运行快应用卡片的渲染方法实施例中提供的任一方法,其具体实现过程详见快应用卡片的渲染方法实施例,此处不再赘述。
需要说明的是,对本申请实施例快应用卡片的渲染方法而言,本领域普通技术人员可以理解实现本申请实施例快应用卡片的渲染方法的全部或部分流程,是可以通过计算机程序来控制相关的硬件来完成,计算机程序可存储于一计算机可读存储介质中,如存储在存储器中,并被至少一个处理器执行,在执行过程中可包括如快应用卡片的渲染方法的实施例的流程。其中,该计算机可读存储介质可为磁碟、光盘、只读存储器(ROM,Read OnlyMemory)、随机存取记忆体(RAM,Random Access Memory)等。
可以理解的是,在本申请的具体实施方式中,涉及到用户信息,如应用使用行为数据、日志等相关的数据,当本申请以上实施例运用到具体产品或技术中时,需要获得用户许可或者同意,且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
对本申请实施例的快应用卡片的渲染装置而言,其各功能模块可以集成在一个处理芯片中,也可以是各个模块单独物理存在,也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时,也可以存储在一个计算机可读存储介质中,存储介质譬如为只读存储器,磁盘或光盘等。
以上对本申请实施例所提供的一种快应用卡片的渲染方法、装置、存储介质及电子设备进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处,综上,本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种快应用卡片的渲染方法,其特征在于,包括:
获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;
对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;
根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;
执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
2.根据权利要求1所述的快应用卡片的渲染方法,其特征在于,所述声明式界面描述文件的文件格式为json格式。
3.根据权利要求2所述的快应用卡片的渲染方法,其特征在于,所述界面布局信息包括界面结构信息及界面样式信息,所述获取快应用卡片对应的声明式界面描述文件之前,还包括:
获取所述快应用卡片对应的ux文件,所述ux文件包括待编译界面结构信息、待编译界面样式信息及待编译界面数据;
将所述待编译界面结构信息编译为所述界面结构信息,将所述待编译界面样式信息编译为所述界面样式信息,以及将所述待编译界面数据编译为所述界面数据,得到所述json格式的声明式界面描述文件。
4.根据权利要求3所述的快应用卡片的渲染方法,其特征在于,所述将所述待编译界面结构信息编译为所述界面结构信息,包括:
将所述待编译界面结构信息编译为抽象语法树结构的所述界面结构信息。
5.根据权利要求1至4任一项所述的快应用卡片的渲染方法,其特征在于,所述根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令之前,还包括:
获取宿主应用传入的第一更新数据;
根据所述更新数据,对所述界面数据进行更新,得到第一更新后界面数据;
所述根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令,包括:
根据所述界面布局信息及所述第一更新后界面数据,生成用于构建视图树的渲染指令。
6.根据权利要求1至4任一项所述的快应用卡片的渲染方法,其特征在于,所述执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面之后,还包括:
确定所述卡片界面的刷新时长;
若所述刷新时长达到预设时长,则从指定链接中拉取第二更新数据;
根据所述第二更新数据,更新所述界面数据,得到第二更新后界面数据;
根据所述界面布局信息及所述第二更新后界面数据,生成用于构建更新后视图树的更新后渲染指令;
执行所述更新后渲染指令,构建更新后视图树,得到所述快应用卡片的更新后卡片界面。
7.根据权利要求1至4任一项所述的快应用卡片的渲染方法,其特征在于,所述获取快应用卡片对应的声明式界面描述文件之前,还包括:
确定所述快应用卡片的卡片类型;
所述获取快应用卡片对应的声明式界面描述文件,包括:
若所述卡片类型为预设类型,则获取快应用卡片对应的声明式界面描述文件。
8.一种快应用卡片的渲染装置,其特征在于,包括:
文件获取模块,用于获取快应用卡片对应的声明式界面描述文件,所述声明式界面描述文件包括界面布局信息及界面数据;
文件解析模块,用于对所述声明式界面描述文件进行解析,得到所述界面布局信息及所述界面数据;
指令生成模块,用于根据所述界面布局信息及所述界面数据,生成用于构建视图树的渲染指令;
界面渲染模块,用于执行所述渲染指令,构建所述视图树,得到所述快应用卡片的卡片界面。
9.一种计算机可读存储介质,其特征在于,所述存储介质中存储有计算机程序,当所述计算机程序在计算机上运行时,使得所述计算机执行权利要求1至7任一项所述的快应用卡片的渲染方法。
10.一种电子设备,其特征在于,所述电子设备包括处理器和存储器,所述存储器中存储有计算机程序,所述处理器通过调用所述存储器中存储的所述计算机程序,用于执行权利要求1至7任一项所述的快应用卡片的渲染方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311526874.6A CN117519877A (zh) | 2023-11-15 | 2023-11-15 | 快应用卡片的渲染方法、装置、存储介质及电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311526874.6A CN117519877A (zh) | 2023-11-15 | 2023-11-15 | 快应用卡片的渲染方法、装置、存储介质及电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN117519877A true CN117519877A (zh) | 2024-02-06 |
Family
ID=89758226
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311526874.6A Pending CN117519877A (zh) | 2023-11-15 | 2023-11-15 | 快应用卡片的渲染方法、装置、存储介质及电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117519877A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117724823A (zh) * | 2024-02-07 | 2024-03-19 | 之江实验室 | 基于声明式语义的多模型工作流描述的任务执行方法 |
-
2023
- 2023-11-15 CN CN202311526874.6A patent/CN117519877A/zh active Pending
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117724823A (zh) * | 2024-02-07 | 2024-03-19 | 之江实验室 | 基于声明式语义的多模型工作流描述的任务执行方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
WO2018228211A1 (zh) | 应用转换方法、装置及设备 | |
WO2018082562A1 (zh) | 页面数据编译的方法、页面渲染的方法、装置及存储介质 | |
US8413128B2 (en) | Asynchronous load of source dependencies | |
US8615750B1 (en) | Optimizing application compiling | |
JP2017538991A (ja) | モバイルアプリ用ページ処理 | |
CN106997298A (zh) | 一种应用资源获取方法及装置 | |
CN113419729B (zh) | 基于组件化的前端页面搭建方法、装置、设备及存储介质 | |
CN110727429B (zh) | 一种前端页面的生成方法、装置及设备 | |
CN111026634A (zh) | 一种接口自动化测试***、方法、装置及存储介质 | |
CN110806868A (zh) | 一种单页面搭建及加载方法 | |
CN117519877A (zh) | 快应用卡片的渲染方法、装置、存储介质及电子设备 | |
CN112114890A (zh) | 小程序的处理方法、装置、设备及存储介质 | |
CN113010827A (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
CN112835809A (zh) | 一种基于浏览器的测试数据设置方法、装置、设备及介质 | |
US10789751B2 (en) | Method and apparatus for implementing animation in client application and animation script framework | |
CN114706616A (zh) | 小程序构建方法和装置 | |
CN113268239B (zh) | 桌面应用的视图构建方法、装置、设备及存储介质 | |
CN112799670B (zh) | 一种统一多端逻辑开发的方法及*** | |
CN114217789A (zh) | 功能组件拓展方法、装置、设备、存储介质及程序产品 | |
CN112965716B (zh) | 页面处理方法、装置、电子设备及可读存储介质 | |
CN111679828A (zh) | 一种数据处理的方法及装置、电子设备、存储介质 | |
CN112068879A (zh) | 基于配置化的客户端应用程序开发框架构建方法及装置 | |
CN111881043A (zh) | 页面测试方法、装置、存储介质和处理器 | |
CN113641594B (zh) | 跨端自动化测试方法以及相关装置 | |
CN107077484B (zh) | 生成应用的网络浏览器视图 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |