CN113672224A - 小程序页面代码生成方法、装置及计算机设备 - Google Patents
小程序页面代码生成方法、装置及计算机设备 Download PDFInfo
- Publication number
- CN113672224A CN113672224A CN202110961819.4A CN202110961819A CN113672224A CN 113672224 A CN113672224 A CN 113672224A CN 202110961819 A CN202110961819 A CN 202110961819A CN 113672224 A CN113672224 A CN 113672224A
- Authority
- CN
- China
- Prior art keywords
- source code
- code
- channel
- page
- component
- 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
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000003044 adaptive effect Effects 0.000 claims abstract description 31
- 230000004069 differentiation Effects 0.000 claims abstract description 16
- 238000006243 chemical reaction Methods 0.000 claims description 36
- 238000013507 mapping Methods 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 9
- 230000006870 function Effects 0.000 description 7
- 230000006978 adaptation Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 6
- 230000002452 interceptive effect Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 5
- 239000008186 active pharmaceutical agent Substances 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 238000012795 verification Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000004806 packaging method and process Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000009517 secondary packaging Methods 0.000 description 1
Images
Classifications
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本申请公开了一种小程序页面代码生成方法、装置及计算机设备，该方法包括：获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。本申请还提供一种计算机可读存储介质。本申请能够有效提高将同一页面数据兼容到不同渠道的页面的效率。
Description
技术领域
本申请涉及互联网技术领域，尤其涉及一种小程序页面代码生成方法、装置及计算机设备。
背景技术
应用小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。随着智能终端的普及以及计算机技术的发展，现在已经能够实现将相同的数据资源，比如页面数据，通过不同应用，即不同渠道的小程序直接进行访问，从而方便了用户基于不同应用上快速地对热门话题或者优势资源进行访问。
对于数据服务商来而言，将同一个数据资源兼容到不同的渠道中也是必要的。因此，数据服务商在开发数据资源时，一般需要开发多个版本，比如，适用于web(网页)版和其他基于不同渠道的小程序。然而，将相同数据资源，比如页面数据，开发成适用于不用渠道的小程序页面的版本，通常需要逐一开发，其开发工作较为繁重，开发效率较低。
发明内容
本申请提出一种小程序页面代码生成方法、装置及计算机设备，能够解决现有技术中将同一页面数据兼容到不同渠道的页面时效率低下的问题。
首先，为实现上述目的，本申请提供一种小程序页面代码生成方法，所述方法包括：
获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
在一个例子中，在所述根据所述差异化组件集合对所述第一源代码数据进行适配编译之前，所述方法还包括：将所述第一源代码数据对应的文件名和目录路径转换为符合第二渠道的源代码数据的命名和目录规范的文件名和目录路径；将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数。
在一个例子中，所述将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数，包括：通过增加适配源代码的方式，将所述第一源代码数据的API接口以及源代码中的配置参数与第二渠道下的源代码数据的API接口和配置参数进行映射。
在一个例子中，所述API接口包括源代码数据中每一个页面组件的源代码的调用接口数据；所述配置参数包括源代码中的变量参数和返回值参数。
在一个例子中，所述根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的代码数据，包括：对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码；根据所述差异化组件集合在所述中间源代码中增加和/或删除对应的功能组件的源代码数据，得到第二渠道下的目标页面的代码数据。
在一个例子中，所述对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码，包括：将所述第一源代码数据转换为抽象语法树；将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码；将已执行代码格式转换的抽象语法树恢复成源代码，得到第二渠道对应代码格式的中间源代码。
在一个例子中，所述将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码，包括：识别出所述抽象语法树上的目标节点对应的源代码的代码类型，所述目标节点为所述抽象语法树上的任一个节点；根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码。
在一个例子中，所述代码类型包括Vue类型、HTML类型、JS类型和CSS类型中的至少一种；当所述代码类型为Vue类型时，所述根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码，包括：根据代码类型的代码格式将所述Vue类型的源代码进行拆分，从而得到其中包括的HTML类型、JS类型和CSS类型中的至少一种
此外，为实现上述目的，本申请还提供一种小程序页面代码生成装置，所述装置包括：
获取模块，用于获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；查询模块，用于根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较模块，用于比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；编译模块，用于根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
进一步地，本申请还提出一种计算机设备，所述计算机设备包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上述的小程序页面代码生成方法的步骤。
进一步地，为实现上述目的，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序可被至少一个处理器执行，以使所述至少一个处理器执行如上述的小程序页面代码生成方法的步骤。
相较于现有技术，本申请所提出的小程序页面代码生成方法、装置、计算机设备及计算机可读存储介质，能够获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。根据其他渠道页面与第一渠道页面之间的差异，对第一渠道对应的页面源代码执行相应的适配，从而使其可以应用到其他渠道页面，因此，能够有效提高将同一页面数据兼容到不同渠道的页面的效率。
附图说明
图1是本申请一实施例的应用环境示意图；
图2是本申请小程序页面代码生成方法一具体实施例的流程示意图；
图3是本申请一示例性例子对渠道API进行适配封装的流程图；
图4是本申请一示例性例子对源代码执行代码格式转换的流程效果图；
图5是本申请一示例性例子小程序页面代码生成的流程效果图；
图6是本申请小程序页面代码生成装置一实施例的程序模块示意图；
图7是本申请计算机设备一可选的硬件架构的示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
图1是本申请一实施例的应用环境示意图。参阅图1所示，所述计算机设备1能够接收用户触发的将渠道1小程序的源代码显示到渠道1小程序，或者显示到其他渠道的显示请求，比如，渠道2小程序，渠道n小程序。在本实施例中，所述计算机设备1可以通过提供交互界面的方式，接收用户由所述交互界面进行点击或触控所触发的显示请求，或者也可以接收连接到所述计算机设备1的用户设备(图1未示出)发送至所述计算机设备1的显示请求。接着，所述计算机设备1获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。最后，根据第二渠道下的目标页面的源代码数据显示到第二渠道预设的小程序页面。
在本实施例中，所述计算机设备1可作为手机、平板、便携设备、PC机或者服务器等；也可以作为独立的功能模块，附加在其他计算机设备上以实现将将同一页面数据兼容到不同应用的小程序页面的功能。
实施例一
图2是本申请小程序页面代码生成方法一实施例的流程示意图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以计算机设备1为执行主体进行示例性描述。
如图2所示，所述小程序页面代码生成方法可以包括步骤S200～S206。
步骤S200，获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合。
具体的，所述计算机设备1能够接收用户触发的将第一渠道下目标页面的源代码显示到其他渠道页面的显示请求，比如，渠道2小程序页面，渠道n小程序页面。例如，所述计算机设备1可以通过提供交互界面的方式，接收用户由所述交互界面进行点击或触控所触发的显示请求，或者也可以接收连接到所述计算机设备1的用户端发送至所述计算机设备1的显示请求。
接着，所述计算机设备1获取所述第一渠道下目标页面对应的第一源代码数据和所述目标页面下包括所有页面组件的第一组件集合。其中，页面组件包括页面上的显示组件，交互组件，控制组件或者其他功能插件，等等。在一示例性例子中，所述计算机设备1能够根据预设的数据格式对所述第一源代码中的每一个页面组件的函数体进行识别，从而识别出每一个页面组件的源代码，从而判断出所述目标页面包括的页面组件，并将所有的页面组件记录到第一组件集合中。
步骤S202，根据预设的渠道页面组件清单查询出所述第二渠道下所述目标页面的包括每一个页面组件的第二组件集合。
具体的，所述计算机设备1在获取到第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合之后，则会进一步获取到待显示的渠道信息。例如，所述计算机设备1通过交互界面接收用户触发的对于第二渠道下的所述目标页面的显示请求，也就是说，需要执行将第一渠道目标页面的第一源代码显示到第二渠道下对应的页面。
在另一具体实施例中，所述计算机设备1在在获取到第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合之后，则会根据预设的渠道页面组件清单查询出每一个渠道下所述目标页面包括的所有组件的组件集合。其中，所述渠道页面组件清单是预先设置的，包括每一个渠道以及该渠道下目标页面所包括的所有页面组件信息。所述计算机设备1获取到待显示所述目标页面的所有渠道后，则会从所述渠道页面组件清单中查询出对应渠道下所述目标页面的组件集合，比如，所述计算机设备1获取到的待显示所述目标页面的为第二渠道，则会从所述渠道页面组件清单中查询出所述第二渠道的第二组件集合。
步骤S204，比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合。
步骤S206，根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
具体的，所述计算机设备1获取到第一渠道下的所述目标页面的第一组件集合以及第二渠道下的所述目标页面的第二组件集合之后，则会对两个组件集合中的所有页面组件逐一进行比对，从而找出其中的差异化组件，记录为差异化组件集合。其中，对于页面组件的比对，可以包括组件名称和组件类型，或者组件源代码中的函数和数据体的比对。所述差异化组件，包括第二渠道下的目标页面相对于第一渠道下的目标页面中多出的页面组件和缺失的页面组件。
所述计算机设备1在比较出第二渠道下的目标页面与第一渠道下的目标页面的页面组件之间的差异化插件集合之后，则会根据所述差异化组件集合对所述第一源代码数据进行适配编译，从而编译得到第二渠道下的目标页面的源代码数据。其中，适配编译，包括根据差异化组件的信息对所述第一源代码数据进行对应的调整，然后再执行编译。比如，第二渠道下的所述目标页面的页面组件比第一渠道下的所述目标页面的页面组件要多，那么，说明所述第一源代码数据相对于第二渠道下的所述目标页面，缺失了部分页面组件，因此，所述计算机设备1需要在所述第一源代码数据中增加缺失的页面组件的代码段。再比如，第二渠道下的所述目标页面的页面组件比第一渠道下的所述目标页面的页面组件要少，那么，说明所述第一源代码数据相对于第二渠道下的所述目标页面，多出了部分页面组件，因此，所述计算机设备1需要在所述第一源代码数据中屏蔽或删减多出的页面组件的代码段。
在一示例性例子中，所述计算机设备1在根据所述差异化组件集合对所述第一源代码数据进行适配编译之前，还会执行步骤：将所述第一源代码数据对应的文件名和目录路径转换为符合第二渠道的源代码数据的命名和目录规范的文件名和目录路径；将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数。
其中，所述计算机设备1将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数，包括：通过增加适配源代码的方式，将所述第一源代码数据的API接口以及源代码中的配置参数与第二渠道下的源代码数据的API接口和配置参数进行映射。所述API接口包括源代码数据中每一个页面组件的源代码的调用接口数据；所述配置参数包括源代码中的变量参数和返回值参数。
具体的，所述计算机设备1将所述第一源代码数据中的每一个类型文件的文件名以及目录替换成默认的文件名和目录，默认文件名和目录具有通用识别性，可以用于调用到其他渠道下的源代码数据。例如，将微信小程序下的源代码数据中会用带“.wx”后缀的文件名替换同名且不带“.wx”后缀的文件名，然后，将其目录也执行替换，比如，将“test.wx”目录替换为“test”目录。
同时，所述计算机设备1需要将第一源代码数据中的API接口以及配置参数进行相应处理，比如，先将第一源代码数据中包括的每一个页面组件的源代码的API接口映射到预设的中间API接口；然后再将第一源代码数据转换成第一渠道对应的第二源代码数据时，则将中间API接口替换第一源代码数据中对应的API接口；当然，在生成的第二源代码数据中，则需要增加对应的映射函数，将中间API接口映射到适用于第二渠道的源代码的API接口。同样的，所述计算机设备1也需要对第一源代码数据中相关的配置参数进行相应的处理，即，增加中间配置参数，用于映射到适用于第二渠道下的源代码的配置参数。从而磨平了第一渠道与第二渠道对应的源代码数据中API接口以及配置参数之间的差异。
在示例性例子中，所述计算机设备1可以针对不同渠道的API的差异，通过对第一渠道下的API上进行二次封装，在中间进行适配，确保不同渠道针对相同的页面组件的API的调用能够保持与第一渠道的使用方式一致，包括API的名称和使用方式。
参阅图3，是本申请一示例性例子对渠道API进行适配封装的流程图。在本实施例中，所述计算机设备1预先建立一个能针对不同渠道的API特点进行适配封装的功能组件，也就是适配层；然后将源代码对应的API信息比如，Bilibili小程序API，进行封装，从而得到适配于目标渠道的渠道API。
所述计算机设备1在执行完上述步骤之后，则进一步执行对第一源代码数据的适配编译过程。
在一具体实施例中，所述计算机设备1根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的代码数据，包括：对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码；根据所述差异化组件集合在所述中间源代码中增加和/或删除对应的功能组件的源代码数据，得到第二渠道下的目标页面的代码数据。
其中，所述计算机设备1对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码，包括：将所述第一源代码数据转换为抽象语法树；将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码；将已执行代码格式转换的抽象语法树恢复成源代码，得到第二渠道对应代码格式的中间源代码。
所述计算机设备1将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码，包括：识别出所述抽象语法树上的目标节点对应的源代码的代码类型，所述目标节点为所述抽象语法树上的任一个节点；根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码。
在本实施例中，所述计算机设备1对于每一个渠道下的页面组件都预先建立好了格式代码段，并存储到预设的代码数据库；所述格式代码段相当于实现对应渠道下页面组件的基本代码。当所述计算机设备1根据所述差异化组件集合对所述第一源代码执行适配编译，包括：当所述差异化组件集合为缺失页面组件时，则可以进一步从代码数据库中查询出需要的页面组件的格式代码，然后***到所述第一源代码中，从而得到用于适配编译的中间源代码；当所述异化组件集合为多出页面组件时，则可以通过设置条件编译的方式，对所述第一源代码中的对应的页面组件的源代码执行屏蔽，或者也可以直接将其删除，从而得到用于适配编译的中间源代码。
其中，所述计算机设备1在根据所述差异化组件集合在所述中间源代码中增加和/或删除对应的功能组件的源代码数据的过程中，需要先通过预设的转换工具将所述第一源代码数据转换为抽象语法树的数据体，所述抽象语法树上的每一个节点则表示一个页面组件对应的源代码。然后，所述计算机设备1通过对所述抽象语法树上的每一个节点执行比对，以及后续的增加或删除操作，从而获得中间源代码。
在一示例性例子中，所述代码类型包括Vue类型、HTML类型、JS类型和CSS类型中的至少一种；当所述代码类型为Vue类型时，所述计算机设备1根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码，包括：根据代码类型的代码格式将所述Vue类型的源代码进行拆分，从而得到其中包括的HTML类型、JS类型和CSS类型中的至少一种。
虽然第一渠道和第二渠道可以均由HTML类型、JS类型和CSS类型的代码构成，但是其中还是会存在格式上的差异。而源代码中包括的Vue类型的数据，实际上是由HTML类型、JS类型和CSS类型中的一种或多种混合而来的代码段，因此，所述计算机设备1在对所述第一源代码段执行格式转换时，需要逐一分类出其中所有类型的代码，先根据HTML类型、JS类型和CSS类型的代码格式将Vue类型的代码中的HTML类型、JS类型和CSS类型的代码识别出来，然后再分别经由HTML代码转换器、JS代码转换器和CSS代码转换器进行代码转换，从而得到第二渠道下的中间源代码。
最后，所述计算机设备1对所述中间源代码进行编译，从而得到所述第二渠道下所述目标页面的源代码数据。
参阅图4，是本申请一示例性例子对源代码执行代码格式转换的流程效果图。
其中，所述计算机设备1获取源代码，然后根据预设的代码格式对源代码进行类型识别，当识别出其中的Vue类型，则进一步根据代码格式对Vue类型的源代码进行拆分，拆分后继续进行代码识别；从而最终识别出源代码中的HTML类型、JS类型和CSS类型的源代码；接着，通过HTML转换器、JS转换器和CSS转换器分别对HTML类型、JS类型和CSS类型的源代码进行代码格式转换；最终得到渠道适配代码，也就是需要进行页面显示的渠道对应的代码格式的中间源代码，以用于后续步骤的编译显示。
参阅图5，是本申请一示例性例子小程序页面代码生成的流程效果图。
在本实施例中，所示计算机设备1先识别出需要执行渠道的页面代码生成的目标渠道，然后将当前渠道的目标页面的源代码进行目标渠道的文件及目录映射；接着，启动编译过程，获取编译入口文件，也就是依次获取源代码中的各个组件的源代码的先后顺序，并在目标渠道下的目标页面与当前渠道下的目标页面存在差异化组件的情况下，注入适配渠道的组件和API；然后执行依赖收集，也就是收集所有组件的源代码的先后顺序和依赖关系；最后，再对源代码执行代码格式转换；最终输出渠道源代码。
在本实施例中，所述计算机设备1通过预设的框架规范(Vue.js)识别出当前渠道下的源代码的配置规范，包括：config-配置文件，API-api文件，Component-前端显示组件以及event-触发事件等等；在接收到当前渠道的源代码时，比如小程序源码A，则会依次识别出当前渠道的源代码的配置规范；然后执行预编译(Webpack+Loader)，包括条件编译和组件格式转换，其中，条件编译包括根据获取目标渠道下目标页面的页面组件和API接口，然后根据目标渠道小目标页面的页面组件与当前渠道下源代码中的包括页面组件和API的差异，执行组件和API适配和差异化磨平；最后，执行目标渠道下目标页面的源代码生成和编译，例如，对于当前渠道下目标页面的源代码的生成和编译，由于源代码并未改变，因此进行需要执行的NA Adapter，即规范汇总后进行编译；对于H5下目标页面的源代码生成和编译，其中，渠道差异性不大，也仅需要执行规范汇总后进行编译；而对于其他小程序，比如，微信，淘宝和QQ，则需要进一步执行配置校验和CSS校验，其中，配置校验包括对源代码中的App.vue，全局挂载，conf映射，组件映射和依赖包等相关文件的校验；对执行预编译后的源代码进行验证后才会进一步执行源代码的生成和编译步骤，最终经过Vue-mp转换后，才能得到适配与对应渠道下的目标页面的显示的源代码，以用于显示到对应渠道下的目标页面。
综上所述，本实施例所提出的小程序页面代码生成方法能够获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。本申请根据其他渠道页面与第一渠道页面之间的差异，对第一渠道对应的页面源代码执行相应的适配，从而使其可以应用到其他渠道页面，因此，能够有效提高将同一页面数据兼容到不同渠道的页面的效率。
实施例二
图6示意性示出了根据本申请实施例二的小程序页面代码生成装置的框图，该小程序页面代码生成装置可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
如图6所示，该小程序页面代码生成装置400可以包括获取模块410、查询模块420、比较模块430和编译模块440，其中：
获取模块410，用于获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合。
查询模块420，用于根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合。
比较模块430，用于比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合。
编译模块440，用于根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
在示例性的实施例中，获取模块410，还用于：将所述第一源代码数据对应的文件名和目录路径转换为符合第二渠道的源代码数据的命名和目录规范的文件名和目录路径；将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数。以及通过增加适配源代码的方式，将所述第一源代码数据的API接口以及源代码中的配置参数与第二渠道下的源代码数据的API接口和配置参数进行映射；所述API接口包括源代码数据中每一个页面组件的源代码的调用接口数据；所述配置参数包括源代码中的变量参数和返回值参数。
在示例性的实施例中，编译模块440，还用于：对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码；根据所述差异化组件集合在所述中间源代码中增加和/或删除对应的功能组件的源代码数据，得到第二渠道下的目标页面的代码数据。其中，所述对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码，包括：将所述第一源代码数据转换为抽象语法树；将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码；将已执行代码格式转换的抽象语法树恢复成源代码，得到第二渠道对应代码格式的中间源代码。
在示例性的实施例中，编译模块440，还用于：识别出所述抽象语法树上的目标节点对应的源代码的代码类型，所述目标节点为所述抽象语法树上的任一个节点；根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码。其中，所述代码类型包括Vue类型、HTML类型、JS类型和CSS类型中的至少一种；当所述代码类型为Vue类型时，所述根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码，包括：根据代码类型的代码格式将所述Vue类型的源代码进行拆分，从而得到其中包括的HTML类型、JS类型和CSS类型中的至少一种。
实施例三
图7示意性示出了根据本申请实施例三的适于实现小程序页面代码生成方法的计算机设备1的硬件架构示意图。本实施例中，计算机设备1是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是具有网关功能的机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图7所示，计算机设备1至少包括但不限于：可通过***总线相互通信链接存储器510、处理器520、网络接口530。其中：
存储器510至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器510可以是计算机设备1的内部存储模块，例如该计算机设备1的硬盘或内存。在另一些实施例中，存储器510也可以是计算机设备1的外部存储设备，例如该计算机设备1上配备的插接式硬盘，智能存储卡(SmartMedia Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器510还可以既包括计算机设备1的内部存储模块也包括其外部存储设备。本实施例中，存储器510通常用于存储安装于计算机设备1的操作***和各类应用软件，例如小程序页面代码生成方法的程序代码等。此外，存储器510还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器520在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器520通常用于控制计算机设备1的总体操作，例如执行与计算机设备1进行数据交互或者通信相关的控制和处理等。本实施例中，处理器520用于运行存储器510中存储的程序代码或者处理数据。
网络接口530可包括无线网络接口或有线网络接口，该网络接口530通常用于在计算机设备1与其他计算机设备之间建立通信链接。例如，网络接口530用于通过网络将计算机设备1与外部终端相连，在计算机设备1与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯***(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图7仅示出了具有部件510-530的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器510中的小程序页面代码生成方法的程序代码还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器520)所执行，以完成本申请实施例。
实施例四
本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作***和各类应用软件，例如实施例中小程序页面代码生成方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请实施例的优选实施例，并非因此限制本申请实施例的专利范围，凡是利用本申请实施例说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请实施例的专利保护范围内。
Claims (11)
1.一种小程序页面代码生成方法，其特征在于，所述方法包括：
获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；
根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；
比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；
根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
2.如权利要求1所述的小程序页面代码生成方法，其特征在于，在所述根据所述差异化组件集合对所述第一源代码数据进行适配编译之前，所述方法还包括：
将所述第一源代码数据对应的文件名和目录路径转换为符合第二渠道的源代码数据的命名和目录规范的文件名和目录路径；
将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数。
3.如权利要求2所述的小程序页面代码生成方法，其特征在于，所述将所述第一源代码数据的API接口以及源代码中的配置参数转换为符合第二渠道下的源代码数据的配置规范的API接口和配置参数，包括：
通过增加适配源代码的方式，将所述第一源代码数据的API接口以及源代码中的配置参数与第二渠道下的源代码数据的API接口和配置参数进行映射。
4.如权利要求1-3中任一项所述的小程序页面代码生成方法，其特征在于，所述API接口包括源代码数据中每一个页面组件的源代码的调用接口数据；所述配置参数包括源代码中的变量参数和返回值参数。
5.如权利要求1所述的小程序页面代码生成方法，其特征在于，所述根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的代码数据，包括：
对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码；
根据所述差异化组件集合在所述中间源代码中增加和/或删除对应的功能组件的源代码数据，得到第二渠道下的目标页面的代码数据。
6.如权利要求5所述的渠道包打包小程序页面代码生成方法，其特征在于，所述对所述第一源代码数据执行格式转换，得到第二渠道对应代码格式的中间源代码，包括：
将所述第一源代码数据转换为抽象语法树；
将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码；
将已执行代码格式转换的抽象语法树恢复成源代码，得到第二渠道对应代码格式的中间源代码。
7.如权利要求6所述的小程序页面代码生成方法，其特征在于，所述将所述抽象语法树上的每一个节点对应的源代码转换成第二渠道对应代码格式的适配代码，包括：
识别出所述抽象语法树上的目标节点对应的源代码的代码类型，所述目标节点为所述抽象语法树上的任一个节点；
根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码。
8.如权利要求7所述的小程序页面代码生成方法，其特征在于，
所述代码类型包括Vue类型、HTML类型、JS类型和CSS类型中的至少一种；
当所述代码类型为Vue类型时，所述根据所述代码类型调用对应代码类型的代码转换工具对所述目标节点对应的源代码进行代码格式转换，从而得到对应的适配代码，包括：
根据代码类型的代码格式将所述Vue类型的源代码进行拆分，从而得到其中包括的HTML类型、JS类型和CSS类型中的至少一种。
9.一种小程序页面代码生成装置，其特征在于，所述装置包括：
获取模块，用于获取第一渠道下目标页面的第一源代码数据和包括每一个页面组件的第一组件集合；
查询模块，用于根据预设的渠道页面组件清单查询出第二渠道下所述目标页面的包括每一个页面组件的第二组件集合；
比较模块，用于比较所述第二组件集合与所述第一组件集合之间的差异，得到差异化组件集合；
编译模块，用于根据所述差异化组件集合对所述第一源代码数据进行适配编译，得到第二渠道下的目标页面的源代码数据。
10.一种计算机设备，其特征在于，所述计算机设备包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1-8任一项所述的小程序页面代码生成方法的步骤。
11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序可被至少一个处理器执行，以使所述至少一个处理器执行如权利要求1-8中任一项所述的小程序页面代码生成方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110961819.4A CN113672224A (zh) | 2021-08-20 | 2021-08-20 | 小程序页面代码生成方法、装置及计算机设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110961819.4A CN113672224A (zh) | 2021-08-20 | 2021-08-20 | 小程序页面代码生成方法、装置及计算机设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113672224A true CN113672224A (zh) | 2021-11-19 |
Family
ID=78544587
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110961819.4A Pending CN113672224A (zh) | 2021-08-20 | 2021-08-20 | 小程序页面代码生成方法、装置及计算机设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113672224A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114185551A (zh) * | 2022-02-17 | 2022-03-15 | 浙江口碑网络技术有限公司 | 小程序的编译方法、小程序的运行方法及装置、存储介质 |
| CN114201236A (zh) * | 2021-12-14 | 2022-03-18 | 平安壹钱包电子商务有限公司 | 基于ast的组件配置的方法、装置、设备及介质 |
| CN114416084A (zh) * | 2021-12-31 | 2022-04-29 | 北京五八信息技术有限公司 | 一种数据处理方法、装置、电子设备及存储介质 |
| CN115904393A (zh) * | 2023-01-05 | 2023-04-04 | 拉扎斯网络科技（上海）有限公司 | 条件编译实现方法、装置、介质及设备 |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170139690A1 (en) * | 2015-11-16 | 2017-05-18 | Sap Se | Universal transcompiling framework |
| CN109947433A (zh) * | 2019-03-28 | 2019-06-28 | 优信拍（北京）信息科技有限公司 | 一种小程序的生成方法、更新方法及装置 |
| CN110580147A (zh) * | 2018-06-07 | 2019-12-17 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
| CN110968325A (zh) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | 一种小程序转换方法及装置 |
| CN111124576A (zh) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | 一种多平台小程序及h5页面适配的方法及*** |
| CN111381825A (zh) * | 2020-03-06 | 2020-07-07 | 北京五八信息技术有限公司 | 一种小程序的生成方法和装置 |
| CN111427583A (zh) * | 2020-04-12 | 2020-07-17 | 中信银行股份有限公司 | 组件的编译方法、装置和电子设备及计算机可读存储介质 |
| CN112527415A (zh) * | 2020-12-23 | 2021-03-19 | 深圳尚米网络技术有限公司 | 小程序跨平台迁移方法、装置、设备和介质 |
| CN113268234A (zh) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | 页面生成方法、装置、终端和存储介质 |
-
2021
- 2021-08-20 CN CN202110961819.4A patent/CN113672224A/zh active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170139690A1 (en) * | 2015-11-16 | 2017-05-18 | Sap Se | Universal transcompiling framework |
| CN110580147A (zh) * | 2018-06-07 | 2019-12-17 | 阿里巴巴集团控股有限公司 | 一种应用程序的开发方法和装置 |
| CN109947433A (zh) * | 2019-03-28 | 2019-06-28 | 优信拍（北京）信息科技有限公司 | 一种小程序的生成方法、更新方法及装置 |
| CN110968325A (zh) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | 一种小程序转换方法及装置 |
| CN111124576A (zh) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | 一种多平台小程序及h5页面适配的方法及*** |
| CN111381825A (zh) * | 2020-03-06 | 2020-07-07 | 北京五八信息技术有限公司 | 一种小程序的生成方法和装置 |
| CN111427583A (zh) * | 2020-04-12 | 2020-07-17 | 中信银行股份有限公司 | 组件的编译方法、装置和电子设备及计算机可读存储介质 |
| CN112527415A (zh) * | 2020-12-23 | 2021-03-19 | 深圳尚米网络技术有限公司 | 小程序跨平台迁移方法、装置、设备和介质 |
| CN113268234A (zh) * | 2021-05-17 | 2021-08-17 | 北京三快在线科技有限公司 | 页面生成方法、装置、终端和存储介质 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114201236A (zh) * | 2021-12-14 | 2022-03-18 | 平安壹钱包电子商务有限公司 | 基于ast的组件配置的方法、装置、设备及介质 |
| CN114416084A (zh) * | 2021-12-31 | 2022-04-29 | 北京五八信息技术有限公司 | 一种数据处理方法、装置、电子设备及存储介质 |
| CN114185551A (zh) * | 2022-02-17 | 2022-03-15 | 浙江口碑网络技术有限公司 | 小程序的编译方法、小程序的运行方法及装置、存储介质 |
| CN115904393A (zh) * | 2023-01-05 | 2023-04-04 | 拉扎斯网络科技（上海）有限公司 | 条件编译实现方法、装置、介质及设备 |
| CN115904393B (zh) * | 2023-01-05 | 2023-06-30 | 拉扎斯网络科技（上海）有限公司 | 条件编译实现方法、装置、介质及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113672224A (zh) | 小程序页面代码生成方法、装置及计算机设备 | |
| CN109032662B (zh) | 代码文件生成方法、装置、计算机设备和存储介质 | |
| CN108388454B (zh) | 动态提供兼容js脚本内容的方法、装置和终端设备 | |
| CN109766099B (zh) | 前端源码编译方法、装置、存储介质及计算机设备 | |
| CN110308999B (zh) | 一种应用间动态共享依赖包的方法、存储介质及移动终端 | |
| CN108647032B (zh) | 应用加载方法及装置、计算机装置和计算机可读存储介质 | |
| CN107797823B (zh) | 业务规则管理方法、装置、存储介质和计算机设备 | |
| CN110175157B (zh) | 一种列存储文件的查询方法及查询装置 | |
| CN112527415A (zh) | 小程序跨平台迁移方法、装置、设备和介质 | |
| CN109062906B (zh) | 程序语言资源的翻译方法及装置 | |
| CN112612982A (zh) | 网页预加载方法、装置及计算机设备 | |
| KR101117165B1 (ko) | 이기종 운영체제 계층 모듈에서 동작하는 웹기반어플리케이션의 연동이 가능한 모바일 단말기용 웹 플랫폼 유닛 | |
| US9411618B2 (en) | Metadata-based class loading using a content repository | |
| CN112422450A (zh) | 计算机设备、服务请求的流量控制方法及装置 | |
| CN111506368A (zh) | 对异步调用转同步调用的方法、装置、设备及存储介质 | |
| CN114647422A (zh) | 一种车辆电子控制单元刷写方法、装置、设备和介质 | |
| CN112214250A (zh) | 一种应用程序组件的加载方法和装置 | |
| CN113535206B (zh) | 多版本代码升级方法及*** | |
| CN114003210A (zh) | 基于sdk的多应用程序适配方法、装置、设备及介质 | |
| CN111273940B (zh) | 将程序文件上传至代码仓库的方法及装置 | |
| CN112783500B (zh) | 编译优化信息生成方法、装置及电子设备 | |
| CN112416383A (zh) | golang程序热更新方法、装置以及计算机设备 | |
| CN113129049B (zh) | 用于模型训练和应用的文件配置方法和*** | |
| CN114840217A (zh) | 一种编译方法、装置、设备及可读存储介质 | |
| CN111273944B (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 |