CN114625379B - H5项目源码的生成方法及h5项目源码开发系统 - Google Patents

H5项目源码的生成方法及h5项目源码开发系统 Download PDF

Info

Publication number
CN114625379B
CN114625379B CN202210529508.5A CN202210529508A CN114625379B CN 114625379 B CN114625379 B CN 114625379B CN 202210529508 A CN202210529508 A CN 202210529508A CN 114625379 B CN114625379 B CN 114625379B
Authority
CN
China
Prior art keywords
file
dsl
source code
project
jsx
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
CN202210529508.5A
Other languages
English (en)
Other versions
CN114625379A (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.)
Hangzhou Duba Network Technology Co ltd
Original Assignee
Hangzhou Duba Network 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 Hangzhou Duba Network Technology Co ltd filed Critical Hangzhou Duba Network Technology Co ltd
Priority to CN202210529508.5A priority Critical patent/CN114625379B/zh
Publication of CN114625379A publication Critical patent/CN114625379A/zh
Application granted granted Critical
Publication of CN114625379B publication Critical patent/CN114625379B/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
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/53—Decompilation; Disassembly
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing 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/44—Encoding
    • G06F8/447—Target code generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本申请涉及一种H5项目源码的生成方法及H5项目源码开发系统，通过低代码平台导入视觉设计稿文件生成DSL文件，低代码平台依据DSL文件生成与DSL文件对应的静态页面源码，可视化出页面。在低代码平台上进行任意调整后，依据DSL文件重新生成本地化的静态页面源码，实现双向操作。本申请既可以支撑新项目的低代码生成本地化的静态页面源码，也可以基于本地化的静态页面源码多次自定义开发后，重新可视化编辑，降低开发成本，提升开发效率，同时降低bug出现概率。

Description

H5项目源码的生成方法及H5项目源码开发系统
技术领域
本申请涉及低代码技术领域，特别是涉及一种H5项目源码的生成方法及H5项目源码开发系统。
背景技术
随着互联网企业的蓬勃发展，企业对于敏捷开放，快速交付的需求越来越强烈。低代码平台，英文名称Low Code Development Platform，是近年来比较热门的一种用于H5项目开发的代码平台。低代码平台提供可视化开发界面和自定义代码功能，最主要的是可以降低代码编写量，将应用场景极致抽象并且模板化，不但可以满足企业复杂的功能需求，而且可以帮助企业以最快的速度完成H5项目的开发。
然而，现有的市面上的所有低代码平台采用的H5项目源码的生成方法都无法实现逆向解析，即生成的本地化H5项目源码，无法被低代码平台重新识别进行可视化二次迭代修改，这就依赖于开发人员需要阅读并理解所有源码，且开发人员完全掌握源码需要较长时间，修改过程中极容易造成新的bug。
发明内容
基于此，有必要针对传统H5项目源码的生成方法都无法实现逆向解析的问题，提供一种H5项目源码的生成方法及H5项目源码开发系统。
本申请提供一种H5项目源码的生成方法，所述方法包括：
从开发人员终端获取视觉设计稿文件；
解析视觉设计稿文件并将视觉设计稿文件转化为DSL文件；
依据DSL文件生成与DSL文件对应的静态页面源码；
将与DSL文件对应的静态页面源码和H5项目模板组合，生成标准项目工程文件并存储至本地；
监控是否收到对标准项目工程文件进行调整的请求；
当收到对标准项目工程文件进行调整的请求时，对标准项目工程文件进行调整，得到调整后的标准项目工程文件；在调整的过程中，同步更新与DSL文件对应的静态页面源码；
对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码；
返回所述监控是否收到对标准项目工程文件进行调整的请求的步骤。
进一步地，在所述从开发人员终端获取视觉设计稿文件之前，所述方法还包括：
从gitlab仓库中获取H5项目模板，所述H5项目模板包括待开发H5项目的多个必要配置项文件。
进一步地，所述当收到对标准项目工程文件进行调整的请求时，对标准项目工程文件进行调整，得到调整后的标准项目工程文件，包括：
基于DSL文件对页面元素和组件进行调整，生成第一次调整后的静态页面源码；
向第一次调整后的静态页面源码中加入自定义业务逻辑代码，生成第二次调整后的静态页面源码；
将第二次调整后的静态页面源码和H5项目模板组合，生成调整后的标准项目工程文件。
进一步地，所述基于DSL文件对页面元素和组件进行调整，生成第一次调整后的静态页面源码，包括：
基于DSL文件对页面元素进行调整；所述基于DSL文件对页面元素进行调整包括页面重命名、对页面元素在页面中的位置进行调整、对页面上加载的动画视频进行编辑和添加组件中的一种或多种；
基于DSL文件对组件进行调整；所述基于DSL文件对组件进行调整包括对基础组件进行调整、对布局组件进行调整和对逻辑组件进行调整中的一种或多种；
生成第一次调整后的静态页面源码。
进一步地，所述解析视觉设计稿文件并将视觉设计稿文件转化为DSL文件，包括：
解析视觉设计稿文件，得到一个json数据结构；
解析所述json数据结构并生成与每一个页面对应的.jsx文件和.less文件；
选取与一个页面对应的.jsx文件和.less文件；
依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件；
将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL；
返回所述选取与一个页面对应的.jsx文件和.less文件的步骤，直至生成所有页面的DSL；
将所有页面的DSL整合为一个DSL文件。
进一步地，所述对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码，包括：
利用Node.js模块扫调整后的标准项目工程文件中与每一个页面对应的.jsx文件和.less文件，将.jsx文件的页面路径和.less文件的页面路径合并存储为一个json数据结构，最终得到多个json数据结构；
选取一个json数据结构；
利用Node.js模块扫描json数据结构中.jsx文件和.less文件；
依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件；
将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL；
返回所述选取一个json数据结构的步骤，直至生成所有页面的DSL；
将所有页面的DSL整合为一个DSL文件。
进一步地，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，包括：
采用抽象语法树递归解析.jsx文件，得到.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系；
依据.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系生成第一AST文件；
将第一AST文件转化为与.jsx文件对应的DSL文件。
进一步地，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，还包括：
采用抽象语法树递归解析.less文件，得到.less文件中的多个样式名称和多个样式名称之间的层级关系；
依据.less文件中的多个样式名称和多个样式名称之间的层级关系生成第二AST文件；
将第二AST文件转化为与.less文件对应的DSL文件。
进一步地，在对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码之后，在返回所述监控是否收到对标准项目工程文件进行调整的请求的步骤之前，还包括：
将与DSL文件对应的静态页面源码存储至本地。
本申请还提供一种H5项目源码开发系统 ，包括：
多个开发人员终端；
低代码平台，与每一个开发人员终端分别通信连接，用于执行如前述内容提及的H5项目源码开发方法；
git服务器，与低代码平台通信连接，所述git服务器搭载有gitlab仓库。
本申请涉及一种H5项目源码的生成方法及H5项目源码开发系统，通过低代码平台导入视觉设计稿文件生成DSL文件，低代码平台依据DSL文件生成与DSL文件对应的静态页面源码，可视化出页面。在低代码平台上进行任意调整后，依据DSL文件重新生成本地化的静态页面源码，实现双向操作。本申请既可以支撑新项目的低代码生成本地化的静态页面源码，也可以基于本地化的静态页面源码多次自定义开发后，重新可视化编辑，降低开发成本，提升开发效率，同时降低bug出现概率。
附图说明
图1为本申请一实施例提供的H5项目源码的生成方法的流程示意图。
图2为本申请一实施例提供的H5项目源码开发系统的结构示意图。
附图标记：
100-开发人员终端；200-低代码平台；300- git服务器。
具体实施方式
为了使本申请的目的.技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请提供一种H5项目源码的生成方法。需要说明的是，本申请提供的H5项目源码的生成方法应用于任何类型的低代码平台，应用于H5项目源码的开发场景。
此外，本申请提供的H5项目源码的生成方法不限制其执行主体。可选地，本申请提供的H5项目源码的生成方法的执行主体可以为一种低代码平台。
如图1所示，在本申请的一实施例中，所述方法包括如下S100至S800：
S100，从开发人员终端获取视觉设计稿文件。
具体地，视觉设计稿文件的格式为.PSD。
视觉设计稿文件包含图片，文本等元素，还有UI展示布局的内容。
S200，解析视觉设计稿文件并将视觉设计稿文件转化为DSL文件。
具体地，DSL，即Domain Specific Language，中文名称为领域特定语言，它是一种为特定应用领域而设计使用的计算机语言。
将视觉设计稿文件转化为DSL文件是为了方便后续的处理与逆解析过程。DSL文件不局限于仅应用于单一的平台，或者单一的终端，也不局限于仅应用于一种计算机语言，相反的是，它具有良好的兼容性，其作为数据载体不但可以兼容不同的终端进行数据的传输和共享，而且可以兼容不同的计算机语言，不同类型的项目，例如不仅限于H5项目，其灵活性很高。
S300，依据DSL文件生成与DSL文件对应的静态页面源码。
具体地，静态页面源码包括两种格式的文件，一种是格式为.jsx的文件，后续内容我们简称为.jsx文件。另一种是格式为.less的文件，后续内容我们简称为.less文件。.jsx文件主要包含逻辑信息。.jsx文件包含很多逻辑模块。.less文件主要包含样式信息。.less文件包含很多样式名称。
S400，将与DSL文件对应的静态页面源码和H5项目模板组合，生成标准项目工程文件并存储至本地。
具体地，H5项目模板中包含格式为.js的文件。静态页面源码和H5项目模板组合可以生成标准项目工程文件并存储至低代码平台本地。这样我们通过低代码平台就可以随时打开标准项目工程文件对标准项目工程文件进行调整。
S500，监控是否收到对标准项目工程文件进行调整的请求。
具体地，在H5项目的开发过程中，会涉及到很多修改操作，我们将这些修改操作在本申请中定义为“调整”。在本步骤中实时监控是否收到对标准项目工程文件进行调整的请求，以准备对标准项目工程文件进行调整。
S600，当收到对标准项目工程文件进行调整的请求时，对标准项目工程文件进行调整，得到调整后的标准项目工程文件。在调整的过程中，同步更新与DSL文件对应的静态页面源码。
具体地，本步骤中，不但对标准项目工程文件进行调整，还要同步更新静态页面源码。
S700，对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码。
具体地，可以随时通过刷新低代码平台或者使用低代码平台重新打开本地存储的标准项目工程文件，对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码，然后再次执行S500至S600的步骤对标准项目工程文件和静态页面源码进行调整，无需开放人员阅读和理解静态页面源码，即可完成调整需求。
S800，返回所述S500。
具体地，可以再次执行S500至S600的步骤对标准项目工程文件和静态页面源码进行调整，调整后重新生成静态页面源码，实现双向操作。
本实施例中，通过低代码平台导入视觉设计稿文件生成DSL文件，低代码平台依据DSL文件生成与DSL文件对应的静态页面源码，可视化出页面。在低代码平台上进行任意调整后，依据DSL文件重新生成本地化的静态页面源码，实现双向操作。本实施例提供的H5项目源码的生成方法既可以支撑新项目的低代码生成本地化的静态页面源码，也可以基于本地化的静态页面源码多次自定义开发后，重新可视化编辑，降低开发成本，提升开发效率，同时降低bug出现概率。
在本申请的一实施例中，在所述S100之前，所述H5项目源码的生成方法还包括如下步骤：
S010，从gitlab仓库中获取H5项目模板，所述H5项目模板包括待开发H5项目的多个必要配置项文件。
具体地，在低代码平台中选择H5项目模板，基于低代码平台和git服务器之间的接口从git服务器中的gitlab仓库拉取预先选取好的H5项目模板，下载该预先选取好的H5项目模板并且存储于低代码平台本地文件系统中。H5项目模板仅包含项目工程的必要配置项文件，无任何业务逻辑相关内容。
在本申请的一实施例中，所述S600包括如下S610至S630：
S610，基于DSL文件对页面元素和组件进行调整，生成第一次调整后的静态页面源码。
本实施例中，对标准项目工程文件进行调整包括两次调整。
第一次调整是S610，是对H5页面的页面元素和组件进行调整，其不包括调整与接口相关的功能。
第一次调整不能调整的内容如下：
1）API接口调用相关内容。
2）路由功能。
3）数据状态管理相关内容。
4）Cookie设置相关内容。
5）授权免登陆账号功能，授权分享功能。
S620，向第一次调整后的静态页面源码中加入自定义业务逻辑代码，生成第二次调整后的静态页面源码。
具体地，第二次调整是S620，第二次调整则可以调整与接口相关的功能。例如可以向第一次调整后的静态页面源码中添加与页面跳转功能相关的自定义业务逻辑代码，来实现页面跳转功能。
可以通过在开发人员终端提前编写好自定义业务逻辑代码，然后再传输至低代码平台来实现，这样的好处是节省低代码平台的算力，低代码平台不负责编写代码，只负责正解析和逆解析。运算压力小。
S630，将第二次调整后的静态页面源码和H5项目模板组合，生成调整后的标准项目工程文件。
具体地，当然，本申请的S600可以包括S610和S620的两次调整，当然也可以只包含一次调整，例如只包含S610的调整，或者只包含S620的调整，都是可行的。
在本申请的一实施例中，所述S610包括如下S611至S613：
S611，基于DSL文件对页面元素进行调整。所述基于DSL文件对页面元素进行调整包括页面重命名、对页面元素在页面中的位置进行调整、对页面上加载的动画视频进行编辑和添加组件中的一种或多种。
具体地，低代码平台可以根据DSL文件在低代码平台上还原出静态页面源码的视觉样式和视觉逻辑，进而在此基础上进行调整，即进行修改。可以理解，本步骤是可以实现可视化编辑的。
本步骤的调整方式只是几种常见的实施方式，还有很多种实施方式存在，这里不再赘述。
S612，基于DSL文件对组件进行调整。所述基于DSL文件对组件进行调整包括对基础组件进行调整、对布局组件进行调整和对逻辑组件进行调整中的一种或多种。
具体地，组件包括基础组件，布局组件和逻辑组件中的一种或多种。本步骤是对各个组件进行调整。
S613，生成第一次调整后的静态页面源码。
具体地，本步骤通过基于DSL文件可视化出页面进行可视化编辑，极大的降低了开放成本，不需要开发人员完全掌握静态页面源码即可进行调整修改，而且修改过程中不容易产生bug。
在本申请的一实施例中，所述S200包括如下S210至S270：
S210，解析视觉设计稿文件，得到一个json数据结构。
S220，解析所述json数据结构并生成与每一个页面对应的.jsx文件和.less文件。
S230，选取与一个页面对应的.jsx文件和.less文件。
S240，依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件。
S250，将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL。
S260，返回所述S230，直至生成所有页面的DSL。
S270，将所有页面的DSL整合为一个DSL文件。
具体地，本步骤的S210至S270，是视觉设计稿文件的正解析过程。
视觉设计稿文件是格式为.PSD的文件，它包含图片，文本等元素，还包括UI展示布局的数据内容，在拿到这个视觉设计稿文件后，首先将视觉设计稿文件转化为一个json数据结构。
这个json数据结构是包括所有页面的.jsx文件和.less文件的。每一个页面存在与这个页面对应的一个.jsx文件和一个.less文件。那么通过执行S230至S250，先分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，再将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并为一个大的DSL（本申请命名为：一个页面的DSL），最后再将所有大的DSL整合为一个DSL文件。
在本申请的一实施例中，所述S700包括：
S710，利用Node.js模块扫描调整后的标准项目工程文件中与每一个页面对应的.jsx文件和.less文件，将.jsx文件的页面路径和.less文件的页面路径合并存储为一个json数据结构，最终得到多个json数据结构。
S720，选取一个json数据结构。
S730，利用Node.js模块扫描json数据结构中.jsx文件和.less文件。
S740，依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件。
S750，将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL。
S760，返回所述S720，直至生成所有页面的DSL。
S770，将所有页面的DSL整合为一个DSL文件。
具体地，本实施例中的逆解析和前一实施例的正解析的原理是相似的，区别在于，本实施例是基于Node技术，利用Node.js模块扫描调整后的标准项目工程文件中与每一个页面对应的.jsx文件和.less文件，将.jsx文件的页面路径和.less文件的页面路径合并存储为一个json数据结构，最终得到多个json数据结构，这点和前面正解析的json数据结构并不是完全相同的json数据结构。
利用Node.js模块扫描时，只搜寻后缀为.jsx和.less的文件。
后续的S720至S770的工作原理和正解析部分的S230至S270的工作原理是类似的，此处不再赘述。
在本申请的一实施例中，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，包括如下W110至W130：
W110，采用抽象语法树递归解析.jsx文件，得到.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系。
W120，依据.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系生成第一AST文件。
W130，将第一AST文件转化为与.jsx文件对应的DSL文件。
具体地，抽象语法树即AST。.jsx文件表达的是逻辑关系，.less文件表达的是样式名称之间的层级关系。但是他们的生成DSL的方式方法是相同的，都是先解析.jsx文件或.less文件生成AST文件，再对AST文件进行递归分析生成DSL文件，DSL文件可以用于后续的可视化显示，便于低代码平台进行持续性的多次修改。
S240和S740都是通过执行W110至W130来转化与.jsx文件对应的DSL文件。
在本申请的一实施例中，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，还包括如下W210至W230：
W210，采用抽象语法树递归解析.less文件，得到.less文件中的多个样式名称和多个样式名称之间的层级关系。
W220，依据.less文件中的多个样式名称和多个样式名称之间的层级关系生成第二AST文件。
W230，将第二AST文件转化为与.less文件对应的DSL文件。
具体地，抽象语法树即AST。.jsx文件表达的是逻辑关系，.less文件表达的是样式名称之间的层级关系。但是他们的生成DSL的方式方法是相同的，都是先解析.jsx文件或.less文件生成AST文件，再对AST文件进行递归分析生成DSL文件，DSL文件可以用于后续的可视化显示，便于低代码平台进行持续性的多次修改。
S240和S740都是通过执行W210至W230来转化与 .less文件对应的DSL文件。
在本申请的一实施例中，在S700之后，在S800之前，还包括：
S780，将与DSL文件对应的静态页面源码存储至本地。
具体地，本实施例中，不光要生成DSL文件，还要生成与DSL对应的静态页面源码并进行存储。
本申请还提供一种H5项目源码开发系统。
如图2所示，在本申请的一实施例中，所述H5项目源码开发系统包括多个开发人员终端100、低代码平台200和git服务器300。所述低代码平台200，与每一个开发人员终端100分别通信连接，用于执行如前述内容提及的H5项目源码开发方法。所述git服务器300与低代码平台200通信连接。所述git服务器300搭载有gitlab仓库。
具体地，需要说明的是，为了行文简洁，开发人员终端100、低代码平台200和git服务器300三个设备仅在本实施例中进行标号，在前述H5项目源码的生成方法的实施例中不进行标号。
以上所述实施例的各技术特征可以进行任意的组合，各方法步骤也并不做执行顺序的限制，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (9)

1.一种H5项目源码的生成方法，其特征在于，所述方法包括：
从开发人员终端获取视觉设计稿文件；
解析视觉设计稿文件并将视觉设计稿文件转化为DSL文件；
依据DSL文件生成与DSL文件对应的静态页面源码；
将与DSL文件对应的静态页面源码和H5项目模板组合，生成标准项目工程文件并存储至本地；
监控是否收到对标准项目工程文件进行调整的请求；
当收到对标准项目工程文件进行调整的请求时，对标准项目工程文件进行调整，得到调整后的标准项目工程文件；在调整的过程中，同步更新与DSL文件对应的静态页面源码；
对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码；
返回所述监控是否收到对标准项目工程文件进行调整的请求的步骤；
所述解析视觉设计稿文件并将视觉设计稿文件转化为DSL文件，包括：
解析视觉设计稿文件，得到一个json数据结构；
解析所述json数据结构并生成与每一个页面对应的.jsx文件和.less文件；
选取与一个页面对应的.jsx文件和.less文件；
依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件；
将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL；
返回所述选取与一个页面对应的.jsx文件和.less文件的步骤，直至生成所有页面的DSL；
将所有页面的DSL整合为一个DSL文件。
2.根据权利要求1所述的H5项目源码的生成方法，其特征在于，在所述从开发人员终端获取视觉设计稿文件之前，所述方法还包括：
从gitlab仓库中获取H5项目模板，所述H5项目模板包括待开发H5项目的多个必要配置项文件。
3.根据权利要求2所述的H5项目源码的生成方法，其特征在于，所述当收到对标准项目工程文件进行调整的请求时，对标准项目工程文件进行调整，得到调整后的标准项目工程文件，包括：
基于DSL文件对页面元素和组件进行调整，生成第一次调整后的静态页面源码；
向第一次调整后的静态页面源码中加入自定义业务逻辑代码，生成第二次调整后的静态页面源码；
将第二次调整后的静态页面源码和H5项目模板组合，生成调整后的标准项目工程文件。
4.根据权利要求3所述的H5项目源码的生成方法，其特征在于，所述基于DSL文件对页面元素和组件进行调整，生成第一次调整后的静态页面源码，包括：
基于DSL文件对页面元素进行调整；所述基于DSL文件对页面元素进行调整包括页面重命名、对页面元素在页面中的位置进行调整、对页面上加载的动画视频进行编辑和添加组件中的一种或多种；
基于DSL文件对组件进行调整；所述基于DSL文件对组件进行调整包括对基础组件进行调整、对布局组件进行调整和对逻辑组件进行调整中的一种或多种；
生成第一次调整后的静态页面源码。
5.根据权利要求4所述的H5项目源码的生成方法，其特征在于，所述对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码，包括：
利用Node.js模块扫调整后的标准项目工程文件中与每一个页面对应的.jsx文件和.less文件，将.jsx文件的页面路径和.less文件的页面路径合并存储为一个json数据结构，最终得到多个json数据结构；
选取一个json数据结构；
利用Node.js模块扫描json数据结构中.jsx文件和.less文件；
依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件；
将与.jsx文件对应的DSL文件和与.less文件对应的DSL文件合并，得到一个页面的DSL；
返回所述选取一个json数据结构的步骤，直至生成所有页面的DSL；
将所有页面的DSL整合为一个DSL文件。
6.根据权利要求5所述的H5项目源码的生成方法，其特征在于，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，包括：
采用抽象语法树递归解析.jsx文件，得到.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系；
依据.jsx文件中的多个逻辑模块和多个逻辑模块之间的逻辑关系生成第一AST文件；
将第一AST文件转化为与.jsx文件对应的DSL文件。
7.根据权利要求6所述的H5项目源码的生成方法，其特征在于，所述依据.jsx文件和.less文件分别生成与.jsx文件对应的DSL文件和与.less文件对应的DSL文件，还包括：
采用抽象语法树递归解析.less文件，得到.less文件中的多个样式名称和多个样式名称之间的层级关系；
依据.less文件中的多个样式名称和多个样式名称之间的层级关系生成第二AST文件；
将第二AST文件转化为与.less文件对应的DSL文件。
8.根据权利要求7所述的H5项目源码的生成方法，其特征在于，在对调整后的标准项目工程文件进行逆解析，得到与DSL文件对应的静态页面源码之后，在返回所述监控是否收到对标准项目工程文件进行调整的请求的步骤之前，还包括：
将与DSL文件对应的静态页面源码存储至本地。
9.一种H5项目源码开发系统，其特征在于，包括：
多个开发人员终端；
低代码平台，与每一个开发人员终端分别通信连接，用于执行如权利要求1-8中任意一项所述的H5项目源码的生成方法；
git服务器，与低代码平台通信连接，所述git服务器搭载有gitlab仓库。
CN202210529508.5A 2022-05-16 2022-05-16 H5项目源码的生成方法及h5项目源码开发系统 Active CN114625379B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210529508.5A CN114625379B (zh) 2022-05-16 2022-05-16 H5项目源码的生成方法及h5项目源码开发系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210529508.5A CN114625379B (zh) 2022-05-16 2022-05-16 H5项目源码的生成方法及h5项目源码开发系统

Publications (2)

Publication Number Publication Date
CN114625379A CN114625379A (zh) 2022-06-14
CN114625379B true CN114625379B (zh) 2022-08-26

Family

ID=81907235

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210529508.5A Active CN114625379B (zh) 2022-05-16 2022-05-16 H5项目源码的生成方法及h5项目源码开发系统

Country Status (1)

Country Link
CN (1) CN114625379B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116414375B (zh) * 2023-06-07 2023-09-01 长威信息科技发展股份有限公司 一种导出设计版源码的方法和系统

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111638877A (zh) * 2020-06-01 2020-09-08 山东汇贸电子口岸有限公司 一种Web项目可视化快速开发方法

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6061513A (en) * 1997-08-18 2000-05-09 Scandura; Joseph M. Automated methods for constructing language specific systems for reverse engineering source code into abstract syntax trees with attributes in a form that can more easily be displayed, understood and/or modified
US6687418B1 (en) * 1999-02-25 2004-02-03 Lester Frank Ludwig Correction of image misfocus via fractional fourier transform
US9459862B2 (en) * 2013-01-29 2016-10-04 ArtinSoft Corporation Automated porting of application to mobile infrastructures
CN104657140B (zh) * 2015-02-10 2018-01-09 广州华多网络科技有限公司 代码生成方法及装置
US10559217B2 (en) * 2016-08-05 2020-02-11 Intel Corporation Methods and apparatus to develop in-vehicle experiences in simulated environments
CN109947433A (zh) * 2019-03-28 2019-06-28 优信拍（北京）信息科技有限公司 一种小程序的生成方法、更新方法及装置
CN113805881B (zh) * 2021-09-18 2024-02-23 上海仪电（集团）有限公司中央研究院 一种不同框架间前端组件的转换方法及装置
CN113805871B (zh) * 2021-09-26 2023-08-15 平安国际智慧城市科技股份有限公司 前端代码的生成方法、装置及计算机设备
CN113918144A (zh) * 2021-10-12 2022-01-11 湖南映客互娱网络信息有限公司 基于图像生成可复用页面的方法及系统
CN114064480A (zh) * 2021-11-17 2022-02-18 杭州兑吧网络科技有限公司 一种软件质量管理方法和系统

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111638877A (zh) * 2020-06-01 2020-09-08 山东汇贸电子口岸有限公司 一种Web项目可视化快速开发方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于B/S架构的小型化视频会议系统的设计;焦阳明昊;《中国优秀硕士学位论文全文数据库 信息科技辑》;20220315;第2022年卷(第3期);全文 *

Also Published As

Publication number Publication date
CN114625379A (zh) 2022-06-14

Similar Documents

Publication Publication Date Title
CN110018955B (zh) 通过转换手动测试用例来生成自动化测试脚本
US8762963B2 (en) Translation of programming code
US20110289407A1 (en) Font recommendation engine
US20090313613A1 (en) Methods and Apparatus for Automatic Translation of a Computer Program Language Code
US20100242017A1 (en) Inferring missing type information for reflection
CN110825431B (zh) 接口文档处理方法及装置、系统、存储介质和电子设备
CN109062572B (zh) 一种组件调用方法、装置、设备及存储介质
US20240036843A1 (en) Adapting existing source code snippets to new contexts
CN111736840A (zh) 小程序应用的编译方法、运行方法、存储介质及电子设备
CN114625379B (zh) H5项目源码的生成方法及h5项目源码开发系统
CN111324833A (zh) 页面展示方法、装置、电子设计及计算机可读介质
CN114153459A (zh) 接口文档生成方法及装置
CN110688145A (zh) Android MVP代码自动生成方法、装置、介质、电子设备
CN112269566B (zh) 脚本生成处理方法、装置、设备及系统
CN110442419B (zh) Android应用的界面布局方法及装置
CN102193789A (zh) 一种实现可配置跳转链接的方法和设备
CN116841559A (zh) 代码转换方法、装置、设备、介质和程序产品
CN115809442A (zh) 一种反逆向代码混淆方法、装置、设备及可读存储介质
CN116774993A (zh) 代码转换方法、装置及存储介质
CN113312025B (zh) 组件库生成方法及装置、存储介质、电子设备
CN110737431B (zh) 软件开发方法、开发平台、终端设备及存储介质
CN114281875A (zh) 基于动态多数据源的数据库适配装置及方法
CN109509467B (zh) 代码生成方法及装置
CN117827171A (zh) 一种通过jsonSchema文件生成项目源码的方法及装置
CN118092914A (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
GR01 Patent grant
GR01 Patent grant