CN116166261A - 页面特效制作方法和系统 - Google Patents

Abstract

本申请实施例提供了一种页面特效制作方法和系统，其中，所述的方法包括：获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。通过基于游戏引擎构建视觉特效文件，并在Vue页面中内嵌该视觉特效文件的方式，可以利用游戏引擎渲染出更丰富酷炫的视觉效果，增强特效的互动功能，极大的提高了性能瓶颈。

Description

页面特效制作方法和系统

技术领域

本申请实施例涉及页面制作技术领域，尤其涉及一种页面特效制作方法、系统、计算机设备及计算机可读存储介质。

背景技术

由于Vue项目开发中，视觉特效部分通常是基于原生Html5的渲染方式，因为HTML5原生渲染方式，性能瓶颈低，所以很难完成一些炫酷的视觉效果展示，而且，基于原生Html5实现视觉特效耗时较长，开发时间长。

发明内容

本申请实施例的目的是提供一种页面特效制作方法、系统、计算机设备及计算机可读存储介质，用于解决以下问题：基于原生的Html5渲染方式很难完成一些炫酷的视觉效果的展示，而且需要消耗较多的开发时间。

本申请实施例的一个方面提供了一种页面特效制作方法，包括：

获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

可选地，在所述针对所述第二特效文件配置远程资源路径的步骤之后，还包括：

根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径。

可选地，在所述根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径的步骤之后，还包括：

根据所述远程资源路径，将所述第二特效文件发布到云服务器端。

可选地，所述Vue页面的逻辑文件包含Vue视图组件的文件和Vue页面的文件，所述根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中，包括：

根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；

在所述Vue页面的文件中嵌入所述Vue视图组件的文件。

可选地，在所述根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径的步骤之后，还包括：

根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名。

可选地，所述Vue页面中包含特效控件，所述方法还包括：

响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

可选地，所述Vue页面用于展示数字藏品。

本申请实施例的一个方面又提供了一种页面特效制作系统，包括：

文件获取模块，用于获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

文件配置模块，用于编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

文件嵌入模块，用于根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

特效渲染模块，用于执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

可选地，还包括：

资源路径调整模块，用于根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径。

可选地，还包括：

特效文件发布模块，用于根据所述远程资源路径，将所述第二特效文件发布到云服务器端。

可选地，所述Vue页面的逻辑文件包含Vue视图组件的文件和Vue页面的文件，所述文件嵌入模块，包括：

资源路径调整子模块，用于根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；

文件嵌入子模块，用于在所述Vue页面的文件中嵌入所述Vue视图组件的文件。

可选地，所述文件嵌入模块，还包括：

文件名调整子模块，用于根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名。

可选地，所述Vue页面中包含特效控件，所述方法还包括：

视觉特效播放模块，用于响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

可选地，所述Vue页面用于展示数字藏品。

本申请实施例的一个方面又提供了一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述的页面特效制作方法的步骤。

本申请实施例的一个方面又提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行所述计算机程序时实现如上述的页面特效制作方法的步骤。

本申请实施例提供的页面特效制作方法、系统、设备及计算机可读存储介质，通过基于游戏引擎构建视觉特效文件，并在Vue页面中内嵌该视觉特效文件的方式，可以利用游戏引擎渲染出更丰富酷炫的视觉效果，增强特效的互动功能，极大的提高了性能瓶颈。而且，视觉特效开发与原Vue页面的开发可以并行处理，互不干涉，提高项目开发速度。同时，由于游戏引擎是可视化开发，对于视觉特效开发效率比基于原生Html5要高的多，进一步提高了项目开发效率，减少了开发周期。

附图说明

图1示意性示出了根据本申请实施例的页面特效制作方法的应用环境图；

图2示意性示出了根据本申请实施例一的页面特效制作方法的流程图；

图3示意性示出了根据本申请实施例一的页面特效制作方法的步骤流程图；

图4示意性示出了根据本申请实施例一的一种gameView.vue组件的框架示意图；

图5示意性示出了根据本申请实施例一的一种页面特效制作方法的整体架构图；

图6示意性示出了根据本申请实施例一的一种Vue页面的示意图；

图7示意性示出了根据本申请实施例二的页面特效制作装置的框图；及

图8示意性示出了根据本申请实施例三的适于实现页面特效制作方法的计算机设备的硬件架构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

现有技术中，采用Vue开发的会员购商品详情页面，视觉特效部分通常是基于原生Html5的渲染方式，因为Html5原生渲染方式，性能瓶颈低，所以很难完成一些炫酷的视觉效果展示，而且，基于原生Html5实现视觉特效耗时较长，开发时间长。

此外，基于Html5的游戏引擎由于借助的是WebGL的渲染能力，直接借助显卡的渲染能力，可以极大的提高渲染性能，也能实现更多的视觉特效和交互方式。

有鉴于此，本申请旨在提出一种基于游戏引擎进行开发的页面特效制作方法，包括：获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染所述视觉特效。通过在Vue页面中内嵌基于游戏引擎构建的视觉特效的方式，可以利用游戏引擎渲染出更丰富酷炫的视觉效果，增强特效的互动功能，极大的提高了性能瓶颈。而且，视觉特效开发与原Vue页面的开发可以并行处理，互不干涉，提高项目开发速度。同时，由于游戏引擎是可视化开发，对于视觉特效开发效率比基于原生Html5要高的多，进一步提高了项目开发效率，减少了开发周期。

本申请提供了多个实施例进一步介绍页面特效制作方案，具体参照下文。

在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。

以下为本申请的术语解释：

Cocos Creator：是一款轻量、高效、免费开源的跨平台游戏引擎，同时也是实时3D内容创作平台，不仅支持2D、3D的游戏开发，同时在HMI(HumanMachine Interface，人机界面)、IoT(Internet of Things，物联网)、XR(ExtendedReality，扩展现实)、虚拟人偶等领域，均可提供一套完善的行业解决方案。

Vue:是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

图1示意性示出了根据本申请实施例的环境应用示意图。如图1所示：

计算机设备10000可以通过网络20000连接客户端30000。

计算机设备10000可以提供服务，如进行网络调试，或返回页面特效制作结果数据给客户端30000等。

计算机设备10000可以位于诸如单个场所之类的数据中心，或者分布在不同的地理位置(例如，在多个场所)中。计算机设备10000可以经由一个或多个网络20000提供服务。网络20000包括各种网络设备，例如路由器，交换机，多路复用器，集线器，调制解调器，网桥，中继器，防火墙，代理设备和/或类似。网络20000可以包括物理链路，例如同轴电缆链路，双绞线电缆链路，光纤链路，其组合等。网络20000可以包括无线链路，诸如蜂窝链路，卫星链路，Wi-Fi链路等。

计算机设备10000可以由一个或多个计算节点实现。一个或多个计算节点可以包括虚拟化的计算实例。虚拟化的计算实例可以包括虚拟机，例如计算机系统，操作系统，服务器等的仿真。计算节点可以基于虚拟映像和/或定义用于仿真的特定软件(例如，操作系统，专用应用程序，服务器)的其他数据，由计算节点加载虚拟机。随着对不同类型的处理服务的需求改变，可以在一个或多个计算节点上加载和/或终止不同的虚拟机。可以实现管理程序来管理同一计算节点上不同虚拟机的使用。

客户端30000可以被配置为访问计算机设备10000的内容和服务。客户端30000可以包括任何类型的电子设备，诸如移动设备、平板设备、膝上型计算机、工作站、虚拟现实设备，游戏设备、机顶盒、数字流媒体设备、车辆终端、智能电视、机顶盒等。

客户端30000可以将页面特效制作结果数据等输出(例如，显示、渲染、呈现)给用户。

以下将通过多个实施例介绍网络调试方案。该方案可以通过计算机设备10000实施。

实施例一

图2示意性示出了根据本申请实施例一的页面特效制作方法的流程图。包括步骤S202-S208，其中，

步骤S202，获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

在本实施例中，技术人员可以分别开发Vue页面的逻辑文件和第一特效文件，其中，Vue页面的逻辑文件基于Html5进行构建得到，用于描述Vue页面的相关逻辑程序；第一特效文件基于游戏引擎进行构建得到，用于描述视觉特效相关的逻辑程序。在具体实现中，用于构建第一特效文件的游戏引擎可以为Cocos Creator引擎，Unity游戏引擎，UE4或UE5虚幻引擎等，本申请实施例对此不作具体限制。

步骤S204，编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

在本实施例中，对于构建完成的第一特效文件，可以通过编译器将该第一特效文件打包编译成为支持Html5格式的第二特效文件，例如，可以将第一特效文件打包称为WebMobile文件，该Web Mobile文件支持移动端Html5格式，可以在基于Html5开发的Vue项目中运行。

在编译得到第二特效文件之后，可以进一步配置第二特效文件对应的远程资源路径，其中，远程资源路径用于指示特效资源所存储的地址，通过按照远程资源路径将第二特效文件上传到远程，其他文件以远程访问/请求的方式引入该远程资源路径所指示的特效资源。

步骤S206，根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

在本实施例中，可以通过调整Vue页面的逻辑文件中所引入的资源路径，将该资源路径指向远程资源路径，从而实现将第二特效文件嵌入到所述Vue页面的逻辑文件中。

步骤S208，执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

在本实施例中，在Vue页面的逻辑文件中嵌入第二特效文件之后，可以通过执行Vue页面的逻辑文件以展示Vue页面，并在Vue页面中渲染第二特效文件中描述的视觉特效。

具体的，Vue页面可以为数字藏品页面，用于展示数字藏品。第一特效文件为数字藏品对应的特效资源文件，通过在数字藏品页面中引入数字藏品对应的特效资源文件，可以实现数字藏品页面中展示数字藏品对应的酷炫特效。

作为一种示例，数字藏品可以为抽奖卡片，则通过利用游戏引擎构建抽奖卡片时的开奖特效，并在数字藏品页面中引入该抽奖卡片的特效资源，从而在展示数字藏品页面时，可以渲染并展示抽奖卡片的开奖特效，例如，开奖特效为翻转卡片后闪烁酷炫的烟花或掉落大量虚拟货币等。

作为另一种示例，数字藏品可以为隐藏宝箱，则通过利用游戏引擎构建隐5藏宝箱的开启特效，并在数字藏品页面中引入该隐藏宝箱的特效资源，从而在展示数字藏品页面时，可以渲染并展示隐藏宝箱的开启特效，例如，开启特效为翻转宝箱上盖后虚拟宠物从宝箱中跳出并跳舞等。

以下提供几个可选地实施例，以进行优化所述页面特效制作方法，具体如下：

0在本申请的一种优选实施例中，在所述步骤S204之后，所述方法还可以包括如下步骤：根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径。

在本实施例中，在调整之前第二特效文件中引用的资源路径通常为相对路径，即相对于整个第二特效文件的路径，当前第二特效文件中的逻辑程序可以5直接通过相对路径调用到这些资源，但是其他外部的项目则不容易通过相对路径调用这些资源，因此，需要将第二特效文件中引用的资源路径调整为绝对路径。

具体的，可以将第二特效文件中引用的资源路径调整为绝对路径，即，采

用远程资源路径替换第二特效文件中引用的资源路径。在具体实现中，第二特0效文件中引用的资源路径可以包括CC资源路径和Asset资源引用路径，其中，CC资源路径可以指向语言基础资源的JSON数据包，负责整个项目的底层逻辑实现；Asset资源引用路径可以指向全局的资源，负责整个项目资源的引用，包括图片、音频、视频和场景等资源。

作为一种示例，假设远程资源路径为："s1.hdslb.com/bfs/static/zq/ntfview/"，对第二特效文件的调整包括两个部分，第一部分：第二特效文件中的import-map.json文件中引用了CC资源路径，在调整之前，import-map.json文件中引用的CC资源路径记录为："./../cocos-js/cc.js"，在调整之后，可以将import-map.json文件中引用的CC资源路径记录为："//s1.hdslb.com/bfs/static/zq/ntfview/cocos-js/cc.js"。第二部分：第二特效文件中的cc.js文件中引用了Asset资源，在调整之前，对Asset资源的引用记录为：fN.remoteServerAddress+"remote/"+i:"assets/"+i)；在调整之后，对Asset资源的引用记录为：fN.remoteServerAddress+"remote/"+i:"//s1.hdslb.com/bfs/static/zq/ntfview/assets/"+i)。

在本申请的一种优选实施例中，在所述根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径的步骤之后，还可以包括如下步骤：

根据所述远程资源路径，将所述第二特效文件发布到云服务器端。

在本实施例中，在对第二特效文件中引用的资源路径进行调整完成之后，可以进一步按照远程资源路径将第二特效文件发布到云服务器端，以便于其他外部的项目可以从云服务器端中调用该第二特效文件对应的特效资源。具体的，通过Git上传到远程，并通过Rider发布到在云服务器端部署的测试和/或线上环境中。其中，Git分布式控制系统是基于Linux内核开发的版本控制工具，与常用的版本控制工具CVS，Subversion等不同，Git采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。Rider是一款是基于IntelliJ IDEA和ReSharper的快速而强大的跨平台.NET IDE集成开发环境，可以在Windows，Mac，Linux上开发.NET，ASP.NET，.NET Core，Xamarin或Unity应用程序。

在本申请的一种优选实施例中，所述Vue页面的逻辑文件包含Vue视图组件的文件和Vue页面的文件，所述步骤S206可以包括如下步骤：

根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；在所述Vue页面的文件中嵌入所述Vue视图组件的文件。

其中，Vue视图组件的文件中将开发的项目打包成为组件的形式，可以引用到需要的页面中。Vue页面的文件中描述页面相关的元素以及这些元素的布局排版方式等内容。

在本实施例中，通过根据远程资源路径调整所述Vue视图组件的文件中引用的资源路径，以在Vue视图组件的文件中引入第二特效文件，实现在Vue视图组件的文件中引入了第二特效文件对应的特效资源；然后，在Vue页面的文件中嵌入Vue视图组件的文件，实现在Vue页面的文件中引用第二特效文件对应的特效资源。

具体的，通过const常指针变量设置引用的资源指向远程资源路径。作为一种示例，假设远程资源路径为："s1.hdslb.com/bfs/static/zq/ntfview/"，Vue视图组件的文件为gameView.vue，Vue页面的文件为index.vue，则在gameView.vue中引用资源的语句可以设置为：const RES_URL＝'//s1.hdslb.com/bfs/static/zq/ntfview'。在设置完成gameView.vue组件之后，可以根据gameView.vue组件的路径，在对应的index.vue中引用gameView.vue组件，例如，引用gameView.vue组件的语句可以包括：

<game-view></game-view>；

import GameView from'../../../../components/game/gameView.vue'；

components:{GameView}.

需要说明的是，Vue页面的逻辑文件可以包括多个Vue页面的文件，对于需要应用第二特效文件对应的特效资源的页面，都可以根据gameView.vue组件的路径进行配置以引入gameView.vue组件中包含的特效资源。

在本申请的一种优选实施例中，在所述根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径的步骤之后，还可以包括如下步骤：

根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名。

在本实施例中，还可以根据第二特效文件中资源的文件名，调整Vue视图组件的文件中资源的文件名，同时，还可以调整Vue视图组件的文件中引用资源的文件名，例如，第二特效文件中包含的资源的文件名分别为：polyfills.bundle.b12d4.js，system.bundle.6de80.js，import-map.json，index.edf07.js。而可以根据这些资源的文件名调整Vue视图组件的文件中资源的文件名，然后将调整引用这些资源的文件名，包括如下语句：

await this.loadScript(`${RES_URL}/src/polyfills.bundle.b12d4.js`)；

await this.loadScript(`${RES_URL}/src/system.bundle.6de80.js`)；

await this.loadJson(`${RES_URL}/src/import-map.json`)；

window.System.import(`${RES_URL}/index.edf07.js`).catch((err)＝>{}。

在本申请的一种优选实施例中，所述Vue页面中包含特效控件，所述方法还可以包括如下步骤：

响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

在本实施例中，在展示Vue页面时，还可以展示特效资源对应的特效控件，用户可以通过对特效控件进行触发操作，以Vue页面中播放第二特效文件中描述的视觉特效，增强视觉特效的互动性。其中，触发操作可以包括点击操作、双击操作或手势操作等，本申请实施例对此不作具体限制。

为了进一步描述本实施例提供的页面特效制作方法，如图3示出了一种页面特效制作方法的步骤流程图，包括如下步骤：

步骤S301，获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

步骤S302，编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

步骤S303，根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径；

步骤S304，根据所述远程资源路径，将所述第二特效文件发布到云服务器端；

步骤S305，根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名；

步骤S306，在所述Vue页面的文件中嵌入所述Vue视图组件的文件；

步骤S307，响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

如图4示出了一种gameView.vue组件的框架示意图，包含两个部分，分别为DOM树和脚本层，其中，DOM树包含对外适用层，游戏适用层和游戏渲染画布，通过DOM树描述了所引入的特效资源中各标签间的相互关联性。脚本层包含统一资源定位符指向远程资源路径，loadScript()方法描述加载远程游戏脚本，loadJson()方法描述加载游戏Json文件。

如图5示出了一种页面特效制作方法的整体架构图，包含三个部分，分别为Vue层，通信层和游戏层，其中，Vue层包含Vue视图组件和业务逻辑，Vue视图组件用于调用游戏层中的特效资源，业务逻辑用于实现页面内容的展示。通信层的GameBrige用于实现在Vue层和游戏层之间传递消息。游戏层包含通用加载逻辑和业务逻辑，通过共同作用以提供游戏特效。

作为一种示例，如图6示出了一种Vue页面的示意图，在Vue页面10中包含数字藏品的视觉特效20，该视觉特效20基于游戏引擎进行构建得到。Vue页面10中还可以包含该数字藏品相关的详情介绍数据和售价信息，Vue页面10包含购买控件，用户可以通过该购买控件购买该数字藏品，在用户点击购买控件之后，可以Vue页面10中播放数字藏品的视觉特效20。

在本实施例中，通过基于游戏引擎构建视觉特效文件，并在Vue页面中内嵌该视觉特效文件的方式，可以利用游戏引擎渲染出更丰富酷炫的视觉效果，增强特效的互动功能，极大的提高了性能瓶颈。而且，视觉特效开发与原Vue页面的开发可以并行处理，互不干涉，提高项目开发速度，从而缩短开发的时间。

实施例二

图7示意性示出了根据本申请实施例二的页面特效制作系统的框图，该页面特效制作系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本申请实施例中各程序模块的功能。

如图7所示，该页面特效制作系统700可以包括如下模块：

文件获取模块710，用于获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

文件配置模块720，用于编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

文件嵌入模块730，用于根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

特效渲染模块740，用于执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

在本申请的一种优选实施例中，还包括：

资源路径调整模块，用于根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径。

在本申请的一种优选实施例中，还包括：

特效文件发布模块，用于根据所述远程资源路径，将所述第二特效文件发布到云服务器端。

在本申请的一种优选实施例中，所述Vue页面的逻辑文件包含Vue视图组件的文件和Vue页面的文件，所述文件嵌入模块730，包括：

资源路径调整子模块，用于根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；

文件嵌入子模块，用于在所述Vue页面的文件中嵌入所述Vue视图组件的文件。

在本申请的一种优选实施例中，还包括：

资源的文件名调整模块，用于根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名。

在本申请的一种优选实施例中，所述Vue页面中包含特效控件，所述方法还包括：

视觉特效播放模块，用于响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

在本申请的一种优选实施例中，所述Vue页面用于展示数字藏品。

实施例三

图8示意性示出了根据本申请实施例三的适于实现页面特效制作方法的计算机设备10000的硬件架构示意图。本实施例中，计算机设备10000是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括FEN独立的服务器，或者多个服务器所组成的服务器集群)等。如图8所示，计算机设备10000至少包括但不限于：可通过系统总线相互通信链接存储器10010、处理器10020、网络接口10030。其中：

存储器10010至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器10010可以是计算机设备10000的内部存储模块，例如该计算机设备10000的硬盘或内存。在另一些实施例中，存储器10010也可以是计算机设备10000的外部存储设备，例如该计算机设备10000上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器10010还可以既包括计算机设备10000的内部存储模块也包括其外部存储设备。本实施例中，存储器10010通常用于存储安装于计算机设备10000的操作系统和各类应用软件，例如页面特效制作方法的程序代码等。此外，存储器10010还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器10020在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器10020通常用于控制计算机设备10000的总体操作，例如执行与计算机设备10000进行数据交互或者通信相关的控制和处理等。本实施例中，处理器10020用于运行存储器10010中存储的程序代码或者处理数据。

网络接口10030可包括无线网络接口或有线网络接口，该网络接口10030通常用于在计算机设备10000与其他计算机设备之间建立通信链接。例如，网络接口10030用于通过网络将计算机设备10000与外部终端相连，在计算机设备10000与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobilecommunication，简称为GSM)、宽带码分多址(Wideband Code Division MultipleAccess，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图8仅示出了具有部件10010-10030的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器10010中的页面特效制作方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器10020)所执行，以完成本申请实施例。

实施例四

本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的页面特效制作方法的步骤。

本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(SmartMedia Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中页面特效制作方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。

显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (10)

1.一种页面特效制作方法，其特征在于，包括：

获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

2.根据权利要求1所述的页面特效制作方法，其特征在于，在所述针对所述第二特效文件配置远程资源路径的步骤之后，还包括：

根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径。

3.根据权利要求2所述的页面特效制作方法，其特征在于，在所述根据所述远程资源路径，将所述第二特效文件中引用的资源路径调整为绝对路径的步骤之后，还包括：

根据所述远程资源路径，将所述第二特效文件发布到云服务器端。

4.根据权利要求1所述的页面特效制作方法，其特征在于，所述Vue页面的逻辑文件包含Vue视图组件的文件和Vue页面的文件，所述根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中，包括：

根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径，以在所述Vue视图组件的文件中引入所述第二特效文件；

在所述Vue页面的文件中嵌入所述Vue视图组件的文件。

5.根据权利要求4所述的页面特效制作方法，其特征在于，在所述根据所述远程资源路径，调整所述Vue视图组件的文件中引用的资源路径的步骤之后，还包括：

根据所述第二特效文件中资源的文件名，调整所述Vue视图组件的文件中资源的文件名。

6.根据权利要求1所述的页面特效制作方法，其特征在于，所述Vue页面中包含特效控件，所述方法还包括：

响应作用于所述特效控件的触发操作，在所述Vue页面中播放所述视觉特效。

7.根据权利要求1所述的页面特效制作方法，其特征在于，所述Vue页面用于展示数字藏品。

8.一种页面特效制作系统，其特征在于，包括：

文件获取模块，用于获取第一特效文件和Vue页面的逻辑文件；其中，所述第一特效文件基于游戏引擎进行构建得到；

文件配置模块，用于编译所述第一特效文件得到支持Html5格式的第二特效文件，并针对所述第二特效文件配置远程资源路径；

文件嵌入模块，用于根据所述远程资源路径将所述第二特效文件嵌入到所述Vue页面的逻辑文件中；

特效渲染模块，用于执行所述Vue页面的逻辑文件以展示所述Vue页面，并在所述Vue页面中渲染视觉特效。

9.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时用于实现权利要求1至7中任意一项所述的页面特效制作方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1至7中任意一项所述的页面特效制作方法的步骤。

Images