一种用于运行Web工程的页面预览方法及设备技术

本申请公开了一种用于运行Web工程的页面预览方法及设备，方法包括：服务端确定web app的第一SPA前端框架；在第一SPA前端框架中确定web app的应用功能需求信息，将应用功能需求信息动态生成编译的前端代码，将前端代码发送至客户端，以使客户端在运行前端代码时，通过动态解析前端代码生成web app的第二SPA前端框架，基于第二SPA前端框架，自动解析待预览的前端页面。通过在第一SPA前端框架中确定web app的应用功能需求信息，将应用功能需求信息动态生成编译的前端代码，能够基于需求打包编译前端代码，实现节流的效果，以及通过在运行前端代码时，通过动态解析前端代码生成web app的第二SPA前端框架，能够自动解析待预览的前端页面，实现前端页面的实时预览。实现前端页面的实时预览。实现前端页面的实时预览。

【技术实现步骤摘要】
app的第一单页应用程序SPA前端框架，在第一SPA前端框架中确定所述web app的应用功能需求信息，将所述应用功能需求信息动态生成编译的前端代码得到；在运行所述前端代码时，通过动态解析所述前端代码生成所述web app的第二SPA前端框架，基于所述第二SPA前端框架，自动解析待预览的前端页面。
[0011]一个示例中，所述通过动态解析所述前端代码生成所述web app的第二SPA前端框架，具体包括：确定超文本标记语言HTML模板；通过正则表达式对所述HTML模板的字符串进行逐字符解析，确定元素节点以及所述元素节点上对应的节点信息；对所述节点信息进行模板语法分析，确定抽象语法树AST节点，以生成对应的AST树；确定所述AST树在浏览器环境下渲染界面的函数；通过所述函数动态解析所述前端代码生成所述web app的第二SPA前端框架。
[0012]一个示例中，所述基于所述第二SPA前端框架，自动解析待预览的前端页面，具体包括：基于用户的操作，获取页面加载请求；对所述页面加载请求进行解析，在所述第二SPA前端框架中，确定所述页面加载请求对应的组件类型以及组件的前端代码；根据本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用于运行Web工程的页面预览方法，其特征在于，所述方法包括：服务端确定web app的第一单页应用程序SPA前端框架；在第一SPA前端框架中确定所述web app的应用功能需求信息，将所述应用功能需求信息动态生成编译的前端代码；将所述前端代码发送至客户端，以使客户端在运行所述前端代码时，通过动态解析所述前端代码生成所述web app的第二SPA前端框架，基于所述第二SPA前端框架，自动解析待预览的前端页面。2.根据权利要求1所述的方法，其特征在于，所述将所述应用功能需求信息动态生成编译的前端代码，具体包括：在所述代码编译工具webpack中，确定动态代码逻辑与动态代码规则；根据所述应用功能需求信息生成延迟列表lazyRoutes中的列表数据；通过所述webpack读入所述列表数据，根据所述动态代码逻辑与动态代码规则动态解析所述列表数据；对解析后的列表数据进行编译，生成所述编译的前端代码。3.根据权利要求1所述的方法，其特征在于，所述基于所述第二SPA前端框架，自动解析待预览的前端页面之后，所述方法还包括：服务端确定所述前端代码的变更内容；生成所述变更内容的哈希值；根据所述变更内容与所述哈希值，确定变更通知信息；向所述客户端推送所述变更通知信息。4.一种用于运行Web工程的页面预览方法，其特征在于，所述方法包括：客户端获取来自于服务端的前端代码；其中，所述前端代码通过所述服务端确定web app的第一单页应用程序SPA前端框架，在第一SPA前端框架中确定所述web app的应用功能需求信息，将所述应用功能需求信息动态生成编译的前端代码得到；在运行所述前端代码时，通过动态解析所述前端代码生成所述web app的第二SPA前端框架；基于所述第二SPA前端框架，自动解析待预览的前端页面。5.根据权利要求4所述的方法，其特征在于，所述通过动态解析所述前端代码生成所述web app的第二SPA前端框架，具体包括：确定超文本标记语言HTML模板；通过正则表达式对所述HTML模板的字符串进行逐字符解析，确定元素节点以及所述元素节点上对应的节点信息；对所述节点信息进行模板语法分析，确定抽象语法树AST节点，以生成对应的AST树；确定所述AST树在浏览器环境下渲染界面的函数；通过所述函数动态解析所述前端代码生成所述web app的第二SPA前端框架。6.根据权利要求...

【专利技术属性】
技术研发人员：杨本庆，
申请(专利权)人：浪潮通用软件有限公司，
类型：发明
国别省市：