CN109670128B - 一种基于WebAssembly的网页应用实现方法及装置 - Google Patents

Abstract

本申请提供了一种基于WebAssembly的网页应用实现方法及装置，其中，该方法包括：获取基于第一编程语言编写的具备建模功能的第一功能模块；将所述第一功能模块转换为基于第二编程语言编写的第二功能模块；将所述第二功能模块加载到网页应用中，以便所述网页应用支持所述建模功能。采用上述方式，可以在网页应用中实现第一功能模块具备的建模功能，使网页应用中可支持的功能更加丰富，也可以提升建模过程中的处理性能。

Description

一种基于WebAssembly的网页应用实现方法及装置

技术领域

本申请涉及互联网技术领域，具体而言，涉及一种基于WebAssembly的网页应用实现方法及装置。

背景技术

随着互联网技术的不断发展，装修行业也逐渐由传统的线下经营模式转换为基于互联网的线上经营模式。用户可以通过使用装修公司提供的基于互联网的装修平台来进行在线建模等操作，以使装修设计更符合用户的设计需求。

目前，装修公司提供的装修平台普遍是基于浏览器的网页应用，运行在浏览器界面中给用户提供相关功能。具体的，装修平台实现在线建模功能时，主要通过JavaScript语言原生实现简单的2D建模工具(例如，线段，方形，圆弧、倒角和圆形等)和3D建模工具(例如拉伸、偏移、扫掠等)。但是，这种JavaScript语言编写的建模工具能够支持的功能有限，并且，由于JavaScript语言是解释型编程语言，在执行效率上也较低，对复杂的几何建模过程的处理性能较差。

发明内容

有鉴于此，本申请的目的在于提供一种基于WebAssembly的网页应用实现方法及装置，以解决现有技术中网页应用的建模功能能够支持的功能有限、且建模过程中处理性能较差的问题。

第一方面，本申请提供了一种基于WebAssembly的网页应用实现方法，包括：

获取基于第一编程语言编写的具备建模功能的第一功能模块；

将所述第一功能模块转换为基于第二编程语言编写的第二功能模块；

将所述第二功能模块加载到网页应用中，以便所述网页应用支持所述建模功能。

一种可能的实施方式中，所述第一编程语言为C语言或C++语言，所述第二编程语言为WebAssembly语言。

一种可能的实施方式中，所述将所述第一功能模块转换为基于第二编程语言编写的第二功能模块，包括：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

一种可能的实施方式中，所述在网页应用中嵌入所述第二功能模块，包括：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

一种可能的实施方式中，将所述第二功能模块加载到网页应用中之后，所述方法还包括：

运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

第二方面，本申请还提供一种基于WebAssembly的网页应用实现装置，包括：

获取模块，用于获取基于第一编程语言编写的具备建模功能的第一功能模块；

转换模块，用于将所述第一功能模块转换为基于第二编程语言编写的第二功能模块；

载入模块，用于将所述第二功能模块加载到网页应用中，以便所述网页应用支持所述建模功能。

一种可能的设计中，所述第一编程语言为C语言或C++语言，所述第二编程语言为WebAssembly语言。

一种可能的设计中，所述转换模块，在将所述第一功能模块转换为基于第二编程语言编写的第二功能模块时，具体用于：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

一种可能的设计中，所述载入模块，在将所述第二功能模块加载到网页应用中时，具体用于：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

一种可能的设计中，所述装置还包括：

通讯模块，用于在运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

第三方面，本申请还提供一种电子设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面以及第一方面任一种可能的实施方式中所涉及的基于WebAssembly的网页应用实现方法的步骤。

第四方面，本申请还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面以及第一方面任一种可能的实施方式中所涉及的基于WebAssembly的网页应用实现方法的步骤。

本申请实施例提供的方法和装置中，可以将具备较强的建模功能的第一功能模块转换为网页应用能够支持的第二功能模块，进而将第二功能模块移植到网页应用中使用。通过程序代码的重用和迁移，可以在网页应用中实现第一功能模块具备的建模功能，使网页应用中可支持的功能更加丰富，也可以提升建模过程中的处理性能。

为使本申请的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本申请实施例提供的一种基于WebAssembly的网页应用实现方法的流程示意图；

图2示出了本申请实施例提供的编译示意图；

图3示出了本申请实施例列举的一种场景示意图；

图4示出了本申请实施例提供的一种基于WebAssembly的网页应用实现装置的结构示意图；

图5示出了本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

考虑到目前运行在浏览器上的装修平台等网页(web)应用普遍是基于JavaScript语言来实现的，但是由于JavaScript语言本身能够实现的功能有限，而且作为解释型编程语言，相比C语言等编程语言来说，执行JavaScript语言时的执行效率也较低，这可能导致网页应用在实现某些复杂的功能时受到限制。例如，目前装修平台上的建模工具本身可实现的建模功能有限，在执行某些建模设计时的处理性能较差，而且，也很难实现一些复杂的3D建模设计。

为解决上述问题，本申请提出了一种基于WebAssembly的网页应用实现方法及装置，通过使用WebAssembly技术，在网页应用中植入建模功能较为丰富的其它功能模块，以使网页应用可实现的功能更为丰富。

下面，结合具体实施例对本申请提出的技术方案进行详细说明。

参照图1所示，为本申请实施例提供的一种基于WebAssembly的网页应用实现方法的流程示意图，具体包括以下步骤：

步骤101、获取基于第一编程语言编写的具备建模功能的第一功能模块。

针对步骤101中所述的具备建模功能的第一功能模块，例如为目前较为成熟的计算机辅助设计(ComputerAided Design，CAD)等桌面版建模软件中涉及的部分或全部具备建模功能的功能模块。这类桌面版建模软件多采用C语言或C++语言来编写实现的，相比于基于JavaScript语言实现的网页版建模工具来说可支持的建模功能较为强大和丰富。若能够将这类桌面版建模软件上的某些功能模块移植到网页应用中，那么可以大大丰富网页应用可实现的功能，也可以提升在建模过程中的处理性能。

但是，考虑到若想使用桌面版建模软件，还需要预先在终端设备(例如台式机、笔记本等)上安装这类桌面版建模软件的安装包，然后才能运行这类桌面版建模软件，并且，桌面版建模软件一般都是独立运行的，并不能运行在浏览器的网页应用中。

为实现将桌面版建模软件上的功能模块移植到网页应用中，本申请实施例中服务器需要首先获取桌面版建模软件中具备建模功能的第一功能模块。一种可能的实施方式中，服务器的配置文件可以预先记录从桌面版建模软件中提取的第一功能模块的相关程序代码文件，在需要进行移植操作时，服务器可以直接调取配置文件中记录的相关程序代码文件。另一种可能的实施方式中，服务器也可以在需要进行移植操作时，直接通过预设的应用程序接口(ApplicationProgram Interface，API)从桌面版建模软件中读取第一功能模块的相关程序代码文件。

步骤102、将第一功能模块转换为基于第二编程语言编写的第二功能模块。

这里，第二编程语言例如为WebAssembly语言。其中，WebAssembly语言可以理解为是一种基于堆虚拟机的二进制编程语言。

本申请实施例中，由于考虑到第一功能模块所采用的第一编程语言为C语言或C++语言等，而网页应用普遍采用的编程语言为JavaScript语言，C语言或C++语言与JavaScript语言之间很难实现相互调用，故第一功能模块无法直接在浏览器中使用。基于此，本申请实施例中，基于WebAssembly技术，将由C语言或C++语言编写的第一功能模块的程序代码文件编译为可移植的且能够支持与JavaScript语言互通的目标程序代码文件，进而由目标程序代码文件组成的第二功能模块可以放在浏览器中使用。其中，经过WebAssembly技术处理后的目标程序代码文件可以称为.wasm文件，由目标程序代码文件组成的第二功能模块可以称为wasm模块。

一种可能的实施方式中，可以利用Emscripten编译器将第一功能模块编译为基于第二编程语言编写的第二功能模块。例如，参照图2所示的编译示意图，可以将第一功能模块中的C/C++程序代码文件通过Emscripten编译器编译成.wasm文件，进而组成wasm模块。

其中，Emscripten编译器可以理解为一个由底层虚拟机(Low Level VirtualMachine，LLVM)到JavaScript的编译器。采用Emscripten编译器，可以将LLVM支持的C语言或C++语言编译成可以在浏览器或其它平台上可以运行的编程语言。

步骤103、将第二功能模块加载到网页应用中，以便网页应用支持建模功能。

具体实施中，在得到第二功能模块之后，还可以调用指定API，利用指定API将第二功能模块加载到网页应用中，第二功能模块加载到网页应用中之后，后续网页应用通过调用第二功能模块，便可以实现建模功能。

进一步地，在运行网页应用时，第二功能模块还可以与网页应用中包含的其它功能模块之间进行通讯。具体的，可以调用指定通讯接口，并控制第二功能模块与网页应用中包含的与指定通讯接口对应的第三功能模块进行通讯。

此外，在一种可能的实施方式中，还可以利用JavaScript胶接代码(glue code)将wasm模块加载为超文本标记语言(HyperTextMarkup Language，HTML)文件，这里，gluecode可以用于连接相互不兼容的软件组件。通过上述方式，将wasm模块载入到网页应用之后能够更好地被浏览器识别，提升两者之间的兼容性。

下面结合具体应用场景，对本申请提供的上述方案进行示例性说明。

参照图3所示，为本申请实施例列举的一种场景示意图。在本场景中，将基于C++语言编写的家装3D建模功能模块移植到家装云设计平台的网页应用中。具体的移植过程包括：首先，利用Emscripten编译器，将获取到的家装3D建模功能模块编译成wasm模块，然后调用指定API将wasm模块加载到家装云设计平台的网页应用中。

此外，家装云设计平台中还包括其它功能模块，例如具备图像渲染功能的功能模块等，当家装云设计平台运行时，wasm模块与其它功能模块之间还可以基于指定通讯接口进行通信。

通过上述方式可以看出，本申请实施例中可以将具备较强的建模功能的第一功能模块转换为网页应用能够支持的第二功能模块，进而将第二功能模块移植到网页应用中使用。通过程序代码的重用和迁移，可以在网页应用中实现第一功能模块具备的建模功能，使网页应用中可支持的功能更加丰富，也可以提升建模过程中的处理性能。

基于同一申请构思，本申请实施例中还提供了与基于WebAssembly的网页应用实现方法对应的基于WebAssembly的网页应用实现装置，由于本申请实施例中的装置解决问题的原理与本申请实施例上述基于WebAssembly的网页应用实现方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

参照图4所示，为本申请实施例提供的一种基于WebAssembly的网页应用实现装置的结构示意图，该装置40包括：

获取模块41，用于获取基于第一编程语言编写的具备建模功能的第一功能模块；

转换模块42，用于将所述第一功能模块转换为基于第二编程语言编写的第二功能模块；

载入模块43，用于将所述第二功能模块加载到网页应用中，以便所述网页应用支持所述建模功能。

一种可能的设计中，所述第一编程语言为C语言或C++语言，所述第二编程语言为WebAssembly语言。

一种可能的设计中，所述转换模块42，在将所述第一功能模块转换为基于第二编程语言编写的第二功能模块时，具体用于：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

一种可能的设计中，所述载入模块43，在将所述第二功能模块加载到网页应用中时，具体用于：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

一种可能的设计中，所述装置还包括：

通讯模块44，用于在运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

其中，关于上述装置中各模块的功能以及具体交互方式，可以参加上述方法实施例中涉及的相关内容，这里不再赘述。

基于相同的技术构思，本申请实施例中还提供一种电子设备。参照图5所示，为本申请实施例提供的一种电子设备的结构示意图，该电子设备50包括：处理器51、存储器52和总线53，所述存储器52存储执行指令，当所述设备50运行时，所述处理器51与所述存储器52之间通过总线53通信，所述处理器51执行所述存储器52存储的所述执行指令，使得所述电子设备50执行实现上述方法实施例所涉及的步骤。

具体的，所述处理器51可以读取所述存储器52中存储的执行指令，执行如下操作：

获取基于第一编程语言编写的具备建模功能的第一功能模块；

将所述第一功能模块转换为基于第二编程语言编写的第二功能模块；

将所述第二功能模块加载到网页应用中，以便所述网页应用支持所述建模功能。

其中，所述第一编程语言为C语言或C++语言，所述第二编程语言为WebAssembly语言。

一种可能的实施方式中，所述处理器51，在将所述第一功能模块转换为基于第二编程语言编写的第二功能模块时，具体执行：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

一种可能的实施方式中，所述处理器51，在网页应用中嵌入所述第二功能模块时，具体执行：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

一种可能的实施方式中，所述处理器51，在将所述第二功能模块加载到网页应用中之后，还可以执行：

运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

其中，每一种实施方式下处理器涉及的具体处理流程可参见上述方法实施例中的相关描述，这里不再展开说明。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的基于WebAssembly的网页应用实现方法的步骤。

本申请实施例所提供的数据访问方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的基于WebAssembly的网页应用实现方法的步骤，具体可参见上述方法实施例，在此不再赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于WebAssembly的网页应用实现方法，其特征在于，包括：

获取基于第一编程语言编写的具备建模功能的第一功能模块；

将所述第一功能模块转换为基于第二编程语言编写的第二功能模块，所述第二编程语言为WebAssembly语言；

将所述第二功能模块加载为超文本标记语言文件，并将所述超文本标记语言文件加载到网页应用中，以便所述网页应用支持所述建模功能。

2.如权利要求1所述的方法，其特征在于，所述第一编程语言为C语言或C++语言。

3.如权利要求1或2所述的方法，其特征在于，所述将所述第一功能模块转换为基于第二编程语言编写的第二功能模块，包括：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

4.如权利要求1或2所述的方法，其特征在于，将所述第二功能模块加载到网页应用中，包括：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

5.如权利要求1或2所述的方法，其特征在于，将所述第二功能模块加载到网页应用中之后，所述方法还包括：

运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

6.一种基于WebAssembly的网页应用实现装置，其特征在于，包括：

获取模块，用于获取基于第一编程语言编写的具备建模功能的第一功能模块；

转换模块，用于将所述第一功能模块转换为基于第二编程语言编写的第二功能模块，所述第二编程语言为WebAssembly语言；

载入模块，用于将所述第二功能模块加载为超文本标记语言文件，并将所述超文本标记语言文件加载到网页应用中，以便所述网页应用支持所述建模功能。

7.如权利要求6所述的装置，其特征在于，所述第一编程语言为C语言或C++语言。

8.如权利要求6或7所述的装置，其特征在于，所述转换模块，在将所述第一功能模块转换为基于第二编程语言编写的第二功能模块时，具体用于：

利用Emscripten编译器将所述第一功能模块编译为所述基于第二编程语言编写的第二功能模块。

9.如权利要求6或7所述的装置，其特征在于，所述载入模块，在将所述第二功能模块加载到网页应用中时，具体用于：

调用指定应用程序编程接口API，利用指定API将所述第二功能模块加载到所述网页应用中。

10.如权利要求6或7所述的装置，其特征在于，所述装置还包括：

通讯模块，用于在运行所述网页应用时，调用指定通讯接口，并控制所述第二功能模块与所述网页应用中包含的与所述指定通讯接口对应的第三功能模块进行通讯。

Images