CN116910399A - 页面构建方法、装置、电子设备和计算机存储介质 - Google Patents
页面构建方法、装置、电子设备和计算机存储介质 Download PDFInfo
- Publication number
- CN116910399A CN116910399A CN202211396080.8A CN202211396080A CN116910399A CN 116910399 A CN116910399 A CN 116910399A CN 202211396080 A CN202211396080 A CN 202211396080A CN 116910399 A CN116910399 A CN 116910399A
- Authority
- CN
- China
- Prior art keywords
- page
- template
- html
- constructed
- data
- 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
- 238000010276 construction Methods 0.000 title claims abstract description 26
- 238000000034 method Methods 0.000 claims abstract description 55
- 238000009877 rendering Methods 0.000 claims abstract description 22
- 238000013507 mapping Methods 0.000 claims description 32
- 238000012545 processing Methods 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 15
- 239000012634 fragment Substances 0.000 claims description 15
- 230000003993 interaction Effects 0.000 claims description 11
- 238000006243 chemical reaction Methods 0.000 claims description 10
- 238000011161 development Methods 0.000 description 18
- 238000010586 diagram Methods 0.000 description 12
- 239000008186 active pharmaceutical agent Substances 0.000 description 11
- 230000008569 process Effects 0.000 description 9
- 230000006870 function Effects 0.000 description 8
- 238000005516 engineering process Methods 0.000 description 7
- 230000000694 effects Effects 0.000 description 5
- KLDZYURQCUYZBL-UHFFFAOYSA-N 2-[3-[(2-hydroxyphenyl)methylideneamino]propyliminomethyl]phenol Chemical compound OC1=CC=CC=C1C=NCCCN=CC1=CC=CC=C1O KLDZYURQCUYZBL-UHFFFAOYSA-N 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 3
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000010354 integration Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种页面构建方法、装置、电子设备和计算机存储介质，该方法包括：获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
Description
技术领域
本申请涉及终端技术领域，尤其涉及一种页面构建方法、装置、电子设备和计算机存储介质。
背景技术
应用程序(Application，App)开发是一个复杂的工程，开发者往往需要同时基于Andorid和IOS两个平台进行开发，导致开发成本增加，于是App跨平台开发成为一种趋势。
相关技术中，通常采用泛Web容器方案，该方案通过集成Weex或者React Native保证开发体验，实现整个完整页面级别的动态化；由于是重量级动态化解决方案，导致学习成本比较高，遇到问题排查也比较困难，使用后App整体体积也增加很多。
发明内容
本申请提供一种页面构建方法、装置、电子设备和计算机存储介质。
本申请的技术方案是这样实现的：
本申请提供了一种页面构建方法，所述方法包括：
获取待构建页面对应的业务数据和模板数据；所述模板数据包括超文本标记语言(Hyper Text Markup Language，HTML)模版和层叠样式表(Cascading Style Sheets，CSS)样式数据；
将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
在一些实施例中，所述对所述纯HTML文本进行转换，得到Native View树，包括：
对所述纯HTML文本进行解析处理，得到HTML DOM树；
根据预设的第一映射关系，将所述HTML DOM树中的每个节点依次转换成JS对象简谱(JavaScript Object Notation，JSON)节点；根据转换后的每个JSON节点，生成JSON树；所述所述第一映射关系表征所述HTML DOM树中的每个HTML标签与JSON节点的映射关系；
根据预设的第二映射关系，将所述JSON树中的每个JSON节点依次转换成View节点；根据转换后的每个View节点，生成所述Native View树；所述第二映射关系表征所述每个JSON节点与View节点的映射关系。
在一些实施例中，所述根据转换后的每个JSON节点，生成JSON树，包括：
对于所述转换后的每个JSON节点，添加字段信息，生成所述JSON树；所述字段信息包括key字段信息、class字段信息以及onclick字段信息；其中，所述key字段信息，用于保存与所述每个JSON节点存在映射关系的各个HTML标签对应的标识信息；所述class字段信息，用于保存所述各个HTML标签对应的CSS样式数据；所述onclick字段信息，用于保存点击所述各个HTML标签时需要执行的JS代码片段。
在一些实施例中，所述根据所述CSS样式数据，对所述Native View树进行渲染，包括：
根据所述class字段信息，获取所述每个View节点对应的CSS样式数据；
根据所述每个View节点对应的CSS样式数据，对所述Native View树进行渲染。
在一些实施例中，所述模板数据还包括JS逻辑数据，所述方法还包括：预先将所述JS逻辑数据注入到JS执行引擎；
接收到针对所述待构建页面的点击操作时，确定所述点击操作对应的目标HTML标签；
根据所述onclick字段信息，获取所述目标HTML标签对应的JS代码片段；
将所述目标HTML标签对应的JS代码片段应用到所述Native View树的事件处理中，基于所述JS执行引擎，实现所述用户与所述待构建页面的点击交互。
在一些实施例中，所述方法还包括：
确定预设的模板库中是否存在符合配置要求的用户界面(UserInterface，UI)模版单元；
若确定存在，则从所述模板库中获取所述符合配置要求的UI模版单元，并基于所述UI模版单元进行页面配置，得到所述待构建页面对应的模板数据；
若确定不存在，则向管理员发送提醒信息，以使所述管理员开发所述符合配置要求的UI模版单元，并基于开发出的UI模版单元进行页面配置，得到所述待构建页面对应的模板数据。
在一些实施例中，在得到所述待构建页面对应的模板数据后，获取所述待构建页面对应的模板数据，包括：
通过应用程序编程接口(Application Programming Interface，API)将所述模板数据与所述待构建页面进行关联；
接收到针对所述待构建页面的打开操作时，向所述API接口发送数据获取请求，以获取所述待构建页面对应的模板数据。
本申请提供一种页面构建装置，所述装置包括获取模块、转换模块和生成模块，其中，
获取模块，用于获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；
转换模块，用于将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
生成模块，用于根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
本申请提供一种电子设备，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现前述一个或多个技术方案提供的页面构建方法。
本申请提供一种计算机存储介质，所述计算机存储介质存储有计算机程序；所述计算机程序被执行后能够实现前述一个或多个技术方案提供的页面构建方法。
本申请实施例提供一种页面构建方法、装置、电子设备和计算机存储介质，该方法包括：获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。可以看出，本申请实施例中，在生成待构建页面时只需要掌握HTML、CSS等前端基础技术即可实现，与相关技术中需要额外集成Weex或者React Native相比，不仅更加轻量化，而且具有学习成本低，容易上手使用的优点。此外，由于在不同的业务场景下，获取到的待构建页面的业务数据存在区别，本申请实施例通过将获取到的待构建页面对应的HTML模版与业务数据相结合，生成纯HTML文本用于后续处理，可实现HTML模版的高度复用。
附图说明
图1为本申请实施例的一种页面构建方法的流程示意图；
图2为本申请实施例中的一种开发UI模板单元的结构示意图；
图3为本申请实施例中的一种配置UI模板单元的结构示意图；
图4为本申请实施例中的另一种页面构建方法的流程示意图；
图5为本申请实施例提供的一种页面构建装置的结构示意图；
图6为本申请实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请中的附图，对本申请中的技术方案进行清楚、完整地描述。
以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所提供的实施例仅仅用以解释本申请，并不用于限定本申请。另外，以下所提供的实施例是用于实施本申请的部分实施例，而非提供实施本申请的全部实施例，在不冲突的情况下，本申请记载的技术方案可以任意组合的方式实施。
需要说明的是，在本申请中，术语“包括”、“包含”或者其任何其它变体意在涵盖非排他性的包含，从而使得包括一系列要素的方法或者装置不仅包括所明确记载的要素，而且还包括没有明确列出的其它要素，或者是还包括为实施方法或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括该要素的方法或者装置中还存在另外的相关要素(例如方法中的步骤或者装置中的单元，例如的单元可以是部分处理器、部分程序或软件等等)。
本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，C和/或D，可以表示：单独存在C，同时存在C和D，单独存在D这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括C、D、E中的至少一种，可以表示包括从C、D和E构成的集合中选择的任意一个或多个元素。
例如，本申请提供的页面构建方法包含了一系列的步骤，但是本申请提供的页面构建方法不限于所记载的步骤，同样地，本申请提供的页面构建装置包括了一系列模块，但是本申请提供的页面构建装置不限于包括所明确记载的模块，还可以包括为获取相关信息、或基于信息进行处理时所需要设置的模块。
移动端App跨平台开发指的是开发一套代码，能够同时在Andorid和IOS这两个平台上运行，而且可以实现实时更新。相关技术中，移动端App跨平台开发中，主流的方案大致归纳为WebView方案和泛Web容器方案。
其中，WebView方案就是基于Web技术通过浏览器组件来实现界面和功能。这类Hybrid开发模式，只需开发一次，就可以同时在多个系统的浏览器组件中运行，保持基本一致的体验。Web与原生系统之间的通信通过JSBridge来完成，页面的呈现则由浏览器组件按照标准的浏览器渲染流程完成。泛Web容器方案(例如，React Native、Weex方案)放弃了浏览器渲染，而采用原生控件，从而保证交互体验；它依然采用前端友好的JavaScript语言，来保证开发体验。在跨平台通信上，也是通过Bridge的方式来调用原生提供的方法。
然而，WebView方案简单、支持热更新且开发体验好，但缺点也很明显，页面需在线加载，浏览器渲染流程复杂，导致页面打开时经常会出现白屏、且交互体验上与原生体验有着非常明显的差距。泛Web容器方案虽然解决了Web容器方案体验差的问题，但致力于提供一整套全站解决方案，整个完整页面级别的动态化，是一个大而全的一揽子解决方案，它试图在内部屏蔽平台之前的所有差异性，让开发者无感知，然而由于不同平台之间的差距性是客观存在的，在开发中往往还是需要额外工作处理平台之间的兼容性问题。同时，由于是重量级动态化解决方案，导致学习成本比较高，遇到问题排查也比较困难，使用后App整体体积也增加很多。
针对上述问题，提出以下各实施例。
在本申请的一些实施例中，页面构建方法可以利用页面构建装置中的处理器实现，上述处理器可以为特定用途集成电路(Application Specific Integrated Circuit，ASIC)、数字信号处理器(Digital Signal Processor，DSP)、数字信号处理装置(DigitalSignal Processing Device，DSPD)、可编程逻辑装置(Programmable Logic Device，PLD)、现场可编程逻辑门阵列(Field Programmable Gate Array，FPGA)、中央处理器(CentralProcessing Unit，CPU)、控制器、微控制器、微处理器中的至少一种。
图1为本申请实施例的一种页面构建方法的流程示意图，如图1所示，该流程可以包括：
步骤101：获取待构建页面对应的业务数据和模板数据。
本申请实施例中，页面构建方法可以应用于移动端App，待构建页面表示需要移动端App跨平台开发的页面；即，最终生成的待构建页面能够同时运行在不同平台，这里，对于平台的类型不作限定，例如，可以是Andorid平台或IOS平台等。
这里，待构建页面对应的业务数据是由业务方自身根据实际需要进行定义的，业务数据的类型与业务方实际的业务场景相关，即不同的业务场景可以对应不同的业务数据；例如，当业务场景为用户购买某一商品的场景时，此时业务数据可以包括商品详情、商品库存等业务数据。
示例性地，待构建页面对应的模板数据可以包括：HTML模版、CSS样式数据和JS逻辑数据；其中，HTML模版是基于轻量级的模板语言得到的，例如，可以基于Mustache模板语言得到HTML模版；可以理解地，使用Mustache语法编写待构建页面对应的HTML模版，可以简化HTML模版在js代码中的编写内容，使得最终生成的待构建页面更加轻量。CSS样式数据用于在生成待构建页面的过程中实现渲染功能；JS逻辑数据则用于后续接收到点击操作时实现逻辑处理的调用；以一个商品列表布局为例，CSS样式数据对应一个商品的布局样式，JS逻辑数据对应商品的点击处理函数，HTML模版则对应待构建页面上的Native View树结构；后续将对Native View树的生成过程进行具体说明。
示例性地，在获取待构建页面对应的模板数据之前，上述方法还可以包括：确定预设的模板库中是否存在符合配置要求的UI模版单元；若确定存在，则从模板库中获取符合配置要求的UI模版单元，并基于UI模版单元进行页面配置，得到待构建页面对应的模板数据；若确定不存在，则向管理员发送提醒信息，以使管理员开发符合配置要求的UI模版单元，并基于开发出的UI模版单元进行页面配置，得到待构建页面对应的模板数据。
这里，预设的模板库中可以包括预先开发的多个不同的UI模版单元；需要说明的是，每个UI模版单元都有一个对应的名称，用于对其进行唯一性标识；这里，对于UI模版单元的命名方式不作限定，例如，可以为Template1、Template2等。
示例性地，符合配置要求表示符合待构建页面对应的配置要求；可以先从预设的模板库中获取符合配置要求的UI模版单元，即，与待构建页面对应的UI模版单元；接着，基于获取到的UI模版单元进行页面配置，以得到待构建页面对应的模板数据；其中，与待构建页面对应的UI模版单元的数目可以是一个或者多个。
示例性地，若从模板库中获取不到符合配置要求的UI模版单元，可以向管理员发送提醒信息，使得管理员通过页面模版管理系统开发符合配置要求的UI模版单元，进而，基于开发出的UI模版单元进行页面配置，以得到待构建页面对应的模板数据。
这里，管理员可以是开发相关人员；对于向管理员发送提醒信息的方式不作限定，例如，可以通过文字或语音等方式进行提醒。需要说明的是，在得到开发出的UI模版单元后，可以将其保存在模板库中，便于后续直接使用，减少一定的开发工作量。
示例性地，页面模版管理系统用于将待构建页面与符合配置要求的UI模版单元关联起来，使最终生成的待构建页面具有动态化能力；这里，待构建页面具有动态化能力表示待构建页面中的部分区域可实时动态更新。
示例性地，页面模版管理系统可以包括UI模版单元管理模块和页面配置中心；其中，UI模版单元管理模块负责UI模板单元的开发和管理工作；页面配置中心负责为待构建页面配置对应的UI模版单元，并支持UI模版单元的拖拽和预览等功能。
图2为本申请实施例中的一种开发UI模板单元的结构示意图，如图2所示，cell_type_name表示UI模版单元的名称，html、css则表示开发UI模版单元所需的相关模板数据；cell_type_name、html和css是开发UI模版单元时需要输入的部分，在开发完成后，通过点击保存按钮将开发完成的UI模版单元进行保存；例如，可以保存至模板库中。
图3为本申请实施例中的一种配置UI模板单元的结构示意图，如图3所示，首先选择待构建页面，然后为该页面配置对应的UI模板单元；其中，配置方式可以为：通过展示模板列表中的各个UI模板单元，并将需要的模板单元直接拖拽到页面预览区域进行预览，得到需要的UI模板单元后，点击保存按钮，即，UI模板单元配置完成，此时，基于配置完成的UI模板单元，可以得到待构建页面对应的模板数据。这里，模板列表可以为模板库中支持view模板的各个UI模板单元组成的列表。
可以看出，页面模版管理系统支持UI模板单元的可视化开发，并支持通过拖拽UI模板单元的方式构建待构建页面的一个或者多个动态化区域，实现所见即所得的效果。
在一些实施例中，在得到待构建页面对应的模板数据后，获取待构建页面对应的模板数据，可以包括：通过API接口将模板数据与待构建页面进行关联；接收到针对待构建页面的打开操作时，向API接口发送数据获取请求，以获取待构建页面对应的模板数据。
这里，API接口为待构建页面的相关接口；在得到待构建页面对应的模板数据后，可以通过API接口将模板数据与待构建页面进行关联；这样，在接收到用户针对待构建页面的打开操作时，会向API接口发送数据获取请求，进而获取待构建页面对应的模板数据。示例性地，对于业务数据的获取过程，也可以通过API接口进行获取，此处不再赘述。
步骤102：将业务数据填充至HTML模版中，生成纯HTML文本；对纯HTML文本进行转换，得到Native View树。
示例性地，在得到待构建页面的业务数据后，可以将业务数据填充至待构建页面对应的HTML模版，生成纯HTML文本；这里，纯HTML文本表示仅包括HTML语言编写的文本。其中HTML语言是一种超文本标记语言，它通过标记符号来标记待构建页面中的各个部分。
示例性地，HTML模版本身是一种文本文件，将业务数据填充至HTML模版，相当于对业务数据添加标记符，以告知待构建页面如何显示业务数据；例如文字如何处理、图片如何显示等。
在一些实施例中，在得到纯HTML文本后，对纯HTML文本进行转换，得到NativeView树，可以包括：对纯HTML文本进行解析处理，得到HTML DOM树；根据预设的第一映射关系，将HTML DOM树中的每个节点依次转换成JSON节点；根据转换后的每个JSON节点，生成JSON树；根据预设的第二映射关系，将JSON树中的每个JSON节点依次转换成View节点；根据转换后的每个View节点，生成Native View树。
这里，第一映射关系表征HTML DOM树中的每个HTML标签与JSON节点的映射关系；第二映射关系表征每个JSON节点与View节点的映射关系。
示例性地，对纯HTML文本进行解析处理后，提取纯HTML文本中每个HTML标签的结构和所描述的内容，建立HTML DOM树。这里，每个HTML标签都是HTML DOM树的一个节点，HTML DOM树从根标签开始，可以查找到纯HTML文本内的任意一个HTML标签。
示例性地，HTML标签是HTML语言中最基本的单位，HTML标签是纯HTML文本中重要的组成部分。通常，HTML标签具有如下特点：由尖括号包围的关键词，比如<HTML>；通常是成对出现的，比如<div>和</div>；标签对中的第一个标签是开始标签，第二个标签是结束标签；开始和结束标签也被称为开放标签和闭合标签；也有单独呈现的标签；一般成对出现的标签，其内容在两个标签中间，单独呈现的标签，则在标签属性中赋值。
示例性地，在得到HTML DOM树后，根据预设的每个HTML标签与JSON节点的一一映射关系，即第一映射关系，将HTML DOM树中的每个节点按照层次关系依次转换成JSON节点，得到转换后的每个JSON节点，进而生成生成JSON树。
在一些实施例中，根据转换后的每个JSON节点，生成JSON树，可以包括：对于转换后的每个JSON节点，添加字段信息，生成JSON树；字段信息包括key字段信息、class字段信息以及onclick字段信息。
其中，key字段信息，用于保存与每个JSON节点存在映射关系的各个HTML标签对应的标识信息；后续在生成Native View树时根据key字段信息可实现View节点的检索与复用；这里，标识信息用于对HTML标签进行唯一性表示，该标识信息可以是身份标识(Identity document，ID)等。
示例性地，对于上述标识信息的命名方式不作限定；例如，某个HTML标签对应的标识信息＝父节点的key值+该HTML标签名+_+该HTML标签在父节点的位置+_。这里，key值表示标识信息。
示例性地，class字段信息，用于保存各个HTML标签对应的CSS样式数据；onclick字段信息，用于保存点击各个HTML标签时需要执行的JS代码片段。
本申请实施例中，在对转换后的每个JSON节点，添加上述字段信息后，可以生成JSON树；接着，根据预设的每个JSON节点与View节点的映射关系，即第二映射关系，对JSON树中的每个JSON节点依次转换成View节点，进而根据转换后的每个View节点，生成NativeView树。
示例性地，在生成Native View树的过程中，根据key字段信息，将与每个JSON节点对应的View节点缓存到Map中，然后递归遍历JSON树，对于每个JSON节点根据key字段信息找到View节点对应的class字段信息和onclick字段信息，将将其设置每个View节点的值。
步骤103：根据CSS样式数据，对Native View树进行渲染，生成待构建页面。
在一些实施例中，根据CSS样式数据，对Native View树进行渲染，可以包括：根据class字段信息，获取每个View节点对应的CSS样式数据；根据每个View节点对应的CSS样式数据，对Native View树进行渲染。
示例性地，根据上述描述可知，待构建页面对应的CSS样式数据，在生成JSON树的过程中，已通过添加class字段信息的方式被保存到各个JSON节点中，并在生成NativeView树后，每个View节点对应的class字段信息也被缓存至Map中。
这样，在对生成的Native View树进行渲染时，可以根据Map中缓存的class字段信息，获取Native View树中每个View节点对应的CSS样式数据；进而，将获取到的样式数据应用到Native View树，实现渲染效果；此时，即可得到生成的待构建页面。
示例性地，最终生成的待构建页面可以支持页面区域动态化；页面区域动态化可以包括页面布局动态化和页面交互响应；这里，页面布局动态化表示待构建页面中的部分区域可实时动态更新，页面交互响应表示页面交互响应的实时动态更新。
在一些实施例中，上述方法还可以包括：预先将JS逻辑数据注入到JS执行引擎；接收到针对待构建页面的点击操作时，确定点击操作对应的目标HTML标签；根据onclick字段信息，获取目标HTML标签对应的JS代码片段；将目标HTML标签对应的JS代码片段应用到Native View树的事件处理中，基于JS执行引擎，实现用户与待构建页面的点击交互。
这里，目标HTML标签为JSON树中任一JSON节点对应的HTML标签；根据上述内容可知，每一HTML标签对应的onclick字段信息已缓存至Map中；且onclick字段信息用于保存点击各个HTML标签时需要执行的JS代码片段。
需要说明的是，在移动端App初始化时，会初始化JS执行引擎，定义JS与Native之间的通信协议，通过JSBridge实现JS与Native之间的相互调用。以图片的点击为例，在HTML模版的Img标签转换为Native的ImageView组件时，会将onclick字段信息保存的JS代码片段保存到ImageView组件中，当点击ImageView组件时，再将JS片段传给JS执行引擎，JS执行引擎解析运行后通过JSBridge实现对Native的调用。
示例性地，在生成待构建页面后，若接收到用户针对待构建页面的点击操作，则确定该点击操作对应的页面位置，基于与该页面位置对应的目标HTML标签，可获取到对应的JS代码片段，将该JS代码片段应用到Native View树的事件处理中，并基于JS执行引擎，实现用户与待构建页面的点击交互。
本申请实施例提供一种页面构建方法，该方法包括：获取待构建页面对应的业务数据和模板数据；模板数据包括HTML模版和CSS样式数据；将业务数据填充至HTML模版中，生成纯HTML文本；对纯HTML文本进行转换，得到Native View树；根据CSS样式数据，对Native View树进行渲染，生成待构建页面。可以看出，本申请实施例中，在生成待构建页面时只需要掌握HTML、CSS等前端基础技术即可实现，与相关技术中需要额外集成Weex或者React Native相比，不仅更加轻量化，而且具有学习成本低，容易上手使用的优点。此外，由于在不同的业务场景下，获取到的待构建页面的业务数据存在区别，本申请实施例通过将获取到的待构建页面对应的HTML模版与业务数据相结合，生成纯HTML文本用于后续处理，可实现HTML模版的高度复用。
为了能够更加体现本申请的目的，本申请实施例在上述实施例的基础上，作进一步的说明。
图4为本申请实施例中的另一种页面构建方法的流程示意图，如图4所示，该流程可以包括：
步骤201：获取业务数据和模板数据。
示例性地，当接收到针对待构建页面的打开操作时，即为页面构建开始时刻，此时，会请求待构建页面的的API接口，以获取待构建页面对应的业务数据和模板数据。需要说明的是，在获取模板数据之前，需通过页面模版管理系统开发待构建页面对应的UI模版单元，如果模块库已存在所需的UI模版单元，则直接获取，无需再开发；然后，通过页面模版管理系统配置待构建页面对应的UI模版单元。
步骤202：将JS逻辑数据注入到JS执行引擎。
示例性地，将模板数据中的JS逻辑数据注入到JS执行引擎，供后续生成待构建页面后，点击页面中的View节点时调用实现复杂逻辑的处理。
步骤203：将业务数据填充至基于Mustache模板语言的HTML模版中。
示例性地，将获取到的业务数据填充基于Mustache语法的HTML模版中，生产纯HTML文本。
步骤204：将HTML DOM树转换为JSON树。
示例性地，先根据纯HTML文本得到HTML DOM树，再将HTML DOM树转换为JSON树。
步骤205：将JSON树转换为Native View树。
示例性地，具体过程已在上述实施例进行说明，此处不再赘述。
步骤205：应用CSS样式数据到Native View树。
示例性地，获取Native View树中每个View节点对应的CSS样式数据；进而，将获取到的CSS样式数据应用到Native View树上，实现渲染效果；此时，即可生成待构建页面。之后，若接收到针对待构建页面的点击操作，则确定该点击操作对应的目标HTML标签，可获取到对应的JS代码片段，将该JS代码片段应用到Native View树的事件处理中，并基于JS执行引擎，实现用户与待构建页面的点击交互。
可以看出，本申请实施例可以实现将基于Mustache模板语言的HTML模版转换为中间JSON节点实现Native View树的构建、布局和复用；并通过将HTML模版与业务数据结合，实现HTML模版的全站复用，使用Mustache模板语言还可实现布局展现内容的动态化，使用和前端一致的Flex布局实现双端(Android、IOS)的布局效果；同时，利用JS执行引擎实现对点击事件的复杂逻辑处理。此外，页面模版管理系统实现对App全站UI模版单元进行统一管理和维护，支持UI模版单元的开发和预览、支持拖拽完成页面的动态化模块配置及预览，实现所见即所得的效果。本申请实施例设计简单、不需要学习额外的领域知识就能够快速上手使用，尤其适用于页面区域动态化使用场景。
在本申请的又一实施例中，参见图5，其示出了本申请实施例提供的一种页面构建装置的结构示意图。如图5所示，该装置包括：获取模块301、转换模块302和生成模块303，其中：
获取模块301，用于获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；
转换模块302，用于将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
生成模块303，用于根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
在一些实施例中，所述转换模块302，用于对所述纯HTML文本进行转换，得到Native View树，包括：
对所述纯HTML文本进行解析处理，得到HTML DOM树；
根据预设的第一映射关系，将所述HTML DOM树中的每个节点依次转换成JSON节点；根据转换后的每个JSON节点，生成JSON树；所述所述第一映射关系表征所述HTML DOM树中的每个HTML标签与JSON节点的映射关系；
根据预设的第二映射关系，将所述JSON树中的每个JSON节点依次转换成View节点；根据转换后的每个View节点，生成所述Native View树；所述第二映射关系表征所述每个JSON节点与View节点的映射关系。
在一些实施例中，所述转换模块302，用于根据转换后的每个JSON节点，生成JSON树，包括：
对于所述转换后的每个JSON节点，添加字段信息，生成所述JSON树；所述字段信息包括key字段信息、class字段信息以及onclick字段信息；其中，所述key字段信息，用于保存与所述每个JSON节点存在映射关系的各个HTML标签对应的标识信息；所述class字段信息，用于保存所述各个HTML标签对应的CSS样式数据；所述onclick字段信息，用于保存点击所述各个HTML标签时需要执行的JS代码片段。
在一些实施例中，所述生成模块303，用于根据所述CSS样式数据，对所述NativeView树进行渲染，包括：
根据所述class字段信息，获取所述每个View节点对应的CSS样式数据；
根据所述每个View节点对应的CSS样式数据，对所述Native View树进行渲染。
在一些实施例中，所述模板数据还包括JS逻辑数据，所述还包括交互模块，所述交互模块，用于：预先将所述JS逻辑数据注入到JS执行引擎；
接收到针对所述待构建页面的点击操作时，确定所述点击操作对应的目标HTML标签；
根据所述onclick字段信息，获取所述目标HTML标签对应的JS代码片段；
将所述目标HTML标签对应的JS代码片段应用到所述Native View树的事件处理中，基于所述JS执行引擎，实现所述用户与所述待构建页面的点击交互。
在一些实施例中，所述获取模块301，还用于：
确定预设的模板库中是否存在符合配置要求的UI模版单元；
若确定存在，则从所述模板库中获取所述符合配置要求的UI模版单元，并基于所述UI模版单元进行页面配置，得到所述待构建页面对应的模板数据；
若确定不存在，则向管理员发送提醒信息，以使所述管理员开发所述符合配置要求的UI模版单元，并基于开发出的UI模版单元进行页面配置，得到所述待构建页面对应的模板数据。
在一些实施例中，在得到所述待构建页面对应的模板数据后，所述获取模块301，用于获取所述待构建页面对应的模板数据，包括：
通过API接口将所述模板数据与所述待构建页面进行关联；
接收到针对所述待构建页面的打开操作时，向所述API接口发送数据获取请求，以获取所述待构建页面对应的模板数据。
在实际应用中，上述获取模块301、转换模块302和生成模块303和交互模块均可以由位于电子设备中的处理器实现，该处理器可以为ASIC、DSP、DSPD、PLD、FPGA、CPU、控制器、微控制器、微处理器中的至少一种。
另外，在本实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
集成的单元如果以软件功能模块的形式实现并非作为独立的产品进行销售或使用时，可以存储在一个计算机可读取存储介质中，基于这样的理解，本实施例的技术方案本质上或者说对相关技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)或processor(处理器)执行本实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等多种可以存储程序代码的介质。
具体来讲，本实施例中的一种页面构建方法对应的计算机程序指令可以被存储在光盘、硬盘、U盘等存储介质上，当存储介质中的与一种页面构建方法对应的计算机程序指令被一电子设备读取或被执行时，实现前述实施例的任意一种页面构建方法。
基于前述实施例相同的技术构思，参见图6，其示出了本申请实施例提供的电子设备400，可以包括：存储器401和处理器402；其中，
存储器401，用于存储计算机程序和数据；
处理器402，用于执行存储器中存储的计算机程序，以实现前述实施例的任意一种页面构建方法。
在实际应用中，上述存储器401可以是易失性存储器(volatile memory)，例如RAM；或者非易失性存储器(non-volatile memory)，例如ROM、快闪存储器(flash memory)、硬盘(Hard Disk Drive，HDD)或固态硬盘(Solid-State Drive，SSD)；或者上述种类的存储器的组合，并向处理器402提供指令和数据。
上述处理器402可以为ASIC、DSP、DSPD、PLD、FPGA、CPU、控制器、微控制器、微处理器中的至少一种。可以理解地，对于不同的页面构建系统，用于实现上述处理器功能的电子器件还可以为其它，本申请实施例不作具体限定。
在一些实施例中，本申请实施例提供的装置具有的功能或包含的模块可以用于执行上文方法实施例描述的方法，其具体实现可以参照上文方法实施例的描述，为了简洁，这里不再赘述。
上文对各个实施例的描述倾向于强调各个实施例之间的不同之处，其相同或相似之处可以互相参考，为了简洁，本文不再赘述。
本申请所提供的各方法实施例中所揭露的方法，在不冲突的情况下可以任意组合，得到新的方法实施例。
本申请所提供的各产品实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的产品实施例。
本申请所提供的各方法或设备实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的方法实施例或设备实施例。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其它可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其它可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可装载到计算机或其它可编程数据处理设备上，使得在计算机或其它可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其它可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上，仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。
Claims (10)
1.一种页面构建方法，其特征在于，所述方法包括：
获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；
将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
2.根据权利要求1所述的方法，其特征在于，所述对所述纯HTML文本进行转换，得到Native View树，包括：
对所述纯HTML文本进行解析处理，得到HTML DOM树；
根据预设的第一映射关系，将所述HTML DOM树中的每个节点依次转换成JSON节点；根据转换后的每个JSON节点，生成JSON树；所述所述第一映射关系表征所述HTML DOM树中的每个HTML标签与JSON节点的映射关系；
根据预设的第二映射关系，将所述JSON树中的每个JSON节点依次转换成View节点；根据转换后的每个View节点，生成所述Native View树；所述第二映射关系表征所述每个JSON节点与View节点的映射关系。
3.根据权利要求2所述的方法，其特征在于，所述根据转换后的每个JSON节点，生成JSON树，包括：
对于所述转换后的每个JSON节点，添加字段信息，生成所述JSON树；所述字段信息包括key字段信息、class字段信息以及onclick字段信息；其中，所述key字段信息，用于保存与所述每个JSON节点存在映射关系的各个HTML标签对应的标识信息；所述class字段信息，用于保存所述各个HTML标签对应的CSS样式数据；所述onclick字段信息，用于保存点击所述各个HTML标签时需要执行的JS代码片段。
4.根据权利要求3所述的方法，其特征在于，所述根据所述CSS样式数据，对所述NativeView树进行渲染，包括：
根据所述class字段信息，获取所述每个View节点对应的CSS样式数据；
根据所述每个View节点对应的CSS样式数据，对所述Native View树进行渲染。
5.根据权利要求3所述的方法，其特征在于，所述模板数据还包括JS逻辑数据，所述方法还包括：预先将所述JS逻辑数据注入到JS执行引擎；
接收到针对所述待构建页面的点击操作时，确定所述点击操作对应的目标HTML标签；
根据所述onclick字段信息，获取所述目标HTML标签对应的JS代码片段；
将所述目标HTML标签对应的JS代码片段应用到所述Native View树的事件处理中，基于所述JS执行引擎，实现所述用户与所述待构建页面的点击交互。
6.根据权利要求1所述的方法，其特征在于，所述方法还包括：
确定预设的模板库中是否存在符合配置要求的UI模版单元；
若确定存在，则从所述模板库中获取所述符合配置要求的UI模版单元，并基于所述UI模版单元进行页面配置，得到所述待构建页面对应的模板数据；
若确定不存在，则向管理员发送提醒信息，以使所述管理员开发所述符合配置要求的UI模版单元，并基于开发出的UI模版单元进行页面配置，得到所述待构建页面对应的模板数据。
7.根据权利要求6所述的方法，其特征在于，在得到所述待构建页面对应的模板数据后，获取所述待构建页面对应的模板数据，包括：
通过API接口将所述模板数据与所述待构建页面进行关联；
接收到针对所述待构建页面的打开操作时，向所述API接口发送数据获取请求，以获取所述待构建页面对应的模板数据。
8.一种页面构建装置，其特征在于，所述装置包括：
获取模块，用于获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；
转换模块，用于将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
生成模块，用于根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
9.一种电子设备，其特征在于，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至7任一项所述的方法。
10.一种计算机存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至7任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211396080.8A CN116910399A (zh) | 2022-11-08 | 2022-11-08 | 页面构建方法、装置、电子设备和计算机存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211396080.8A CN116910399A (zh) | 2022-11-08 | 2022-11-08 | 页面构建方法、装置、电子设备和计算机存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116910399A true CN116910399A (zh) | 2023-10-20 |
Family
ID=88363438
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211396080.8A Pending CN116910399A (zh) | 2022-11-08 | 2022-11-08 | 页面构建方法、装置、电子设备和计算机存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116910399A (zh) |
-
2022
- 2022-11-08 CN CN202211396080.8A patent/CN116910399A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8549471B2 (en) | Method and apparatus for providing API service and making API mash-up, and computer readable recording medium thereof | |
| US20160124914A1 (en) | Page Processing for Mobile App | |
| CN111079047B (zh) | 一种面向web的页面构建系统 | |
| US9189210B2 (en) | Using source code generated from a data model file to generate a graphical user interface from objects in a database | |
| US20160306784A1 (en) | Audio Onboarding Of Digital Content With Enhanced Audio Communications | |
| CN106897251B (zh) | 富文本展示方法及装置 | |
| US7451393B1 (en) | System and method for a page rendering framework | |
| TW201707416A (zh) | 針對伺服器的遠程操作系統、方法及裝置 | |
| US20240160410A1 (en) | Application Development Platform, Micro-program Generation Method, and Device and Storage Medium | |
| CN103530338A (zh) | 在计算设备上进行页面渲染的框架及生成页面的方法 | |
| CN111880813B (zh) | 实现安卓卡片ui的方法、存储介质 | |
| US9959193B2 (en) | Increasing accuracy of traceability links and structured data | |
| CN113419711A (zh) | 页面引导方法、装置、电子设备及存储介质 | |
| KR20090000199A (ko) | 웹 서버 어플리케이션 프레임워크와 상기 프레임워크를이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는컴퓨터로 읽을 수 있는 기록 매체 | |
| CN102193789A (zh) | 一种实现可配置跳转链接的方法和设备 | |
| CN109101429A (zh) | 一种机顶盒的浏览器页面调试的方法及装置 | |
| CN116910399A (zh) | 页面构建方法、装置、电子设备和计算机存储介质 | |
| CN112783495B (zh) | 页面事件的管理方法、装置、介质以及电子设备 | |
| CN113296759A (zh) | 用户界面处理方法、用户界面处理系统、设备及存储介质 | |
| CN107220045B (zh) | 基于人工智能的建站方法、装置、设备及存储介质 | |
| CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
| CN103092575A (zh) | 生成小工具应用的方法和系统 | |
| US20240095448A1 (en) | Automatic guidance to interactive entity matching natural language input | |
| CN113986219A (zh) | 页面图片获取方法及装置、存储介质、电子设备 | |
| CN115168772A (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 |