CN115098104B

CN115098104B - 一种轮播组件生成方法及装置

Info

Publication number: CN115098104B
Application number: CN202210875497.6A
Authority: CN
Inventors: 郑倩; 姜海东; 王军; 高晓欣; 王思宁; 邵进; 张涛; 雍怡博; 钟天齐; 孙丽丽; 宋亚琼; 屈楠
Original assignee: Beijing China Power Information Technology Co Ltd
Current assignee: Beijing China Power Information Technology Co Ltd
Priority date: 2022-07-25
Filing date: 2022-07-25
Publication date: 2022-10-28
Anticipated expiration: 2042-07-25
Also published as: CN115098104A

Abstract

本发明公开了一种轮播组件生成方法及装置，该方法包括获取待生成轮播组件的生成参数，所述生成参数包括：目标应用端类型，在创建组件时考虑了应用端的类型，将不同的类型作为对轮播组件进行对应的打包处理的依据，无需对整体的生成流程做很大改动，降低了组件开发难度和复杂度。

Description

一种轮播组件生成方法及装置

技术领域

本发明涉及软件开发领域，具体涉及一种轮播组件生成方法及装置。

背景技术

随着技术的发展，IT行业的前端视图也逐渐被重视了起来，每当打开各大网站时，首页上一定都是不停的广告图。但由于多张广告图会引发视觉杂乱，于是就有了轮播图。轮播图也就是横幅图，用于展示广告或其他信息，一般是由多张图片拼接，可进行多张图片的循环显示。

由于轮播图能够灵活的展示多个信息，越来越被广泛应用于各个网站或者应用程序中。但是由于网站或者应用程序各有不同，需要针对不同的网站或者应用程序分别去开发对应的轮播组件，才能满足需求。而这一开发工作显然带来了一定的工作量，影响了轮播图的使用范围。

发明内容

为了解决现有技术存在的问题，本发明提供了一种轮播组件生成方法及装置，具体如下：

一种轮播组件生成方法，包括：

获取待生成轮播组件的生成参数，所述生成参数包括：页面显示参数、目标图片的标识、预设渲染参数、轮播控制要求及目标应用端类型；

加载跨平台前端应用uniapp框架，获取网页代码，在所述uniapp框架中，依据所述页面显示参数对所述网页代码进行编译；

依据所述预设渲染参数对编译后的网页代码进行渲染，并将所述目标图片添加到所述编译后的网页代码；

依据所述轮播控制要求设置所述目标图片的轮播控制逻辑，得到初始轮播组件；

将所述初始轮播组件及所述目标应用端类型发送至云服务器，以使所述云服务器依据所述目标应用端类型对应的处理方式对所述初始轮播组件进行打包处理，打包后的结果作为所述待生成轮播组件；

接收所述云服务器发送的所述待生成轮播组件。

优选的，所述预设渲染参数包括：

位移属性值。

优选的，所述依据所述预设渲染参数对编译后的网页代码进行渲染包括：

读取所述位移属性值；

依据所述位移属性值设置所述目标图片间的距离。

优选的，所述轮播控制要求包括：目标图片切换触发条件，所述目标图片切换触发条件包括：滑动操作、点击操作、定时和锚点触发中的一种或几种的组合。

优选的，所述轮播控制要求还包括目标图片跳转触发条件，所述目标图片跳转触发条件包括：点击操作。

优选的，在所述目标图片切换触发条件包括滑动操作的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

检测手指触摸屏幕时的坐标点，确定所述坐标点是否处于预设切换控制区域；

在所述坐标点处于预设切换控制区域，且检测到手指滑动操作的情况下，确定当前目标图片按照预设方向移动的目标位置，所述预设方向为与所述手指滑动方向相同或相反的方向，所述目标位置为所述当前目标图片的中心点横坐标沿所述预设方向平移第一值后的位置，所述第一值为所述手指滑动操作的终点与起始点横坐标差的绝对值；

若所述目标位置未超出展示目标图片的窗口区域，则将所述当前目标图片移动到所述目标位置；

若所述目标位置超出所述展示目标图片的窗口区域，则在所述展示目标图片的窗口区域显示下一目标图片。

在所述坐标点处于预设切换控制区域，且检测到手指滑动操作的情况下，计算所述滑动操作的移动距离；

若所述移动距离没有超出展示目标图片的窗口区域，则在所述展示目标图片的窗口区域显示当前目标图片；

若所述移动距离超出所述展示目标图片的窗口区域，则在所述展示目标图片的窗口区域显示下一目标图片。

获取所述目标图片的宽度，并计算所述位移属性值对应的目标图片间的距离；

若所述滑动操作的移动距离大于所述目标图片间的距离，则在展示目标图片的窗口区域显示下一目标图片；

若所述滑动操作的移动距离不大于所述目标图片间的距离，则在所述展示目标图片的窗口区域显示当前目标图片。

优选的，在所述目标图片切换触发条件包括锚点触发的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

预先为每一目标图片设置对应的锚点;

检测到对所述锚点的触发操作时，在展示目标图片的窗口区域渲染所述锚点对应的目标图片，所述触发操作包括点击操作或滑过操作。

一种轮播组件生成装置，包括：

参数获取单元，用于获取待生成轮播组件的生成参数，所述生成参数包括：页面显示参数、目标图片的标识、预设渲染参数、轮播控制要求及目标应用端类型；

编译单元，用于加载跨平台前端应用uniapp框架，获取网页代码，在所述uniapp框架中，依据所述页面显示参数对所述网页代码进行编译；

渲染单元，用于依据所述预设渲染参数对编译后的网页代码进行渲染，并将所述目标图片添加到所述编译后的网页代码；

逻辑设置单元，用于依据所述轮播控制要求设置所述目标图片的轮播控制逻辑，得到初始轮播组件；

发送单元，用于将所述初始轮播组件及所述目标应用端类型发送至云服务器，以使所述云服务器依据所述目标应用端类型对应的处理方式对所述初始轮播组件进行打包处理，打包后的结果作为所述待生成轮播组件；

接收单元，用于接收所述云服务器发送的所述待生成轮播组件。

由此可见，本发明公开的轮播组件生成方法和装置，在创建组件时考虑了应用端的类型，将不同的类型作为对轮播组件进行对应的打包处理的依据，从而无需对整体的生成流程做很大改动，降低了组件开发难度和复杂度。

附图说明

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

图1为本申请实施例公开的一种轮播组件生成方法的流程图；

图2为本申请实施例公开的又一种轮播组件生成方法的流程图；

图3为本申请实施例公开的又一种轮播组件生成方法的流程图；

图4为本申请实施例公开的一种轮播组件生成装置的结构示意图。

具体实施方式

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

本申请公开了一种轮播组件生成方法，其流程如图1所示，包括：

步骤S101：获取待生成轮播组件的生成参数，所述生成参数包括：页面显示参数、目标图片的标识、预设渲染参数、轮播控制要求及目标应用端类型。

本实施例在Hbuilderx编辑器中完成。HBuilderX编辑器简称HX，HBuilder，H 是超文本标记语言HTML 的缩写，Builder 是建设者。HBuilderX编辑器是为前端开发者服务的通用集成开发环境IDE。

在生成轮播组件时，首先需要确定生成的轮播组件是什么样子的，所以需要获得生成参数。生成参数包括表征轮播组件所在的HTML页面的样式的页面显示参数，表征将哪些图片进行轮播的目标图片的标识，表征目标图片在页面中的显示效果的预设渲染参数，表征轮播组件中的目标图片是如何被控制实现轮播效果的轮播控制要求参数，以及最为关键的，表征轮播组件应用在哪个类型的应用端的目标应用端类型。也就是说，本实施例在生成轮播组件时，能够考虑到该轮播组件要应用的终端类型，有针对性的生成轮播组件。

步骤S102：加载uniapp框架，获取网页代码，在所述uniapp框架中，依据所述页面显示参数对所述网页代码进行编译。

在uniapp框架中对HTML页面进行编译。确定HTML页面的样式。uniapp 是一个使用Vue.js 开发跨平台前端应用的框架，可发布到iOS、Android、Web（响应式）、以及各种小程序。

步骤S103：依据预设渲染参数对编译后的网页代码进行渲染，并将所述目标图片添加到所述编译后的网页代码。

渲染的效果由渲染参数决定，例如展示目标图片的窗口设置边框，添加切换控制的按钮，例如左右箭头等。在网页代码中添加多个对象，每个对像对应一张目标图片。

步骤S104：依据所述轮播控制要求设置所述目标图片的轮播控制逻辑，得到初始轮播组件。

轮播控制逻辑是用来设定目标图片如何实现轮播的，其实现的效果可以为滑动切换图片，点击切换图片，定时切换图片或点击锚点实现切换等一种或多种的组合。

步骤S105：将所述初始轮播组件及所述目标应用端类型发送至云服务器，以使所述云服务器依据所述目标应用端类型对应的处理方式对所述初始轮播组件进行打包处理，打包后的结果作为所述待生成轮播组件。

在本步骤中，将初始轮播组件发送至云服务器，由云服务器按照最终轮播组件应用的应用端的类型进行打包，从而使得打包后的轮播组件能够满足该类型应用端的需求，适应该类型终端的显示或者运行要求。

具体的，在使用HBuilderX编辑器开发完代码后，点击发布时选择要输出的平台选项，该平台选项就对应目标应用端的类型。然后编辑器会把开发完的代码上传到云服务，云服务按照平台选项进行打包，等待数秒后，会返回来打包后的程序包，该程序包就是能够部署到对应的目标应用端上的程序包，之后对程序包进行部署。

步骤S106：接收所述云服务器发送的所述待生成轮播组件。

本步骤中的待生成轮播组件就是能够部署到对应的目标应用端上的程序包。

本实施例公开的轮播组件生成方法中，在创建组件时考虑了应用端的类型，将不同的类型作为对轮播组件进行对应的打包处理的依据，从而无需对整体的生成流程做很大改动，降低了组件开发难度和复杂度。

在一种可能的实现方式中，所述预设渲染参数包括：translate属性值，也就是位移属性值。该属性是CSS新特性，用于改变元素的平移量。

则所述依据预设渲染参数对编译后的网页代码进行渲染包括：

读取所述translate属性值；

依据所述translate属性值设置所述目标图片间的距离。

在一种可能的实现方式中，所述轮播控制要求包括：目标图片切换触发条件，所述目标图片切换触发条件包括：滑动操作、点击操作、定时和锚点触发中的一种或几种的组合。

也就是说，可以通过滑动、点击、设置定时器或锚点的方式实现对目标图片的轮播切换控制。

对于滑动进行轮播切换控制来说，可以是向左滑动，也可以是向右滑动，当向左滑动的时候，把当前目标图片右侧的目标图片渲染到窗口上，以此类推，当把最后一张目标图片渲染到窗口后，如果仍然向左滑动，则将第一张目标图片重新进行渲染显示。

在滑动和定时同时进行控制的示例中，设置定时器，按照预定的时间间隔切换目标图片。而当检测到用户的滑动操作，则清除定时器，根据滑动操作确定哪个目标图片作为所述轮播图片。

滑动操作可以为用户拖拽图片行为触发的指令，也可以是用户滑动图片操作触发的指令，启动定时器之后，如果检测到滑动指令，则清除定时器，根据滑动指令将目标图片滑动至展示目标图片的窗口区域，进行渲染展示。

为了描述方便，以下示例中将展示目标图片的窗口区域简称为窗口区域。

当拖拽行为或者滑动操作结束时，可以检测到滑动指令结束，当滑动指令结束时，需要重启计时器，以便对象数据组中的轮播图片进行自动轮播。

进一步的，所述轮播控制要求还包括目标图片跳转触发条件，所述目标图片跳转触发条件包括点击操作。

为实现这一要求，需为所述目标图片添加点击事件onclick事件，所述点击事件中包含所述目标图片对应的跳转地址。跳转地址对应的可以是一个网页，或者另一张图片，或者一段文字等等，可以根据需求设定，进一步扩充轮播组件的功能。

在一种可能的实现方式中，如果目标图片切换触发条件包括：滑动操作，则依据所述轮播控制要求设置所述目标图片的轮播控制逻辑如图2所示，包括：

步骤S201：检测手指触摸屏幕时的坐标点，确定所述坐标点是否处于预设切换控制区域。

步骤S202：在所述坐标点处于预设切换控制区域，且检测到手指滑动操作的情况下，确定当前目标图片按照预设方向移动的目标位置。

所述预设方向为：与所述手指滑动方向相同或相反的方向，所述目标位置为：所述当前目标图片的中心点横坐标沿所述预设方向平移第一值后的位置，所述第一值为所述手指滑动操作的终点与起始点横坐标差的绝对值。

步骤S203：若所述目标位置未超出窗口区域，则将所述当前目标图片移动到所述目标位置。

当前目标图片移动到目标位置后，虽然该位置还在窗口区域，但是图片的部分区域可能存在超出窗口区域范围，则当前目标图片仅能显示一部分，而窗口区域中存在空白。为了补充这一空白，可以控制下一目标图片进行补充，也就是滚动处理从而避免出现空白。

步骤S204：若所述目标位置超出窗口区域，则在窗口区域显示下一目标图片。

也就是说，如果通过滑动操作确定出的终点位置已经超出了窗口区域，则自动切换下一张目标图片在窗口区域中显示，从而实现轮播效果。

在另一种可能的实现方式中，如果目标图片切换触发条件包括：滑动操作，则依据所述轮播控制要求设置所述目标图片的轮播控制逻辑如图3所示，包括：

步骤S301：检测手指触摸屏幕时的坐标点，确定所述坐标点是否处于预设切换控制区域。

步骤S302：在所述坐标点处于预设切换控制区域，且检测到手指滑动操作的情况下，计算滑动操作的移动距离。

步骤S303：若移动距离没有超出窗口区域，则在窗口区域显示当前目标图片。

步骤S304：若移动距离超出窗口区域，则在窗口区域显示下一目标图片。

在本实施例中，通过确定滑动操作的移动距离来确定是否要进行图片的切换。如果滑动操作距离较小，则可以不做切换操作。如果滑动操作距离较大，超出了窗口区域范围，则直接切换下一目标图片。

当然，为了达到更好的显示效果，在移动距离未超出窗口区域时，可以设置回弹效果，让当前的目标图片可以动态跟随滑动操作移动后又回到窗口区域。

在检测到滑动操作后，除以上控制逻辑的示例外，还可以有如下方式实现目标图片的切换：

检测手指触摸屏幕时的坐标点，确定所述坐标点是否处于预设切换控制区域；在所述坐标点处于预设切换控制区域，且检测到手指滑动操作的情况下，计算所述滑动操作的移动距离；获取目标图片的宽度，并计算渲染参数中配置的translate属性值对应的目标图片间的距离；若滑动操作的移动距离大于目标图片间的距离，那么在窗口区域显示下一目标图片；反之，则仍然显示当前目标图片。

在另一可能的显示方式，在所述目标图片切换触发条件包括锚点触发的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：预先为每一目标图片设置对应的锚点；检测到对所述锚点的触发操作时，在窗口区域渲染所述锚点对应的目标图片，所述触发操作包括点击操作或滑过操作。

如html中定义一个锚点，这里可以用name或者id

<ul>

本申请同时公开了一种轮播组件生成装置，其结构如图4所示，包括：

参数获取单元401，用于获取待生成轮播组件的生成参数，所述生成参数包括：页面显示参数、目标图片的标识、预设渲染参数、轮播控制要求及目标应用端类型；

编译单元402，用于加载uniapp框架，获取网页代码，在所述uniapp框架中，依据所述页面显示参数对所述网页代码进行编译；

渲染单元403，用于依据预设渲染参数对编译后的网页代码进行渲染，并将所述目标图片添加到所述编译后的网页代码；

逻辑设置单元404，用于依据所述轮播控制要求设置所述目标图片的轮播控制逻辑，得到初始轮播组件；

发送单元405，用于将所述初始轮播组件及所述目标应用端类型发送至云服务器，以使所述云服务器依据所述目标应用端类型对应的处理方式对所述初始轮播组件进行打包处理，打包后的结果作为所述待生成轮播组件；

接收单元406，用于接收所述云服务器发送的所述待生成轮播组件。

本实施例公开的轮播组件生成装置中，在创建组件时考虑应用端的类型，将不同的类型作为对轮播组件进行对应的打包处理的依据，从而无需对整体的生成流程做很大改动，降低了组件开发难度和复杂度。

本实施例公开的装置的工作流程可以参考以上方法实施例中的内容，具体不再赘述。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本发明各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减，各实施例中记载的技术特征可以进行替换或者组合。

本发明各实施例种装置及终端中的模块和子模块可以根据实际需要进行合并、划分和删减。

本发明所提供的几个实施例中，应该理解到，所揭露的终端，装置和方法，可以通过其它的方式实现。例如，以上所描述的终端实施例仅仅是示意性的，例如，模块或子模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个子模块或模块可以结合或者可以集成到另一个模块，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

另外，在本发明各个实施例中的各功能模块或子模块可以集成在一个处理模块中，也可以是各个模块或子模块单独物理存在，也可以两个或两个以上模块或子模块集成在一个模块中。上述集成的模块或子模块既可以采用硬件的形式实现，也可以采用软件功能模块或子模块的形式实现。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件单元，或者二者的结合来实施。软件单元可以置于随机存储器（RAM）、内存、只读存储器（ROM）、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims

1.一种轮播组件生成方法，其特征在于，包括：

接收所述云服务器发送的所述待生成轮播组件。

2.根据权利要求1所述的方法，其特征在于，所述预设渲染参数包括：

位移属性值。

3.根据权利要求2所述的方法，其特征在于，所述依据所述预设渲染参数对编译后的网页代码进行渲染包括：

读取所述位移属性值；

依据所述位移属性值设置所述目标图片间的距离。

4.根据权利要求3所述的方法，其特征在于，所述轮播控制要求包括：目标图片切换触发条件，所述目标图片切换触发条件包括：滑动操作、点击操作、定时和锚点触发中的一种或几种的组合。

5.根据权利要求4所述的方法，其特征在于，所述轮播控制要求还包括目标图片跳转触发条件，所述目标图片跳转触发条件包括：点击操作。

6.根据权利要求4所述的方法，其特征在于，在所述目标图片切换触发条件包括滑动操作的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

7.根据权利要求4所述的方法，其特征在于，在所述目标图片切换触发条件包括滑动操作的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

8.根据权利要求4所述的方法，其特征在于，在所述目标图片切换触发条件包括滑动操作的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

9.根据权利要求4所述的方法，其特征在于，在所述目标图片切换触发条件包括锚点触发的情况下，所述依据所述轮播控制要求设置所述目标图片的轮播控制逻辑包括：

预先为每一目标图片设置对应的锚点;

10.一种轮播组件生成装置，其特征在于，包括：