页面构建方法、装置、电子设备和计算机存储介质制造方法及图纸

本申请提供一种页面构建方法、装置、电子设备和计算机存储介质，该方法包括：获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。生成所述待构建页面。生成所述待构建页面。

【技术实现步骤摘要】
页面构建方法、装置、电子设备和计算机存储介质


[0001]本申请涉及终端
，尤其涉及一种页面构建方法、装置、电子设备和计算机存储介质。

技术介绍

[0002]应用程序(Application，App)开发是一个复杂的工程，开发者往往需要同时基于Andorid和IOS两个平台进行开发，导致开发成本增加，于是App跨平台开发成为一种趋势。
[0003]相关技术中，通常采用泛Web容器方案，该方案通过集成Weex或者React Native保证开发体验，实现整个完整页面级别的动态化；由于是重量级动态化解决方案，导致学习成本比较高，遇到问题排查也比较困难，使用后App整体体积也增加很多。

技术实现思路

[0004]本申请提供一种页面构建方法、装置、电子设备和计算机存储介质。
[0005]本申请的技术方案是这样实现的：
[0006]本申请提供了一种页面构建方法，所述方法包括：
[0007]获取待构建页面对应的业务数据和模板数据；所述模板数据包括超文本标记语言(Hyper Text Markup Language，HTML)模版和层叠样式表(Cascading Style Sheets，CSS)样式数据；
[0008]将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
[0009]根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
[0010]在一些实施例中，所述对所述纯HTML文本进行转换，得到Native View树，包括：
[0011]对所述纯HTML文本进行解析处理，得到HTML DOM树；
[0012]根据预设的第一映射关系，将所述HTML DOM树中的每个节点依次转换成JS对象简谱(JavaScript Object Notation，JSON)节点；根据转换后的每个JSON节点，生成JSON树；所述所述第一映射关系表征所述HTML DOM树中的每个HTML标签与JSON节点的映射关系；
[0013]根据预设的第二映射关系，将所述JSON树中的每个JSON节点依次转换成View节点；根据转换后的每个View节点，生成所述Native View树；所述第二映射关系表征所述每个JSON节点与View节点的映射关系。
[0014]在一些实施例中，所述根据转换后的每个JSON节点，生成JSON树，包括：
[0015]对于所述转换后的每个JSON节点，添加字段信息，生成所述JSON树；所述字段信息包括key字段信息、class字段信息以及onclick字段信息；其中，所述key字段信息，用于保存与所述每个JSON节点存在映射关系的各个HTML标签对应的标识信息；所述class字段信息，用于保存所述各个HTML标签对应的CSS样式数据；所述onclick字段信息，用于保存点击所述各个HTML标签时需要执行的JS代码片段。
[0016]在一些实施例中，所述根据所述CSS样式数据，对所述Native View树进行渲染，包
括：
[0017]根据所述class字段信息，获取所述每个View节点对应的CSS样式数据；
[0018]根据所述每个View节点对应的CSS样式数据，对所述Native View树进行渲染。
[0019]在一些实施例中，所述模板数据还包括JS逻辑数据，所述方法还包括：预先将所述JS逻辑数据注入到JS执行引擎；
[0020]接收到针对所述待构建页面的点击操作时，确定所述点击操作对应的目标HTML标签；
[0021]根据所述onclick字段信息，获取所述目标HTML标签对应的JS代码片段；
[0022]将所述目标HTML标签对应的JS代码片段应用到所述Native View树的事件处理中，基于所述JS执行引擎，实现所述用户与所述待构建页面的点击交互。
[0023]在一些实施例中，所述方法还包括：
[0024]确定预设的模板库中是否存在符合配置要求的用户界面(UserInterface，UI)模版单元；
[0025]若确定存在，则从所述模板库中获取所述符合配置要求的UI模版单元，并基于所述UI模版单元进行页面配置，得到所述待构建页面对应的模板数据；
[0026]若确定不存在，则向管理员发送提醒信息，以使所述管理员开发所述符合配置要求的UI模版单元，并基于开发出的UI模版单元进行页面配置，得到所述待构建页面对应的模板数据。
[0027]在一些实施例中，在得到所述待构建页面对应的模板数据后，获取所述待构建页面对应的模板数据，包括：
[0028]通过应用程序编程接口(Application Programming Interface，API)将所述模板数据与所述待构建页面进行关联；
[0029]接收到针对所述待构建页面的打开操作时，向所述API接口发送数据获取请求，以获取所述待构建页面对应的模板数据。
[0030]本申请提供一种页面构建装置，所述装置包括获取模块、转换模块和生成模块，其中，
[0031]获取模块，用于获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式数据；
[0032]转换模块，用于将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；
[0033]生成模块，用于根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。
[0034]本申请提供一种电子设备，所述设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现前述一个或多个技术方案提供的页面构建方法。
[0035]本申请提供一种计算机存储介质，所述计算机存储介质存储有计算机程序；所述计算机程序被执行后能够实现前述一个或多个技术方案提供的页面构建方法。
[0036]本申请实施例提供一种页面构建方法、装置、电子设备和计算机存储介质，该方法包括：获取待构建页面对应的业务数据和模板数据；所述模板数据包括HTML模版和CSS样式
数据；将所述业务数据填充至所述HTML模版中，生成纯HTML文本；对所述纯HTML文本进行转换，得到Native View树；根据所述CSS样式数据，对所述Native View树进行渲染，生成所述待构建页面。可以看出，本申请实施例中，在生成待构建页面时只需要掌握HTML、CSS等前端基础技术即可实现，与相关技术中需要额外集成Weex或者React Native相比，不仅更加轻量化，而且具有学习成本低，容易上手使用的优点。此外，由于在不同的业务场景下，获取到的待构建页面的业务数据存在区别，本申请实施例通过将获取到的待构建页面对应的HTML模版与业务数据相结合，生成纯HTML文本用于后续处理，可实现HTML本文档来自技高网...

【技术保护点】

【技术特征摘要】
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样式数据，对所述Native View树进行渲染，包括：根据所述class字段信息，获取所述每个View节点对应的CSS样式数据；根据所述每个View节点对应的CSS样式数据，对所述Native View树进行渲染。5.根据权利要求3所述的方法，其特征在于，所述...

【专利技术属性】
技术研发人员：邵慧华，陈维，程剑，
申请(专利权)人：中国移动通信集团有限公司，
类型：发明
国别省市：