CN112417338B - 一种页面适配方法、系统及设备 - Google Patents

一种页面适配方法、系统及设备 Download PDF

Info

Publication number
CN112417338B
CN112417338B CN202011378787.7A CN202011378787A CN112417338B CN 112417338 B CN112417338 B CN 112417338B CN 202011378787 A CN202011378787 A CN 202011378787A CN 112417338 B CN112417338 B CN 112417338B
Authority
CN
China
Prior art keywords
content
page
abstract syntax
syntax tree
new
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.)
Active
Application number
CN202011378787.7A
Other languages
English (en)
Other versions
CN112417338A (zh
Inventor
游峰磊
王泽浩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Borui Tongyun Technology Co ltd
Original Assignee
Beijing Borui Tongyun Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Borui Tongyun Technology Co ltd filed Critical Beijing Borui Tongyun Technology Co ltd
Priority to CN202011378787.7A priority Critical patent/CN112417338B/zh
Publication of CN112417338A publication Critical patent/CN112417338A/zh
Application granted granted Critical
Publication of CN112417338B publication Critical patent/CN112417338B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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/957—Browsing optimisation, e.g. caching or content distillation
    • 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
    • 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
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N20/00—Machine learning

Abstract

本发明涉及一种页面适配方法、系统及设备，方法包括：获取原始页面内容；将所述原始页面内容解析成AST抽象语法树；根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容；此方法可以对使用不同框架的原始页面内容进行适配或者适配到预设的前端框架以便于后续再开发。

Description

一种页面适配方法、系统及设备
技术领域
本发明涉及前端页面生成适配领域，尤其涉及一种页面适配方法、系统及设备。
背景技术
当前互联网行业的兴盛使得用户使用和访问WEB网页频率越来越高，这让页面开发的需求大量增加，页而面需要增加的业务越来越多，页面的开发也开始从单一团队开发，逐渐变成多个团队共同开发，甚至也会有外包团队的加入，由于实际过程中不可能完全限制每个团队的前端技术或前端框架，但是不同框架之间会产生适配问题，并且有时候会造成非常简单的页面用复杂框架，从而产生浪费、效果不佳的情况。
并且，在三网融合的背景下，使用手机和电视终端访问互联网信息将成为发展趋势。同时随着智能手机使用越来越广泛，手机终端访问WEB信息也越来越方便。但由于互联网上绝大多数网页都是专门为PC终端设计，其它终端访问WEB站点存在着适配转换的问题。
发明内容
本发明所要解决的技术问题是针对现有技术的不足提供一种页面适配方法、系统及设备。
本发明解决上述技术问题的技术方案如下：一种页面适配方法，其特征在于，包括：
获取原始页面内容；
将所述原始页面内容解析成AST抽象语法树；
根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容。
本发明的有益效果是，通过将原始内容解析成AST抽象语法树，再根据预设框架内容对AST抽象语法树进行适配转换，从而实现对使用不同框架的原始页面内容进行适配或者适配到预设的前端框架以便于后续再开发。
进一步，在上述技术方案中，所述原始页面内容包括原始页面表现形式、原始页面业务逻辑和原始页面固定路由。
采用上述进一步方案的有益效果是，通过页面表现形式可解析出原始页面的CSS级联样式表(Cascading Style Sheets)的样式和HTML超文本标记语言(HyperText MarkupLanguage)的文本标记，再加上原始页面业务逻辑和固定路由可以使得AST抽象语法树更加详尽完善。
进一步，所述将原始页面内容解析成AST抽象语法树的过程包括：
根据原始页面内容解析原始页面BOM(Browser object model)游览器对象模型、原始页面DOM(Document Object Model)文档对象模型和原始页面业务逻辑；
根据原始页面内容构建DOM树；
根据原始页面内容构建CSS规则树；
根据所述DOM树、CSS规则树、原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑生成AST抽象语法树。
采用上述进一步方案的有益效果是，通过构建DOM树，CSS规则树，原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑可以更方便直观地构建AST抽象语法树，提高解析构建AST抽象语法树的效率。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步，所述页面适配方法还包括：根据浏览器参数和终端参数，对所述AST抽象语法树中各项内容分别进行适配转换。
采用上述进一步方案的有益效果是，通过选择浏览器，获取浏览器参数，根据其参数对AST抽象语法树修改，可以解决原始页面对不同浏览器如ie浏览器和谷歌浏览器的兼容问题，进一步完成页面对浏览器的适配；通过选择终端，获取终端参数，根据其参数对AST抽象语法树修改，可以解决原始页面对不同终端如PC和手机移动终端的兼容问题，进一步完成对终端的适配。
进一步，所述页面适配方法还包括：
将所述新页面内容写入预设链接对应的链接地址；
根据所述终端参数选择终端仿真机型；
在终端仿真机型中通过浏览器加载所述链接地址中的所述新页面内容，检测相应的页面适配效果和新增业务逻辑是否正常；
若正常，将所述新页面内容封装成网页；
若异常，根据预设前端框架内容和所述终端参数对所述新AST抽象语法树中异常部分重新进行适配转换。
采用上述进一步方案的有益效果是，在完成适配后通过检查测试适配效果，避免适配出现异常的同时也检测新增的业务逻辑，查看新增业务逻辑是否达到要求，并最终完成对页面内容的封装。
进一步，所述页面适配方法中，所述原始页面内容根据REMAUI、Pix2code模型和网页原型设计图，通过训练神经网络自动生成。
采用上述进一步方案的有益效果是，通过REMAUI、Pix2code模型，直接根据网页原型设计图，自动产生网页原始内容，直接生成使用预设前端框架内容的页面，极大提高了页面开发的效率。
进一步，所述页面适配方法中，所述根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容包括：
对所述AST抽象语法树中各项内容按照预设前端框架内容进行分类；
根据预设前端框架内容和分类结果，在AST抽象语法树中添加新节点和内容。
采用上述进一步方案的有益效果是，通过对所述AST抽象语法树中各项内容按照预设前端框架内容进行分类，可以更高效的根据预设的前端框架内容去调整AST抽象语法树。
优选地，采用了机器学习方法得到的分类器将所述AST抽象语法树中的各项内容按照预设前端框架内容进行分类。
采用上述进一步方案的有益效果是，通过采用机器学习的方法得到的分类器可以不断的优化分类过程得到更好的分类结果，且免除了人工分类操作，提高了分类效率和分类结果精确度。
为了解决上述技术问题，本发明还提供一种页面适配系统，其特征在于，包括采集单元、解析单元、适配单元和业务逻辑添加单元；
所述采集单元，用于获取原始页面内容；
所述解析单元，用于将原始页面内容解析成AST抽象语法树；
所述适配单元，用于根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
所述业务逻辑添加单元，用于根据新增业务逻辑内容，在AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容。
为了解决上述技术问题，本发明还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至8任一项所述的一种页面适配方法的步骤。
附图说明
图1为本发明实施例提供的一种页面适配方法的流程示意图；
图2为本发明实施例提供的一种页面适配系统的模块图。
图3为本发明实施例提供的另一种页面适配系统的模块图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
实施例一
如图1所示，图1为本发明实施例提供的一种页面适配方法的流程图，该页面适配方法包括：
获取原始页面内容；
将所述原始页面内容解析成AST抽象语法树；
根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容。
在本实施例中，预设前端框架内容可以为Vue、React、Preact和jQuery等前端框架库内容，通过将原始页面内容解析成AST抽象语法树的方式，可在有多个团队或个人开发的原始页面内容的情况下，对其使用的不同框架进行适配；也可以在有同一框架的原始页面内容的情况下，对其进行框架转换，将其适配到预设的前端框架以便于后续再开发。
在本实施例中，所述原始页面内容包括原始页面表现形式、原始页面业务逻辑和原始页面固定路由。
其中，通过页面表现形式可解析出原始页面的CSS样式和HTML文本标记，这是构成新页面的基础，也是框架中不可或缺的主体，原始页面业务逻辑是原始页面实现与用户交互行为的核心，固定路由是页面静态资源的地址，获取上述内容可以使得AST抽象语法树更加详尽完善。
在本实施例中，所述将原始页面内容解析成AST抽象语法树的过程包括：根据原始页面内容解析原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑；根据原始页面内容构建DOM树；根据原始页面内容构建CSS规则树；根据所述DOM树、CSS规则树、原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑生成AST抽象语法树。
其中，通过构建DOM树，CSS规则树，原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑可以更方便直观的构建AST抽象语法树，提高解析构建AST抽象语法树的效率。
在本实施例中，还包括根据浏览器参数和终端参数，对所述AST抽象语法树中各项内容分别进行适配转换。
其中，终端参数可以包括：终端产品型号、屏幕尺寸、屏幕分辨率、颜色质量、终端存储能力和处理器参数等，获取预设终端参数具体步骤为：终端向代理服务器发起包括目的URL统一资源定位网址(Uniform Resource Locator)以及产品相关参数的请求；代理服务器获取用户的请求后解析出请求的URL和终端设备的产品型号，并从保存终端参数的文档库或数据库中查找相应的文档，解析该文档获得终端设备相关参数信息；获取终端参数的具体步骤还可以是：终端通过硬件检测软件获取终端设备的相关信息，直接获得终端参数。浏览器参数容易从网络中获取不再赘述。
根据浏览器参数，解决原始页面对不同浏览器如ie浏览器和谷歌浏览器的兼容问题，进一步完成页面对浏览器的适配转换包括以下内容：修改AST抽象语法树内容实现：根据浏览器参数调整标签的高度、宽度和样式等；设置通配符将各个标签的内外补丁设置为0；采用div+css布局，例如将横向布局时使用的margin标签转换为div float标签；使用float属性为图片布局。
根据终端参数，能够实现原始页面对不同终端设备的适配，其过程为：根据终端参数，修改AST抽象语法树内容实现：若根据终端屏幕尺寸等参数会使页面出现中文本堆积的情况，将首句或关键词作为超文本链接显示在网页中，链接通过列表的形式给出，其它内容只在用户点击的情况下才返回到终端，图片采用默认压缩显示缩略图或者标记链接，语音和视频则是通过对应标题作为文本链接给出，对源页面内容结构比较复杂时，根据前后顺序的list标签、段落或者表格等进行逻辑分割，在此基础上再采用首句链接方法将超文本指向具体的分割区域内容。
在本实施例中，还包括：将所述新页面内容写入预设链接对应的链接地址；根据所述终端参数选择终端仿真机型；在终端仿真机型中通过预设浏览器加载所述链接地址中的所述新页面内容，检测相应的页面适配效果和新增业务逻辑是否正常；若正常，将所述新页面内容封装成网页；若异常，根据预设前端框架内容和所述终端参数对所述新AST抽象语法树中异常部分重新进行适配转换。
其中，预设链接可以是预先设置的可点击的超链接地址符号或按钮，例如d：//test000/documents/等。该预设链接可以指向本地磁盘、内存或局域网中的文件或存储单元；终端仿真机型为根据所述终端参数确定的终端机型的仿真模型；可以理解的是，若页面对终端仿真机型和预设前端框架内容适配良好，则页面大小与终端仿真机型的屏幕大小匹配，页面内容可以清楚、完整地显示，能正常实现与用户交互；若页面对终端仿真机型适配不好，则页面内容无法清楚、完整的显示，无法正常实现与用户交互；因此可以根据页面在终端仿真机型中的显示效果确定待测试页面对目标机型的适配效果。
在本实施例中，所述原始页面内容可以根据REMAUI、Pix2code模型和网页原型设计图，通过训练神经网络自动生成。
其中，所述原型设计图为UI(user interface，即用户界面)设计师使用绘图软件绘制的GUI(Graphical User Interface)用户图形界面设计图，REMAUI、Pix2code模型是基于深度学习的HTML代码自动生成模型，在此Pix2code模型基础上，还可以对其CNN(Convolutional Neural Networks)卷积神经网络结构进行调整使之能够更好的保留前端组件的位置、颜色等能够信息，并可以使用词向量代替独热向量编码进行训练。
在本实施例中，根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容包括：对所述AST抽象语法树中各项内容按照预设前端框架内容进行分类；根据预设前端框架内容和分类结果，在AST抽象语法树中添加新节点和内容。
其中，所述分类既可以是根据前端框架内容从而根据相关标签、样式、对应新增业务逻辑DOM API(Application Programming Interface，即数据管理应用程序编程接口)等分类，也可以是对根据前端框架内容，从而根据相关框架元素来分类。
另外，上述分类可以采用机器学习方法得到的分类器，可以免除了人工分类操作，并能根据实际情况不断的优化分类过程得到更好的分类结果，提高了分类效率和分类结果精确度。
实施例二
为了便于理解，本实施例通过模块图对所述的页面适配系统进行说明。如图2、图3所示，在本实施例中，该页面适配系统包括采集单元、解析单元、适配单元和业务逻辑添加单元；
所述采集单元，用于获取原始页面内容；
所述解析单元，用于将原始页面内容解析成AST抽象语法树；
所述适配单元，用于根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
所述业务逻辑添加单元，用于根据新增业务逻辑内容，在AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容。
获取终端参数的具体步骤为：终端向代理服务器发起包括目的URL以及产品相关参数的请求；代理服务器获取用户的请求后解析出请求的URL和终端设备的产品型号，并从保存终端参数的文档库或数据库中查找相应的文档，解析该文档获得终端设备相关参数信息。
获取终端参数的具体步骤还可以是：终端通过硬件检测软件获取终端设备的相关信息，直接获得终端参数。所述终端参数包括：终端产品型号、屏幕尺寸、屏幕分辨率、颜色质量、终端存储能力和处理器参数等。
另外，预设前端框架内容为Vue、React、Preact和jQuery等前端框架库内容，通过将原始页面内容解析成AST抽象语法树的方式，可在有多个团队或个人开发的原始页面内容的情况下，对其使用的不同框架进行适配；也可以在有同一框架的原始页面内容的情况下，对其进行框架转换，将其适配到预设的前端框架以便于后续再开发。
在本实施例中，采集单元获取的原始页面内容包括原始页面表现形式、原始页面业务逻辑和原始页面固定路由，通过页面表现形式可解析出原始页面的CSS样式和HTML文本标记，这是构成新页面的基础，也是框架中不可或缺的主体，原始页面业务逻辑是原始页面实现与用户交互行为的核心，固定路由是页面静态资源的地址，获取上述内容可以使得AST抽象语法树更加详尽完善。
在本实施例中，解析单元将原始页面内容解析成AST抽象语法树的过程包括：根据原始页面内容解析原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑；根据原始页面内容构建DOM树；根据原始页面内容构建CSS规则树；根据所述DOM树、CSS规则树、原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑生成AST抽象语法树。
其中，通过构建DOM树，CSS规则树，原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑可以更方便直观的构建AST抽象语法树，提高解析构建AST抽象语法树的效率。
在本实施例中，适配单元还用于根据浏览器参数和终端参数，对所述AST抽象语法树中各项内容分别进行适配转换。
其中，终端参数可以包括：终端产品型号、屏幕尺寸、屏幕分辨率、颜色质量、终端存储能力和处理器参数等，获取终端参数具体步骤为：终端向代理服务器发起包括目的URL以及产品相关参数的请求；代理服务器获取用户的请求后解析出请求的URL和终端设备的产品型号，并从保存终端参数的文档库或数据库中查找相应的文档，解析该文档获得终端设备相关参数信息。获取终端参数的具体步骤还可以是：终端通过硬件检测软件获取终端设备的相关信息，直接获得终端参数；获取浏览器参数的方法容易得到不再赘述。
解决原始页面对不同浏览器如ie浏览器和谷歌浏览器的兼容问题，进一步完成页面对浏览器的适配转换包括以下内容：修改AST抽象语法树内容实现：根据浏览器参数调整标签的高度、宽度和样式等；设置通配符将各个标签的内外补丁设置为0；采用div+css布局如：将横向布局时使用的margin标签转换为div float标签；使用float属性为图片布局；
根据终端参数，能够实现原始页面对不同终端设备的适配，其过程为：根据终端参数，修改AST抽象语法树内容实现：若根据终端屏幕尺寸等参数会使页面出现中文本堆积的情况，将首句或关键词作为超文本链接显示在网页中，链接通过列表的形式给出，其它内容只在用户点击的情况下才返回到终端，图片采用默认压缩显示缩略图或者标记链接，语音和视频则是通过对应标题作为文本链接给出，对源页面内容结构比较复杂时，根据前后顺序的list标签、段落或者表格等进行逻辑分割，在此基础上再采用首句链接方法将超文本指向具体的分割区域内容。
在本实施例中，还包括测试单元，所述测试单元用于将所述新页面内容写入预设链接对应的链接地址；根据所述终端参数选择终端仿真机型；在终端仿真机型中通过预设浏览器加载所述链接地址中的所述新页面内容，检测相应的页面适配效果和新增业务逻辑是否正常；若正常，将所述新页面内容封装成网页；若异常，根据预设前端框架内容和所述终端参数对所述新AST抽象语法树中异常部分重新进行适配转换。
其中，预设链接可以是预先设置的可点击的超链接地址符号或按钮，例如d：//test000/documents/等。该预设链接可以指向本地磁盘、内存或局域网中的文件或存储单元；终端仿真机型为根据所述终端参数确定的终端机型的仿真模型；可以理解的是，若页面对终端仿真机型和预设前端框架内容适配良好，则页面大小与终端仿真机型的屏幕大小匹配，页面内容可以清楚、完整地显示，能正常实现与用户交互；若页面对终端仿真机型适配不好，则页面内容无法清楚、完整的显示，无法正常实现与用户交互；因此可以根据页面在终端仿真机型中的显示效果确定待测试页面对目标机型的适配效果。
在本实施例中，所述采集单元获取的原始页面内容可以根据REMAUI、Pix2code模型和网页原型设计图，通过训练神经网络自动生成。
其中，所述原型设计图为UI设计师使用绘图软件绘制的GUI设计图，REMAUI、Pix2code模型是基于深度学习的HTML代码自动生成模型，在此Pix2code模型基础上，还可以对其CNN网络结构进行调整使之能够更好的保留前端组件的位置、颜色等能够信息，并可以使用词向量代替独热向量编码进行训练。
在本实施例中，所述业务逻辑单元还包括分类单元，根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容包括：对所述AST抽象语法树中各项内容按照预设前端框架内容进行分类；根据预设前端框架内容和分类结果，在AST抽象语法树中添加新节点和内容。
其中，所述分类既可以是根据前端框架内容从而根据相关标签、样式、对应新增业务逻辑DOM API等分类，也可以是对根据前端框架内容，从而根据相关框架元素来分类。
另外，上述分类单元可以采用机器学习方法得到的分类器，从而免除了人工分类操作，并能根据实际情况不断的优化分类过程得到更好的分类结果，提高了分类效率和分类结果精确度。
本实施例还提供一种电子设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如上各实施例中的页面适配方法的步骤，在此不再一一赘述。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种页面适配方法，其特征在于，包括：
获取原始页面内容；
将所述原始页面内容解析成AST抽象语法树；
根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容；
还包括：
根据浏览器参数和终端参数，对所述AST抽象语法树中各项内容分别进行适配转换；
还包括：
将所述新页面内容写入预设链接对应的链接地址；
根据所述终端参数选择终端仿真机型；
在终端仿真机型中通过浏览器加载所述链接地址中的所述新页面内容，检测相应的页面适配效果和新增业务逻辑是否正常；
若正常，将所述新页面内容封装成网页；
若异常，根据所述预设前端框架内容、所述终端参数和所述浏览器参数对所述新AST抽象语法树中异常部分重新进行适配转换。
2.如权利要求1所述的页面适配方法，其特征在于，所述原始页面内容包括原始页面表现形式、原始页面业务逻辑和原始页面固定路由。
3.如权利要求1所述的页面适配方法，其特征在于，所述将原始页面内容解析成AST抽象语法树的过程包括：
根据原始页面内容解析原始页面游览器对象模型BOM、原始页面文档对象模型DOM和原始页面业务逻辑；
根据原始页面内容构建DOM树和CSS规则树；
根据所述DOM树、CSS规则树、原始页面BOM游览器对象模型、原始页面DOM文档对象模型和原始页面业务逻辑生成AST抽象语法树。
4.如权利要求1-3任一所述的页面适配方法，其特征在于，所述原始页面内容根据REMAUI、Pix2code模型和网页原型设计图，通过训练神经网络自动生成。
5.根据权利要求1-3任一所述的页面适配方法，其特征在于，所述根据新增业务逻辑内容，在所述AST抽象语法树中添加新节点和内容包括：
对所述AST抽象语法树中各项内容按照预设前端框架内容进行分类；
根据预设前端框架内容和分类结果，在AST抽象语法树中添加新节点和内容。
6.根据权利要求5所述的页面适配方法，其特征在于，
所述分类采用了机器学习方法得到的分类器，通过所述分类器将所述AST抽象语法树中的各项内容按照预设前端框架内容进行分类。
7.一种页面适配系统，其特征在于，包括采集单元、解析单元、适配单元和业务逻辑添加单元；
所述采集单元，用于获取原始页面内容；
所述解析单元，用于将原始页面内容解析成AST抽象语法树；
所述适配单元，用于根据预设前端框架内容对所述AST抽象语法树中各项内容分别进行适配转换；
所述业务逻辑添加单元，用于根据新增业务逻辑内容，在AST抽象语法树中添加新节点和内容，生成新AST抽象语法树，根据新AST抽象语法树的内容生成新页面内容；
所述适配单元还用于根据浏览器参数和终端参数，对所述AST抽象语法树中各项内容分别进行适配转换；
还包括：测试单元，所述测试单元用于将所述新页面内容写入预设链接对应的链接地址；根据所述终端参数选择终端仿真机型；在终端仿真机型中通过预设浏览器加载所述链接地址中的所述新页面内容，检测相应的页面适配效果和新增业务逻辑是否正常；若正常，将所述新页面内容封装成网页；若异常，根据预设前端框架内容和所述终端参数对所述新AST抽象语法树中异常部分重新进行适配转换。
8.一种电子设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述的一种页面适配方法的步骤。
CN202011378787.7A 2020-11-30 2020-11-30 一种页面适配方法、系统及设备 Active CN112417338B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011378787.7A CN112417338B (zh) 2020-11-30 2020-11-30 一种页面适配方法、系统及设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011378787.7A CN112417338B (zh) 2020-11-30 2020-11-30 一种页面适配方法、系统及设备

Publications (2)

Publication Number Publication Date
CN112417338A CN112417338A (zh) 2021-02-26
CN112417338B true CN112417338B (zh) 2022-12-20

Family

ID=74828931

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011378787.7A Active CN112417338B (zh) 2020-11-30 2020-11-30 一种页面适配方法、系统及设备

Country Status (1)

Country Link
CN (1) CN112417338B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113553064B (zh) * 2021-07-07 2023-07-14 北京计算机技术及应用研究所 一种web前端代码转换方法
CN113741900B (zh) * 2021-08-31 2024-03-19 广州数励科技有限公司 一种前端页面应用的开发方法、装置及相关设备
CN113986442A (zh) * 2021-11-05 2022-01-28 北京达佳互联信息技术有限公司 页面显示方法、装置、电子设备及计算机可读存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100153933A1 (en) * 2008-12-17 2010-06-17 Karsten Bohlmann Path Navigation In Abstract Syntax Trees
CN102654885A (zh) * 2012-04-28 2012-09-05 北京华胜天成科技股份有限公司 移动终端网页适配系统和方法
CN102693237A (zh) * 2011-03-24 2012-09-26 中国科学院声学研究所 一种网页内容适配封装系统及方法
CN110780853A (zh) * 2019-09-28 2020-02-11 同程网络科技股份有限公司 前端框架及开发方法、存储介质、电子设备
CN111190594A (zh) * 2019-12-23 2020-05-22 北京健康之家科技有限公司 Vue组件的文档生成方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7793220B1 (en) * 2000-08-29 2010-09-07 Citrix Systems, Inc. Scalable derivative services
CN104820604B (zh) * 2015-05-27 2018-08-31 百富计算机技术（深圳）有限公司 一种应用于pos终端的浏览器
CN110688300A (zh) * 2019-08-13 2020-01-14 平安科技（深圳）有限公司 兼容性测试方法、装置、设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100153933A1 (en) * 2008-12-17 2010-06-17 Karsten Bohlmann Path Navigation In Abstract Syntax Trees
CN102693237A (zh) * 2011-03-24 2012-09-26 中国科学院声学研究所 一种网页内容适配封装系统及方法
CN102654885A (zh) * 2012-04-28 2012-09-05 北京华胜天成科技股份有限公司 移动终端网页适配系统和方法
CN110780853A (zh) * 2019-09-28 2020-02-11 同程网络科技股份有限公司 前端框架及开发方法、存储介质、电子设备
CN111190594A (zh) * 2019-12-23 2020-05-22 北京健康之家科技有限公司 Vue组件的文档生成方法及装置

Also Published As

Publication number Publication date
CN112417338A (zh) 2021-02-26

Similar Documents

Publication Publication Date Title
CN112417338B (zh) 一种页面适配方法、系统及设备
US9529780B2 (en) Displaying content on a mobile device
CN112433799A (zh) 页面生成方法、装置、设备及介质
US10572566B2 (en) Image quality independent searching of screenshots of web content
CN111241793B (zh) 解析富文本编辑器内容给原生客户端渲染的方法、系统及介质
US20150227276A1 (en) Method and system for providing an interactive user guide on a webpage
US8359307B2 (en) Method and apparatus for building sales tools by mining data from websites
CN105095067A (zh) 用户界面元素对象识别及自动化测试的方法和装置
US20150161111A1 (en) Interpreted Language Translation System and Method
CN110222251B (zh) 一种基于网页分割和搜索算法的服务包装方法
CN105786969A (zh) 信息展示方法和装置
CN110955608B (zh) 测试数据处理方法、装置、计算机设备和存储介质
US11403078B2 (en) Interface layout interference detection
CN111831384A (zh) 语言切换方法和装置、设备及存储介质
US20140143172A1 (en) System, method, software arrangement and computer-accessible medium for a mobile-commerce store generator that automatically extracts and converts data from an electronic-commerce store
CN112765516A (zh) 页面内容的展示方法和装置、存储介质、电子装置
CN114138244A (zh) 模型类文件自动生成方法、装置、存储介质及电子设备
JP2020098596A (ja) ウェブページから情報を抽出する方法、装置及び記憶媒体
US10198408B1 (en) System and method for converting and importing web site content
CN112506778A (zh) Web用户界面自动化测试方法、装置、设备和存储介质
US20150248500A1 (en) Documentation parser
CN113806667A (zh) 一种支持网页分类的方法和系统
CN111125605B (zh) 页面元素获取方法和装置
Rachovski et al. Models and methodologies for automated creating of webpage mobile versions
US11922113B2 (en) Systems, methods, and devices for e-mail rendering

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
GR01 Patent grant
GR01 Patent grant