[发明专利]一种基于Vue3实现音乐播放组件的方法

说明书

本发明公开了一种基于Vue3实现音乐播放组件的方法，属于前端组件优化技术领域，利用Vue3的Composition API分析音乐播放组件的单文件，获取所述单文件中相应的业务逻辑，并提取为业务独立的逻辑控制js文件，执行各个逻辑控制js文件行驶音乐播放组件的相应业务功能；本发明方法解决复杂音乐播放组件逻辑复杂，代码冗余度高的问题。

技术领域

本发明公开了一种方法，属于前端组件优化技术领域，具体地说是一种基于Vue3实现音乐播放组件的方法。

背景技术

随着移动互联网的快速发展，移动硬件和网络速率的不断提升，而原来通过APP端实现的功能，为使用户快速打开，可通过现在Vue技术开发，并进行单页面应用实现复杂功能。但音乐播放组件因单页面应用需要集成音乐播放，cd旋转动画UI，歌词同步，mini音乐控制栏等功能，单文件代码行数庞大，导致逻辑复杂和代码冗余影响阅读和优化，以及组件的性能提升。

发明内容

本发明针对现有技术的问题，提供一种基于Vue3实现音乐播放组件的方法，本发明的技术任务是按以下方式实现的，

一种基于Vue3实现音乐播放组件的方法，利用Vue3的Composition API分析音乐播放组件的单文件，获取所述单文件中相应的业务逻辑，并提取为业务独立的逻辑控制js文件，执行各个逻辑控制js文件行驶音乐播放组件的相应业务功能。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中所述获取所述单文件中相应的业务逻辑，并提取为业务独立的逻辑控制js文件，包括：

获取控制动画效果的业务逻辑，提取相应的逻辑控制js文件，

获取控制歌词的业务逻辑，提取相应的逻辑控制js文件，

获取控制cd页的业务逻辑，提取相应的逻辑控制js文件，

获取cd页和歌词页的中间手势控制的业务逻辑，提取相应的逻辑控制js文件，

获取控制音乐播放组件播放模式的业务逻辑，提取相应的逻辑控制js文件。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中执行控制动画效果的逻辑控制js文件，控制音乐播放组件的动画各个状态。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中执行控制歌词的逻辑控制js文件，控制音乐播放组件的歌词播放进度。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中执行控制cd页的逻辑控制js文件，控制音乐播放组件的cd旋转效果。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中执行cd页和歌词页的中间手势控制的逻辑控制js文件，控制手指滑动控制音乐播放组件cd页和歌词页的相互切换。

进一步，所述的一种基于Vue3实现音乐播放组件的方法中执行音乐播放组件播放模式的逻辑控制js文件，控制音乐播放组件的播放形式，选择顺序播放、循环播放或者随机播放。

本发明还提供一种基于Vue3实现音乐播放组件的装置，包括分析模块、文件提取模块和执行模块，

分析模块利用Vue3的Composition API分析音乐播放组件的单文件，获取所述单文件中相应的业务逻辑，文件提取模块提取为业务独立的逻辑控制js文件，执行模块执行各个逻辑控制js文件行驶音乐播放组件的相应业务功能。

以及本发明提供一种基于Vue3实现音乐播放组件的电子设备，包括：存储器和至少一个处理器；

其中，所述存储器上存储有计算机程序；

所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如所述的一种基于Vue3实现音乐播放组件方法。