CN111290757B - 基于Weex的在线代码编译方法、装置及设备 - Google Patents

Abstract

本发明实施例提供一种基于Weex的在线代码编译方法、装置及设备，方法包括：获取用户输入的代码信息；在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，第一目标DSL支持Weex框架；利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果。通过在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，第一目标DSL支持Weex框架，实现了对与代码信息相对应的DSL的横向拓展，适用于多种类型DSL的代码信息的编译，而后利用编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果，从而有效地提高了该编译方法的适用范围和使用的灵活程度。

Description

基于Weex的在线代码编译方法、装置及设备

技术领域

本发明涉及互联网技术领域，尤其涉及一种基于Weex的在线代码编译方法、装置及设备。

背景技术

Weex是使用Web开发体验而来的高性能原生应用的框架，其原理是通过模板化JavaScript编写由Weex定义的平台独立的页面渲染规则，通过webpack编译为标准的JavaScript脚本文件，并嵌入到集成了Weex SDK的移动应用中。Weex框架能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出原生应用级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。

然而，现有的基于Weex框架的编译平台只能针对某一个特定领域语言，例如：Vue领域语言或者Rax领域语言，功能涵盖面比较窄。

发明内容

本发明实施例提供一种基于Weex的在线代码编译方法、装置及设备，用以拓展在线编码功能的适用范围。

第一方面，本发明实施例提供一种基于Weex的在线代码编译方法，包括：

获取用户输入的代码信息；

在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL，其中，所述第一目标DSL支持Weex框架；

利用与所述第一目标DSL相对应的编译方法对所述代码信息进行编译，获得可运行在所述Weex框架中的编译结果。

第二方面，本发明实施例提供一种基于Weex的在线代码编译装置，包括：

第一获取模块，用于获取用户输入的代码信息；

第一确定模块，用于在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL，其中，所述第一目标DSL支持Weex框架；

第一编译模块，用于利用与所述第一目标DSL相对应的编译方法对所述代码信息进行编译，获得可运行在所述Weex框架中的编译结果。

第三方面，本发明实施例提供一种电子设备，包括：存储器、处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行时实现上述第一方面中的基于Weex的在线代码编译方法。

本发明实施例提供了一种计算机存储介质，用于储存计算机程序，所述计算机程序使计算机执行时实现上述第一方面中的基于Weex的在线代码编译方法。

通过获取用户输入的代码信息，并在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，第一目标DSL支持Weex框架，实现了对与代码信息相对应的DSL的横向拓展，进而可以适用于多种类型DSL的代码信息的编译，在确定第一目标DSL之后，可以利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果，在保证了对代码信息编译的准确性的同时，有效地提高了该编译方法的适用范围和使用的灵活程度，有利于市场的推广与应用。

第四方面，本发明实施例提供一种基于Weex的在线代码编译方法，包括：

获取用户输入的代码片段，所述代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀；

在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，其中，所述第二目标DSL支持Weex框架；

利用与所述第二目标DSL相对应的编译方法对所述代码片段进行编译，获得可运行在所述Weex框架中的目标代码；

将所述目标代码发送至服务器进行存储。

第五方面，本发明实施例提供一种基于Weex的在线代码编译装置，包括：

第二获取模块，用于获取用户输入的代码片段，所述代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀；

第二确定模块，用于在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，其中，所述第二目标DSL支持Weex框架；

第二编译模块，用于利用与所述第二目标DSL相对应的编译方法对所述代码片段进行编译，获得可运行在所述Weex框架中的目标代码；

发送模块，用于将所述目标代码发送至服务器进行存储。

第六方面，本发明实施例提供一种电子设备，该电子设备包括第一处理器和第一存储器，所述第一存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述第一处理器执行时实现上述第四方面中的基于Weex的在线代码编译方法。

本发明实施例提供了一种计算机存储介质，用于储存计算机程序，所述计算机程序使计算机执行时实现上述第四方面中的基于Weex的在线代码编译方法。

通过获取用户输入的代码片段，并在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL，第二目标DSL支持Weex框架，实现了对与代码片段相对应的DSL的横向拓展，进而可以适用于多种类型DSL的代码片段的编译，在确定第二目标DSL之后，可以利用与第二目标DSL相对应的编译方法对代码片段进行编译，获得可运行在Weex框架中的目标代码，在保证了对代码片段编译的准确性的同时，有效地提高了该编译方法的适用范围和使用的灵活程度，另外，将目标代码发送至服务器端进行存储，实现了对打包文件的持久化存储，可以提供稳定的预览能力，进而提高了该方法使用的稳定可靠性，有利于市场的推广与应用。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种基于Weex的在线代码编译方法的流程图；

图2为本发明实施例提供的利用与所述第一目标DSL相对应的编译方法对所述第二代码信息进行编译，获得可运行在所述Weex框架中的打包文件的流程图；

图3为本发明实施例提供的第一提供的利用与所述第一目标DSL相对应的编译方法对所述代码文件进行拼装打包的流程图；

图4为本发明实施例提供的另一种基于Weex的在线代码编译方法的流程图；

图5为本发明实施例提供的在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL的示意图；

图6为本发明应用实施例提供的在线代码编译方法的服务系统的结构示意图；

图7为本发明实施例提供的另一种基于Weex的在线代码编译方法的示意图；

图8为本发明实施例提供的又一种基于Weex的在线代码编译方法的示意图；

图9为本发明实施例提供的在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL的流程图；

图10为本发明实施例提供的一种基于Weex的在线代码编译装置的结构示意图；

图11为与图10所示实施例提供的基于Weex的在线代码编译装置对应的电子设备的结构示意图；

图12为本发明实施例提供的另一种基于Weex的在线代码编译装置的结构示意图；

图13为与图12所示实施例提供的基于Weex的在线代码编译装置对应的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

图1为本发明实施例提供的一种基于Weex的在线代码编译方法的流程图；如图1所示：本实施例提供了一种基于Weex的在线代码编译方法，该方法的执行主体可以为基于Weex的在线代码编译装置，具体的在线代码编译装置可以为服务器，在服务器执行该编译方法时，可以有效地拓展在线编码功能的适用范围，具体的，该方法可以包括：

S101：获取用户输入的代码信息。

其中，代码信息可以为用于以下所列中的一种或任意结合的第一代码信息：用户测试、问题调试、创新例、学习沉淀，此时的第一代码信息的编辑格式较为固定，并且第一代码信息的文件个数为有限个；举例来说，第一代码信息的编辑格式可以为JSX代码、JS代码或者CSS代码，第一代码信息的文件个数可以为预设的1个、2个或者其他个数等等。

另外，代码信息还可以为用于示例项目的第二代码信息，此时的第二代码信息的编辑格式不限定，并且，第二代码信息的文件个数可以任意扩展，举例来说，第二代码信息的编辑格式可以为.vue格式或者.rax格式，第二代码信息的文件格式可以为一个或者多个，例如：第二代码信息包括：a.vue、b.vue、c.vue、app.vue等等。

可以理解的是，第一代码信息和第二代码信息的编辑格式和文件个数并不限于上述举例说明，在此不再赘述。

此外，在获取用户输入的代码信息时，可以向用户显示用于输入代码信息的窗口，从而可以通过窗口直接获取用户输入的代码信息，窗口可以为附图6所示的实时编译代码区域，用户可以在实时编译代码区域中直接输入相应的代码信息；或者，在获取用户输入的代码信息时，还可以向用户显示用于接收代码信息的端口或者接口，用户可以通过端口或者接口发送或者传输代码信息。当然的，本领域技术人员也可以采用其他的方式来获取用户输入的代码信息，只要能够保证代码信息获取的准确性即可，在此不再赘述。

可选的，在用户输入代码信息时，可以预先选择代码信息的文件类型(第一代码信息或者第二代码信息)；举例来说，在用户通过窗口直接输入代码信息时，在窗口上可以设置有用于供用户选择文件类型的图标或者接口，用户可以通过对图标或者接口执行相应的选择或者确认信息，例如：执行点选、滑动、拖动或者输入相应指令等选择或者确认信息，从而来选择并确定输入代码信息的文件类型。或者，在用户通过端口或者接口发送或者传输代码信息时，在传输代码信息的过程中或者传输代码信息完毕后，可以向用户发送用于确定代码信息的文件类型的显示窗口，通过接收用户在显示窗口中输入的执行操作来确定代码信息的文件类型，其中，输入的执行操作包括：点选、拖动或者输入相应指令等等。

S102：在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，其中，第一目标DSL支持Weex框架。

其中，多个领域专用语言(Domain Specified Language，简称DSL)可以包括：Vue、Rax、Reat、HTML、Shell、make语言、ant语言、maven语言、rpm语言、dpkg语言、awk语言等等；此外，需要说明的是，多个DSL还可以包括小程序，例如：Weex上层二方小程序、Weex上层三方小程序、应用软件小程序等等。由于第一目标DSL可以为多个DSL中的任意之一，从而有效地拓展了第一目标DSL的可选择范围，进而提高了该方法的适用性。具体的，参考附图5所示，在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL时，包括以下步骤：

S1021：获取用户输入的第一指令信息。

其中，第一指令信息可以为针对多个DSL所执行的操作信息，所执行的操作信息可以包括：执行点选、滑动、拖动或者输入相应指令等等。

S1022：在多个DSL中，将与第一指令信息相对应的DSL确定为与代码信息相对应的第一目标DSL。

在获取到第一指令信息之后，可以将与该第一指令信息相对应的DSL确定为与代码信息相对应的第一目标DSL；举例来说，在第一指令信息为点选操作时，可以将用户执行点选操作所选中的DSL确定为第一目标DSL；在第一指令信息为输入多个DSL中某个DSL的编号信息时，例如，DSL 05，则可以将多个DSL中与该编号信息05相对应DSL确定为第一目标DSL。

当然的，本领域技术人员还可以采用其他的方式来确定与代码信息相对应的第一目标DSL，只要能够保证与代码信息相对应的第一目标DSL确定的准确可靠性即可，在此不再赘述。

S103：利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果。

其中，不同的DSL对应有不同的编译方法，在确定与代码信息相对应的第一目标DSL之后，可以利用预设的DSL与编译方法的映射关系来确定与第一目标DSL相对应的编译方法，进而可以利用与第一目标DSL相对应的编译方法对代码信息进行编译，从而获得可运行在Weex框架中的编译结果。

举例来说，以.vue格式的代码信息为例进行说明，用户可以在附图6中的实时编译代码区域输入.vue的代码信息，具体的，代码信息可以为如下信息：

<template>

<div style＝"justify-content:center">

<text class＝"freestyle">Patent</text>

</div>

</template>

<style scoped>

.freestyle{color:#41B883；font-size:233px；text-align:center；}

</style>。

在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL为Vue框架时，可以利用与Vue框架相对应的编译方法对上述代码信息进行编译，进而可以获取到可运行在Weex框架中的编译结果为“颜色为#41B883，大小为233px，位置为中央位置的文本内容Patent”，并且，该编译结果可以在附图6中的预览界面进行显示。

本实施例提供的基于Weex的在线代码编译方法，通过获取用户输入的代码信息，并在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，第一目标DSL支持Weex框架，实现了对与代码信息相对应的DSL的横向拓展，进而可以适用于多种类型DSL的代码信息的编译，在确定第一目标DSL之后，可以利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果，在保证了对代码信息编译的准确性的同时，有效地提高了该编译方法的适用范围和使用的灵活程度，有利于市场的推广与应用。

进一步的，在代码信息的文件类型是第一代码信息时，利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果，可以包括：

S1031：利用与第一目标DSL相对应的编译方法对第一代码信息进行编译，获得可运行在Weex框架中的目标代码。

目标代码可以为支持Weex环境的bundle代码，该bundle代码不仅可以支持Weex的客户端能力，也可以使用原生浏览器进行渲染，支持Weex小程序的编译。其中，在使用原生浏览器进行渲染时，可以针对所获取的目标代码(bundle代码)在原生浏览器中直接渲染出真实页面，而所渲染出的真实页面可以与客户端浏览效果相一致，实现了对编译结果进行预览。

可以理解的是，本实施例中的目标代码并不限于上述举例说明的bundle代码，还可以为其他可以运行在Weex框架中的代码，在此不再赘述。

进一步的，在获得可运行在Weex框架中的目标代码之后，本实施例中的方法还可以包括：

S1032：将目标代码存储至数据库中。

由于获得目标代码的编译过程是在服务器中的缓存中实现的，为了方便用户对目标代码进行查看、调取以及后续进行数据运营和数据分析的方便程度，可以将目标代码存储至数据库中。

另外，在代码信息的文件类型是第二代码信息时，利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果，可以包括：

S1033：利用与第一目标DSL相对应的编译方法对第二代码信息进行编译，获得可运行在Weex框架中的打包文件。

其中，打包文件可以为支持Weex环境的zip包文件。具体的，在获取用户输入的代码信息之后，方法还包括：将代码信息写入至缓存，该缓存为服务器端预先设置的用于存储代码信息和/或代码编译流程的缓存。

进一步的，参考附图2-3可知，利用与第一目标DSL相对应的编译方法对第二代码信息进行编译，获得可运行在Weex框架中的打包文件可以包括：

S10331：在缓存中创建与第二代码信息相对应的代码文件。

其中，与第二代码信息相对应的代码文件可以为.js文件，举例来说，当第二代码信息所对应的第一目标DSL为小程序时，可以在缓存中创建与小程序相关的代码文件，例如：app.js、page.js等等。

当然的，与第二代码信息相对应的代码文件并不限于上述举例说明，本领域技术人员还可以根据具体的设计需求选择其他格式的代码文件，在此不再赘述。

S10332：利用与第一目标DSL相对应的编译方法对代码文件进行拼装打包，获得可运行在Weex框架中的打包文件。

在创建与第二代码信息相对应的代码文件之后，可以利用与第一目标DSL相对应的编译方法对代码文件进行拼装打包，具体的，利用与第一目标DSL相对应的编译方法对代码文件进行拼装打包可以包括：

S103321：获取与代码文件相对应的渲染方式。

其中，渲染方式是指在Weex框架中对于代码文件的渲染的约定规范，其可以包括打包规则、文件的目录组织等等；也即，该渲染方式用于对代码文件的打包过程进行约束。

S103322：利用与第一目标DSL相对应的编译方法按照渲染方式对代码文件进行拼装打包。

在获取到渲染方式之后，可以在用户无感知的情况下，实现对代码文件的拼装打包过程，举例来说，如果用户想要渲染小程序，可以利用上述编译方法、并按照预设的渲染方式对小程序所对应的代码文件进行拼装打包，使得用户可以获得满足预设渲染方式、且可预览的页面。

进一步的，在获得可运行在Weex框架中的打包文件之后，本实施例中的方法还可以包括：

S1034:将打包文件存储至阿里云的对象存储服务OSS中。

由于获得打包文件的编译过程是在服务器中的缓存中实现的，而打包文件的功能比较综合，因此，为了方便用户对打包文件进行查看或者调取，可以将打包文件存储至阿里云的对象存储服务OSS中。

通过上述方式实现对不同的代码信息进行不同的编译过程，并且可以获取到不同的编译结果，如对第一代码信息进行编译后，获得的是可运行在Weex框架中的目标代码；而对第二代码信息进行编译后，获得的是可运行在Weex框架中的打包文件，可以满足用户的不同编译需求，从而有效地提高了该编译方法的实用性。

图4为本发明实施例提供的另一种基于Weex的在线代码编译方法的流程图；在上述任意一个实施例的基础上，继续参考附图4可知，本实施例中的方法还包括：

S201：获取用户确定的第一展示场景。

其中，第一展示场景用于展示对代码信息进行编译后所获取的编译结果；该第一展示场景可以包括web展示场景和Weex展示场景。在获取用户确定的第一展示场景时，用户可以在预设的多个展示场景中执行相应的操作信息，将与该操作信息相对应的展示场景确定为第一展示场景，上述的操作信息可以包括：点选操纵、滑动操作或者输入的指令信息等等。

S202：利用第一展示场景显示可运行在Weex框架中的编译结果。

在获取到第一展示场景之后，可以将编译结果在第一展示场景中进行展示，以使得用户可以直观地预览到编译结果。

具体应用时，以服务器作为执行主体、以第二代码信息作为代码信息为例进行说明，编译方法包括以下步骤：

(1)服务端接收用户写入的第二代码信息；

如图6所示，用户可以在实时编译代码区域输入相应的第二代码信息；此外，该服务端提供了用于实现最基本的编译和预览能力的playground编译环境，playground编译环境主要依赖babel webpack等开源技术实现。举例来说，playground编译环境包括Rax前端编译、Vue服务端编译和Weex小程序前端编译等等；此外，playground编译环境的上层根据不同的应用场景和DSL展示不同的编辑器，例如：Rax playground的编译器对应编译出来的是Rax代码片段；Vue playground的编译器对应编译出来的是Vue代码片段；小程序playground的编译器对应编译出来的是Weex小程序片段。需要说明的是，该playground编译环境可以为适应未来更多Weex场景和特性进行灵活扩充服务能力；具体的，可以利用webpack进行不同DSL构建逻辑的支持，以更加稳定的能力提供给用户。

(2)将第二代码信息存储至缓存；并确定第二代码信息的第一目标DSL；

(3)在缓存中创建第二代码信息相关的代码文件例如app.js、page.js等；

(4)利用与第一目标DSL相对应的编译方法对上述代码文件进行拼装打包，在缓存中获得可运行在Weex框架中的打包文件；

(5)对打包文件进行存储，具体的，将打包文件存入OSS；

(6)按照预设的方式预览打包文件，实现在线预览服务，具体的，可以通过附图6中的预览界面实现对在线预览服务。

本实施例中，通过将打包文件存入OSS，实现了对打包文件的持久化存储，可以提供稳定的预览能力。另外，需要说明的是，服务器中的编译能力目前也不仅限于Weex的上层体系，对社区开源项目也能支持在线的构建和预览，例如社区优秀前端框架react、jquery，社区成熟的小程序方案微信小程序、支付宝小程序，都可以做到支持编译。此外，该在线代码编译方法具有灵活的扩充机制，对于Weex的发展与更新可以做到及时的更新与支持，编译能力为基础的上层服务，还可以提供给三方网站、企业、个人用户等提供稳定的代码片段编译能力，对于Weex的推广、企业前端开源产品的宣传都起到一定作用，对社区也是一种回馈和贡献。

图7为本发明实施例提供的另一种基于Weex的在线代码编译方法的示意图；参考附图7所示，本实施例提供了另一种基于Weex的在线代码编译方法，该方法的执行主体可以为基于Weex的在线代码编译装置，具体的，在线代码编译装置可以为客户端，在客户端执行该编译方法时，可以有效地拓展在线编码功能的适用范围，具体的，该方法可以包括：

S301：获取用户输入的代码片段，代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀。

其中，代码片段的编辑格式较为固定，并且代码片段的文件个数为有限个；举例来说，代码片段的编辑格式可以为JSX代码、JS代码或者CSS代码，代码片段的文件个数可以为1个、2个或者其他个数等等。可以理解的是，代码片段的编辑格式和文件个数并不限于上述举例说明，在此不再赘述。

此外，在获取用户输入的代码片段时，可以向用户显示用于输入代码片段的窗口，从而可以通过窗口直接获取用户输入的代码片段，窗口可以为附图6所示的实时编译代码区域，用户可以在实时编译代码区域中直接输入相应的代码片段；或者，在获取用户输入的代码片段时，还可以向用户显示用于接收代码片段的端口或者接口，用户可以通过端口或者接口发送或者传输代码片段。当然的，本领域技术人员也可以采用其他的方式来获取用户输入的代码片段，只要能够保证代码片段获取的准确性即可，在此不再赘述。

S302：在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL，其中，第二目标DSL支持Weex框架。

其中，多个领域专用语言DSL可以包括：Vue、Rax、Reat、HTML、Shell、make语言、ant语言、maven语言、rpm语言、dpkg语言、awk语言等等；由于第二目标DSL可以为多个DSL中的任意之一，从而有效地拓展了第二目标DSL的可选择范围，进而提高了该方法的适用性。具体的，参考附图9所示，在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL时，包括以下步骤：

S3021：获取用户输入的第二指令信息。

其中，第二指令信息可以为针对多个DSL所执行的操作信息，所执行的操作信息可以包括：执行点选、滑动、拖动或者输入相应指令等等。

S3022：在多个DSL中，将与第二指令信息相对应的DSL确定为与代码片段相对应的第二目标DSL。

在获取到第二指令信息之后，可以将与该第二指令信息相对应的DSL确定为与代码片段相对应的第二目标DSL；举例来说，在第二指令信息为点选操作时，可以将用户执行点选操作所选中的DSL确定为第二目标DSL；在第二指令信息为输入多个DSL中某个DSL的编号信息时，例如，DSL 07，则可以将多个DSL中与该编号信息07相对应DSL确定为第二目标DSL。

当然的，本领域技术人员还可以采用其他的方式来确定与代码片段相对应的第二目标DSL，只要能够保证与代码片段相对应的第二目标DSL确定的准确可靠性即可，在此不再赘述。

S303：利用与第二目标DSL相对应的编译方法对代码片段进行编译，获得可运行在Weex框架中的目标代码；

其中，不同的DSL对应有不同的编译方法，因此，在确定与代码片段相对应的第二目标DSL之后，可以利用预设的DSL与编译方法的映射关系来确定与第二目标DSL相对应的编译方法，进而可以利用与第二目标DSL相对应的编译方法对代码片段进行编译，从而获得可运行在Weex框架中的目标代码。

S304：将目标代码发送至服务器进行存储。

目标代码可以为支持Weex环境的bundle代码，该bundle代码不仅可以支持Weex的客户端能力，也可以使用原生浏览器进行渲染，支持Weex小程序的编译。其中，在使用原生浏览器进行渲染时，可以针对所获取的目标代码(bundle代码)在原生浏览器中直接渲染出真实页面，而所渲染出的真实页面可以与客户端浏览效果相一致，实现了对编译结果进行预览。

可以理解的是，本实施例中的目标代码并不限于上述举例说明的bundle代码，还可以为其他可以运行在Weex框架中的代码，在此不再赘述。

在客户端获得目标代码之后，可以将目标代码存储至预设的数据库中，而为了实现对目标代码的持久性存储，并且，客户端与服务端通信连接，此时，在客户端获取到目标代码之后，可以将目标代码发送至服务器进行存储。

可以理解的是，本实施例中的S304可以根据用户的需求选择性执行；当用户不需要对目标代码进行存储时，可以不执行步骤S304，此时，本实施例中的基于Weex的在线代码编译方法包括步骤S301-S303；当用户需要对目标代码进行存储时，则可以执行步骤S304，此时，本实施例中的基于Weex的在线代码编译方法包括步骤S301-S304。

本实施例提供的基于Weex的在线代码编译方法，通过获取用户输入的代码片段，并在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL，第二目标DSL支持Weex框架，实现了对与代码片段相对应的DSL的横向拓展，进而可以适用于多种类型DSL的代码片段的编译，在确定第二目标DSL之后，可以利用与第二目标DSL相对应的编译方法对代码片段进行编译，获得可运行在Weex框架中的目标代码，在保证了对代码片段编译的准确性的同时，有效地提高了该编译方法的适用范围和使用的灵活程度，另外，将目标代码发送至服务器端进行存储，实现了对打包文件的持久化存储，可以提供稳定的预览能力，进而提高了该方法使用的稳定可靠性，有利于市场的推广与应用。

可选地，在获取用户输入的代码片段之后，方法还包括：将代码片段写入至缓存，该缓存为客户端预先设置的用于存储代码信息和/或代码编译流程的缓存。

可选地，参考附图8所示，本实施例中的方法还包括：

S401：获取用户确定的第二展示场景。

其中，第二展示场景用于展示对代码片段进行编译后所获取的目标代码；该第二展示场景可以包括web展示场景和Weex展示场景。在获取用户确定的第二展示场景时，用户可以在预设的多个展示场景中执行相应的操作信息，将与该操作信息相对应的展示场景确定为第二展示场景，上述的操作信息可以包括：点选操纵、滑动操作或者输入的指令信息等等。

S402：利用第二展示场景显示可运行在Weex框架中的目标代码。

在获取到第二展示场景之后，可以将目标代码在第二展示场景中进行展示，以使得用户可以直观地预览到编译结果。

具体应用时，以客户端作为执行主体为例进行说明，编译方法包括以下步骤：

(1)客户端接收用户写入的代码片段；

如图6所示，用户可以在实时编译代码区域输入相应的代码片段；此外，该客户端提供了用于实现最基本的编译和预览能力的playground编译环境，playground编译环境主要依赖babel webpack等开源技术实现。举例来说，playground编译环境包括Rax前端编译、Vue服务端编译和Weex小程序前端编译等等；此外，playground编译环境的上层根据不同的应用场景和DSL展示不同的编辑器，例如：Rax playground的编译器对应编译出来的是Rax代码片段；Vue playground的编译器对应编译出来的是Vue代码片段；小程序playground的编译器对应编译出来的是Weex小程序片段。需要说明的是，该playground编译环境可以为适应未来更多Weex场景和特性进行灵活扩充服务能力；具体的，可以利用webpack进行不同DSL构建逻辑的支持，以更加稳定的能力提供给用户。

(2)将代码片段存储至缓存；并确定代码片段的第二目标DSL；

(3)在缓存中对代码片段进行babel处理(JSX转换、ES6转换等)；

(4)利用与第二目标DSL相对应的编译方法对上述处理后的代码片段进行拼装打包，在缓存中获得可运行在Weex框架中的目标代码；

(5)将目标代码发送至服务器端进行存储，具体的，服务器将目标代码存入预设的数据库；

(6)按照预设的方式预览目标代码，实现在线预览服务，具体的，可以通过附图6中的预览界面实现对在线预览服务。

本实施例中，将目标代码发送至服务器端进行存储，实现了对打包文件的持久化存储，可以提供稳定的预览能力。另外，在具体应用时，用户可编辑的代码片段可以在浏览器里运行、也可以在手机指定的支持Weex客户端中运行，而现有的片段编辑工具一般不会考虑制定客户端而是h5页面的预览能力，不仅提高了用户使用的方便程度，同时也拓展了该方法的适用范围。

以下将详细描述本发明的一个或多个实施例的基于Weex的在线代码编译装置。本领域技术人员可以理解，这些基于Weex的在线代码编译装置均可使用市售的硬件组件通过本方案所教导的步骤进行配置来构成。

图10为本发明实施例提供的一种基于Weex的在线代码编译装置的结构示意图；参考附图10所示，本实施例提供了一种基于Weex的在线代码编译装置，该装置可以执行上述的基于Weex的在线代码编译方法，具体的，该在线代码编译装置包括：第一获取模块11、第一确定模块12以及第一编译模块13。具体的，第一获取模块11、第一确定模块12以及第一编译模块13可以执行如下步骤：

第一获取模块11，用于获取用户输入的代码信息；

第一确定模块12，用于在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，其中，第一目标DSL支持Weex框架；

第一编译模块13，用于利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果。

其中，代码信息为用于进行以下所列中的一种或任意结合的第一代码信息：用户测试、问题调试、创新例、学习沉淀；或者，代码信息为用于示例项目的第二代码信息。

可选地，在第一编译模块13利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果时，第一编译模块13还用于：利用与第一目标DSL相对应的编译方法对第一代码信息进行编译，获得可运行在Weex框架中的目标代码；或者，利用与第一目标DSL相对应的编译方法对第二代码信息进行编译，获得可运行在Weex框架中的打包文件。

可选地，第一编译模块13还用于在获取用户输入的代码信息之后，将代码信息写入至缓存。

可选地，在第一编译模块13利用与第一目标DSL相对应的编译方法对第二代码信息进行编译，获得可运行在Weex框架中的打包文件时，第一编译模块13用于：在缓存中创建与第二代码信息相对应的代码文件；利用与第一目标DSL相对应的编译方法对代码文件进行拼装打包，获得可运行在Weex框架中的打包文件。

其中，在第一编译模块13利用与第一目标DSL相对应的编译方法对代码文件进行拼装打包时，第一编译模块13用于：获取与代码文件相对应的渲染方式；利用与第一目标DSL相对应的编译方法按照渲染方式对代码文件进行拼装打包。

可选地，第一编译模块13还用于：将目标代码存储至数据库中；或者，将打包文件存储至阿里云的对象存储服务OSS中。

可选地，第一获取模块11，还用于获取用户确定的第一展示场景；

第一编译模块13还用于：利用第一展示场景显示可运行在Weex框架中的编译结果。

图10所示装置可以执行图1-图6所示实施例的方法，本实施例未详细描述的部分，可参考对图1-图6所示实施例的相关说明。该技术方案的执行过程和技术效果参见图1-图6所示实施例中的描述，在此不再赘述。

在一个可能的设计中，图10所示基于Weex的在线代码编译装置的结构可实现为一电子设备，该电子设备可以是手机、平板电脑、服务器等各种设备。如图11所示，该电子设备可以包括：第一处理器21和第一存储器22。其中，第一存储器22用于存储支持电子设备执行上述图1-图6所示实施例中提供的基于Weex的在线代码编译方法的程序，第一处理器21被配置为用于执行第一存储器22中存储的程序。

程序包括一条或多条计算机指令，其中，一条或多条计算机指令被第一处理器21执行时能够实现如下步骤：

获取用户输入的代码信息；

在多个领域专用语言DSL中确定与代码信息相对应的第一目标DSL，其中，第一目标DSL支持Weex框架；

利用与第一目标DSL相对应的编译方法对代码信息进行编译，获得可运行在Weex框架中的编译结果。

可选地，第一处理器21还用于执行前述图1-图6所示实施例中的全部或部分步骤。

其中，电子设备的结构中还可以包括第一通信接口23，用于电子设备与其他设备或通信网络通信。

另外，本发明实施例提供了一种计算机存储介质，用于储存电子设备所用的计算机软件指令，其包含用于执行上述图1-图6所示方法实施例中基于Weex的在线代码编译方法所涉及的程序。

图12为本发明实施例提供的另一种基于Weex的在线代码编译装置的结构示意图；参考附图12所示，本实施例提供了另一种基于Weex的在线代码编译装置，包括：第二获取模块31、第二确定模块32、第二编译模块33和发送模块34。具体的，第二获取模块31、第二确定模块32、第二编译模块33和发送模块34可以执行如下步骤：

第二获取模块31，用于获取用户输入的代码片段，代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀；

第二确定模块32，用于在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL，其中，第二目标DSL支持Weex框架；

第二编译模块33，用于利用与第二目标DSL相对应的编译方法对代码片段进行编译，获得可运行在Weex框架中的目标代码；

发送模块34，用于将目标代码发送至服务器进行存储。

可选地，第二编译模块33还用于在获取用户输入的代码片段之后，将代码片段写入至缓存。

可选地，第二获取模块31还用于获取用户确定的第二展示场景；

第二编译模块33还用于利用第二展示场景显示可运行在Weex框架中的目标代码。

在第二编译模块33在多个领域专用语言DSL中确定与代码片段相对应的第二目标DSL时，第二编译模块33用于：获取用户输入的第二指令信息；在多个DSL中，将与第二指令信息相对应的DSL确定为与代码片段相对应的第二目标DSL。

图12所示装置可以执行图7-图9所示实施例的方法，本实施例未详细描述的部分，可参考对图7-图9所示实施例的相关说明。该技术方案的执行过程和技术效果参见图7-图9所示实施例中的描述，在此不再赘述。

在一个可能的设计中，图12所示基于Weex的在线代码编译装置的结构可实现为一电子设备，该电子设备可以是诸如手机、平板电脑、服务器等设备。如图13所示，该电子设备可以包括：第二处理器41和第二存储器42。其中，所述第二存储器42用于存储支持电子设备执行上述图7-图9所示实施例中提供的基于Weex的在线代码编译方法的程序，所述第二处理器41被配置为用于执行所述第二存储器42中存储的程序。

所述程序包括一条或多条计算机指令，其中，所述一条或多条计算机指令被所述第二处理器41执行时能够实现如下步骤：

获取用户输入的代码片段，所述代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀；

在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，其中，所述第二目标DSL支持Weex框架；

利用与所述第二目标DSL相对应的编译方法对所述代码片段进行编译，获得可运行在所述Weex框架中的目标代码；

将所述目标代码发送至服务器进行存储。

可选地，所述第二处理器41还用于执行前述图7-图9所示实施例中的全部或部分步骤。

其中，所述电子设备的结构中还可以包括第二通信接口43，用于电子设备与其他设备或通信网络通信。

另外，本发明实施例提供了一种计算机存储介质，用于储存电子设备所用的计算机软件指令，其包含用于执行上述图7-图9所示方法实施例中基于Weex的在线代码编译方法所涉及的程序。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助加必需的通用硬件平台的方式来实现，当然也可以通过硬件和软件结合的方式来实现。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以计算机产品的形式体现出来，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程设备的处理器以产生一个机器，使得通过计算机或其他可编程设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (14)

1.一种基于Weex的在线代码编译方法，其特征在于，包括：

获取用户输入的代码信息；

在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL，其中，所述第一目标DSL支持Weex框架；

利用与所述第一目标DSL相对应的编译方法对所述代码信息进行编译，获得可运行在所述Weex框架中的编译结果。

2.根据权利要求1所述的方法，其特征在于，

所述代码信息为用于进行以下所列中的一种或任意结合的第一代码信息：用户测试、问题调试、创新例、学习沉淀；或者，

所述代码信息为用于示例项目的第二代码信息。

3.根据权利要求2所述的方法，其特征在于，利用与所述第一目标DSL相对应的编译方法对所述代码信息进行编译，获得可运行在所述Weex框架中的编译结果，包括：

利用与所述第一目标DSL相对应的编译方法对所述第一代码信息进行编译，获得可运行在所述Weex框架中的目标代码；或者，

利用与所述第一目标DSL相对应的编译方法对所述第二代码信息进行编译，获得可运行在所述Weex框架中的打包文件。

4.根据权利要求3所述的方法，其特征在于，在获取用户输入的代码信息之后，所述方法还包括：

将所述代码信息写入至缓存；

利用与所述第一目标DSL相对应的编译方法对所述第二代码信息进行编译，获得可运行在所述Weex框架中的打包文件，包括：

在所述缓存中创建与所述第二代码信息相对应的代码文件；

利用与所述第一目标DSL相对应的编译方法对所述代码文件进行拼装打包，获得可运行在所述Weex框架中的打包文件。

5.根据权利要求4所述的方法，其特征在于，利用与所述第一目标DSL相对应的编译方法对所述代码文件进行拼装打包，包括：

获取与所述代码文件相对应的渲染方式；

利用与所述第一目标DSL相对应的编译方法按照所述渲染方式对所述代码文件进行拼装打包。

6.根据权利要求1至5中任意一项所述的方法，其特征在于，所述方法还包括：

获取用户确定的第一展示场景；

利用所述第一展示场景显示可运行在所述Weex框架中的编译结果。

7.根据权利要求1至5中任意一项所述的方法，其特征在于，在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL，包括：

获取用户输入的第一指令信息；

在多个所述DSL中，将与所述第一指令信息相对应的DSL确定为与所述代码信息相对应的第一目标DSL。

8.一种基于Weex的在线代码编译方法，其特征在于，包括：

获取用户输入的代码片段，所述代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、学习沉淀；

在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，其中，所述第二目标DSL支持Weex框架；

利用与所述第二目标DSL相对应的编译方法对所述代码片段进行编译，获得可运行在所述Weex框架中的目标代码；

将所述目标代码发送至服务器进行存储。

9.根据权利要求8所述的方法，其特征在于，所述方法还包括：

获取用户确定的第二展示场景；

利用所述第二展示场景显示可运行在所述Weex框架中的目标代码。

10.根据权利要求8所述的方法，其特征在于，在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，包括：

获取用户输入的第二指令信息；

在多个所述DSL中，将与所述第二指令信息相对应的DSL确定为与所述代码片段相对应的第二目标DSL。

11.一种基于Weex的在线代码编译装置，其特征在于，包括：

第一获取模块，用于获取用户输入的代码信息；

第一确定模块，用于在多个领域专用语言DSL中确定与所述代码信息相对应的第一目标DSL，其中，所述第一目标DSL支持Weex框架；

第一编译模块，用于利用与所述第一目标DSL相对应的编译方法对所述代码信息进行编译，获得可运行在所述Weex框架中的编译结果。

12.一种电子设备，其特征在于，包括：存储器、处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行时实现如权利要求1至7中任一项所述的基于Weex的在线代码编译方法。

13.一种基于Weex的在线代码编译装置，其特征在于，包括：

第二获取模块，用于获取用户输入的代码片段，所述代码片段为用于进行以下所列中的一种或任意结合的代码片段：用户测试、问题调试、创新例、习沉淀；

第二确定模块，用于在多个领域专用语言DSL中确定与所述代码片段相对应的第二目标DSL，其中，所述第二目标DSL支持Weex框架；

第二编译模块，用于利用与所述第二目标DSL相对应的编译方法对所述代码片段进行编译，获得可运行在所述Weex框架中的目标代码；

发送模块，用于将所述目标代码发送至服务器进行存储。

14.一种电子设备，其特征在于，包括：存储器、处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行时实现如权利要求8至10中任一项所述的基于Weex的在线代码编译方法。

Images