抽奖业务实现方法和组件与流程

本发明涉及互联网技术领域，具体而言，涉及一种抽奖业务实现方法和组件。

背景技术：

为了提高页面浏览者的参与度，运营人员通常会在活动页面中加入抽奖的功能，以引导用户积极参与活动和分享，从而达到引流的目的。因而，如何在页面便捷地实现抽奖业务成为需要解决的技术问题。

技术实现要素：

有鉴于此，本发明实施例的目的在于提供一种抽奖业务实现方法和组件，以提高在页面实现抽奖业务的便捷性。

第一方面，本发明实施例提供了一种抽奖业务实现方法，包括：

在页面上加载预先配置的抽奖业务组件；

在所述页面显示对应的抽奖业务界面，所述抽奖业务界面中包括用于接收用户配置信息的配置项目；

在接收到用户通过所述配置项目输入的配置内容之后，根据所述配置内容对所述抽奖业务界面进行重绘。

可选地，所述配置项目为多个，所述根据所述配置内容对所述抽奖业务界面进行重绘的步骤包括：

获得通过每一个所述配置项目输入的配置内容，将通过每一个所述配置项目输入配置内容后的抽奖业务界面进行实时渲染并进行显示预览。

可选地，所述抽奖业务组件中定义了与开发环境对应的第一脚本和与发布环境对应的第二脚本，所述第一脚本相较于所述第二脚本增设有编辑功能；所述方法还包括：

判断所述抽奖业务组件是否处于配置状态或者预览状态，若处于配置状态或者预览状态，则加载所述第一脚本；若未处于配置状态或者预览状态，则加载所述第二脚本。

可选地，所述抽奖业务组件为九宫格抽奖组件，所述抽奖业务界面为九宫格抽奖界面，所述配置项目包括八个奖品图表，一个开始按钮和一个预设的抽奖池id。

可选地，根据所述配置内容对所述抽奖业务界面进行重绘的步骤包括：

根据所述九宫格抽奖界面外围容器的宽度和高度动态计算所述九宫格抽奖界面中每个格子的尺寸；

将配置内容对应添加入各所述格子中。

可选地，在显示渲染后的所述抽奖业务界面之后，所述方法还包括：

接收到抽奖请求时，进行随机抽奖，渲染中奖的动画信息并进行显示；或者

接收到抽奖请求时，向后端服务平台发送抽奖请求；

接收所述后端服务平台反馈的中奖奖品信息；

查找所述中奖奖品对应的所述九宫格中的格子，根据查找到的格子渲染中奖的动画信息并进行显示。

第二方面，本发明实施例提供了一种抽奖业务组件，包括：

组件加载模块，用于在页面上加载预先配置的抽奖业务组件；

界面显示模块，用于在所述页面显示对应的抽奖业务界面，所述抽奖业务界面中包括用于接收用户配置信息的配置项目；

界面处理模块，用于在接收到用户通过所述配置项目输入的配置内容之后，根据所述配置内容对所述抽奖业务界面进行重绘。

可选地，所述配置项目为多个，所述界面处理模块用于获得通过每一个所述配置项目输入的配置内容，将通过每一个所述配置项目输入配置内容后的抽奖业务界面进行实时渲染并进行显示预览。

第三方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，所述计算机程序运行时控制所述计算机可读存储介质所在抽奖业务组件执行上述的抽奖业务实现方法。

本发明实施例提供的抽奖业务实现方法和组件，将抽奖业务功能和逻辑封装成独立的抽奖业务组件，只需在页面上加载预先配置好的抽奖业务组件即可在页面上实现抽奖业务，并且该抽奖业务组件对应的抽奖业务界面支持自定义配置，只需在配置项目中输入配置内容，即可实现抽奖业务界面的重绘，实现较为便捷，灵活。

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

附图说明

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

图1为本发明较佳实施例提供的一种电子设备10的方框示意图。

图2为本发明实施例提供的一种抽奖业务实现方法的流程图。

图3为一实施方式中图2所示步骤s13包括的子步骤的示意图。

图4为本发明实施例提供的抽奖业务实现方法的又一流程图。

图5为本发明较佳实施例提供的一种抽奖业务组件20的模块框图。

图标：10-电子设备；11-存储器；12-处理器；13-网络模块；20-抽奖业务组件；21-组件加载模块；22-界面显示模块；23-界面处理模块。

具体实施方式

经发明人研究发现，在页面从零开发完备的抽奖功能，对开发人员的能力有一定程度的要求，不仅需要编写代码，还需要在开发的时候考虑到页面的兼容性问题，需要考虑到在不同的浏览器上抽奖功能均有较为良好的表现，不至于样式错乱和功能异常。对于测试人员来说，由于每个需求都是重新实现的功能，那么每个需求测试的时候，都需要对相同的功能进行重复测试，这样无形中加大了测试人员的工作负担。

基于上述研究，本发明实施例提出一种抽奖业务实现方案：将复杂的抽奖业务功能和逻辑封装成独立的抽奖业务组件，使得页面开发人员只需要在实现页面时在页面的相应位置加入该抽奖业务组件，即可在不编写代码的前提下在页面实现抽奖业务。

针对以上方案所存在的缺陷，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本发明实施例针对上述问题所提出的解决方案，都应该是发明人在本发明过程中对本发明做出的贡献。

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

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

如图1所示，本发明实施例中的抽奖业务实现方案可以应用在具有页面显示功能的电子设备10中，本发明实施例中的电子设备10可以为具有页面显示、处理功能的手机、电脑、服务器等。如图1所示，电子设备10包括：存储器11、处理器12、网络模块13及抽奖业务组件20。

所述存储器11、处理器12以及网络模块13相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器11中存储有抽奖业务组件20，所述抽奖业务组件20包括至少一个可以软件或固件(firmware)的形式存储于所述存储器11中的软件功能模块，所述处理器12通过运行存储在存储器11内的软件程序以及模块，如本发明实施例中的抽奖业务组件20，从而执行各种功能应用以及数据处理，即实现本发明实施例中的抽奖业务实现方法。

其中，所述存储器11可以是，但不限于，随机存取存储器(randomaccessmemory，ram)，只读存储器(readonlymemory，rom)，可编程只读存储器(programmableread-onlymemory，prom)，可擦除只读存储器(erasableprogrammableread-onlymemory，eprom)，电可擦除只读存储器(electricerasableprogrammableread-onlymemory，eeprom)等。其中，存储器11用于存储程序，所述处理器12在接收到执行指令后，执行所述程序。

所述处理器12可能是一种集成电路芯片，具有数据的处理能力。上述的处理器12可以是通用处理器，包括中央处理器(centralprocessingunit，cpu)、网络处理器(networkprocessor，np)等。可以实现或者执行本发明实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

网络模块13用于通过网络建立电子设备10与外部通信终端之间的通信连接，实现网络信号及数据的收发操作。上述网络信号可包括无线信号或者有线信号。

可以理解，图1所示的结构仅为示意，电子设备10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

请参阅图2，是本发明较佳实施例提供的一种抽奖业务实现方法的流程图。下面将对图2所示的具体流程进行详细阐述。

步骤s11，在页面上加载预先配置的抽奖业务组件。

本实施例中，抽奖业务组件集成了抽奖业务功能和逻辑，例如，抽奖业务组件集成了抽奖业务界面的绘制、抽奖业务与后端接口的交互、用户登陆授权、中奖后的界面展示与提示功能等。

通过将抽奖业务功能和逻辑封装成独立的抽奖业务组件，对抽奖业务组件进行一次测试上线之后，由于后续的操作不涉及代码层面的修改和编写，因而在使用时无需对抽奖业务组件进行重复测试等操作，只需在页面的相应位置加入该抽奖业务组件，提前配置好抽奖池信息即可实现抽奖功能。

步骤s12，在所述页面显示对应的抽奖业务界面，所述抽奖业务界面中包括用于接收用户配置信息的配置项目。

为了提高抽奖业务实现的灵活性，满足不同用户的个性化需求，抽奖业务界面中包括配置项目，应理解，根据用户需求的不同以及抽奖业务界面展示形式的不同，配置项目可以灵活设置。例如，抽奖业务组件可以为九宫格抽奖组件，相应地，抽奖业务界面为九宫格抽奖界面，所述配置项目可以包括八个奖品图表，一个开始按钮和一个预设的抽奖池id。应当理解，配置项目的数量和内容还可以有其他选择，本实施例对此不作限制。

步骤s13，在接收到用户通过所述配置项目输入的配置内容之后，根据所述配置内容对所述抽奖业务界面进行重绘。

本实施例中，虽然设置有配置项目，但是，可以选择输入配置内容或者不输入配置内容，在未输入配置内容的情况下，抽奖业务组件直接渲染和显示默认的抽奖业务界面。在用户通过配置项目输入配置内容的情况下，则根据配置内容对抽奖业务界面进行重绘，展示输入配置内容之后的抽奖业务界面。

由于抽奖业务组件被页面开发人员或者设计人员加入页面时显示的为预先设置的默认抽奖业务界面，在抽奖业务组件面向页面的开发人员和运营维护人员提供了编辑和自定义功能，用于自定义奖品的预览图片和抽奖开始的按钮，同时也提供了定义抽奖池的功能，从而使得抽奖业务组件满足不同的业务和需求的情况下，为了进一步提高使用的便捷性和确保抽奖业务界面正常显示，抽奖业务组件可以根据外围容器的宽度和高度动态计算显示尺寸。

请结合参阅图3，以抽奖业务组件为九宫格抽奖组件为例，可选地，抽奖业务组件通过以下步骤计算显示尺寸及完成配置内容添加。

步骤s131，抽奖业务组件根据九宫格抽奖界面外围容器的宽度和高度动态计算所述九宫格抽奖界面中每个格子的尺寸。

步骤s132，将配置内容对应添加入各所述格子中，从而实现了九宫格抽奖界面的渲染。

基于上述方案即可便捷地在页面实现抽奖业务。在显示渲染后的所述抽奖业务界面之后，所述抽奖业务实现方法还包括完成抽奖和显示中奖结果的方案。

可选地，在本实施例中，接收到抽奖请求时，抽奖业务组件可以通过多种方式完成抽奖和显示中奖结果，例如，接收到抽奖请求时，进行随机抽奖，渲染中奖的动画信息并进行显示。又例如，接收到抽奖请求时，向后端服务平台发送抽奖请求，接收所述后端服务平台反馈的中奖奖品信息，查找所述中奖奖品对应的所述九宫格中的格子，根据查找到的格子渲染中奖的动画信息并进行显示。

为了确保用户能够实时看到配置内容之后的效果，在配置项目为多个的情况下，步骤s13可以包括：获得通过每一个配置项目输入的配置内容，将通过每一个配置项目输入配置内容后的抽奖业务界面进行实时渲染并进行显示预览。如此设计，使得用户每输入一个配置内容均可以实时看到对应的展示效果，从而及时进行确认或者更改。

为了让用户方便快捷地预览抽奖业务界面的交互和动画效果，抽奖业务组件可以区分编辑模式和发布模式，编辑模式与开发环境对应，发布模式与发布环境对应，根据所处环境的不同定义不同的启动脚本，例如，与开发环境对应的第一脚本和与发布环境对应的第二脚本，第一脚本相较于所述第二脚本增设有编辑功能。

相应地，如图4所示，抽奖业务实现方法还包括以下步骤。

步骤s21：判断所述抽奖业务组件是否处于配置状态或者预览状态，若处于配置状态或者预览状态，则执行步骤s22，若未处于配置状态或者预览状态，则执行步骤s23。

步骤s22，加载所述第一脚本。

步骤s23，加载所述第二脚本。

其中，判断业务组件处于开发环境还是发布环境的方式有多种，除了上述基于是否处于配置状态或者预览状态进行判断之外，还可以通过定义变量进行判断，例如，定义变量isineditmode:在开发环境中为true，发布环境中为false，通过对所定义变量进行判断即可得出抽奖业务组件当前处于开发环境还是发布环境。

鉴于在开发环境中，主要是为了确定抽奖业务界面展示效果，因而，在开发环境中，接收到抽奖请求时，无需与后端服务平台如后端接口进行交互，直接采用随机数模拟后端接口返回的中奖结果并进行动画渲染、显示。基于此，在显示渲染后的所述抽奖业务界面之后，所述方法还包括：接收到抽奖请求时，判断所述抽奖业务组件是否在运行所述第一脚本，若在运行所述第一脚本，则进行随机抽奖，渲染中奖的动画信息并进行显示。

为了更为清楚地阐述本发明实施例的实现流程，现以抽奖业务组件为九宫格抽奖组件，九宫格抽奖界面为转盘为例进行举例说明。

当九宫格抽奖组件被页面的开发人员或者设计人员加入页面时显示预先设置的、用于演示的默认转盘，为了让九宫格抽奖组件满足不同的业务和需求，九宫格抽奖组件面向页面的开发人员和运营维护人员提供了编辑和自定义功能，用于自定义奖品的预览图片和抽奖开始的按钮，同时也提供了定义抽奖池的功能，页面的开发人员和运营维护人员在上传了图片之后，只需要分别填写八个抽奖图片和一个抽奖按钮的默认样式图片和高亮样式图片，九宫格抽奖组件会根据外围容器的宽度和高度动态计算出九宫格每个格子的尺寸，然后将默认的图片填充到每个格子内，从而实现九宫格抽奖界面的渲染，用户预览到的效果就是最终渲染出来的效果。

通过将九宫格抽奖业务抽象为公用的配置项如奖品、按钮、抽奖池信息等构成的九宫格抽奖组件，用户只需要在九宫格抽奖界面配置好奖品和按钮的图片，然后填写后端分配的抽奖池id就能实现抽奖业务，使用范围更为广泛，使用更为便捷。动态地根据外围容器计算九宫格的尺寸，无需让用户手动填写，这样保证了九宫格抽奖组件在不同尺寸的屏幕和设备上均可以达到很好的显示效果，实现了响应式的功能。

为了方便页面的开发人员能够在自定义配置时实时预览配置后的展示效果，九宫格抽奖组件定义两套启动脚本，可以将启动脚本理解为整个抽奖功能的实现模块，两套启动脚本分别针对开发环境和发布环境，发布环境的启动脚本相对于开发环境的启动脚本去除了组件的编辑功能，通过定义变量isineditmode在开发环境中为true,发布环境中为false来判断当前所处的环境，在开发环境中，用户点击抽奖时，无需与后端接口进行交互，而是采用随机数来模拟后端接口返回的中奖结果进行动画的渲染，用户即能够实时看到最终展示效果，达到所见即所得的目的。其中，随机数抽奖可以通过调用javascript的math.random()函数来随机生成1-8，从而来模拟转盘上的奖品，该过程可以在离线状态完成。

针对不同的环境定义不同的启动脚本，可以优化抽奖业务实现流程，发布环境下不需要用户进行编辑，去除不必要编辑功能，可以达到精简代码，缩小文件的效果。

在线上环境中，用户点击了抽奖按钮之后，九宫格抽奖组件可以先判断用户是否登录，如果没有登录则跳转到登录页面让用户进行登录。当用户登录成功之后，九宫格抽奖组件从自身的状态中获取到开发人员配置的抽奖池id，然后将抽奖池id连同用户信息传递给后端接口，根据后端接口返回的状态进行中奖展示。当用户的登录信息失效后，抽奖池id亦会跳到登录页面让用户进行登录。当用户没有抽奖权限或者存在其它错误，九宫格抽奖组件则提示用户。当用户抽中奖品时，九宫格抽奖组件展示动画效果，动画效果可以为从当前停留的位置到后端接口返回的奖品的位置不断切换奖品的默认图片和高亮图片，最后停留在中奖奖品的位置，然后根据后端接口返回的奖品信息拼接成提示消息展示给用户，从而完成了整个抽奖的过程。

通过将抽奖业务功能封装为抽奖业务组件，使得页面的开发人员和设计人员等抽奖业务的使用者可以在不写代码的情况下将九宫格抽奖的功能引入页面。同时，由于配置项目不涉及到九宫格抽奖组件的功能层面，因此测试人员无需重复测试抽奖的功能，极大地提高了测试效率，减少出错的几率。

为了让页面的开发人员针对中奖信息进行更进一步的处理，如将中奖信息进行上报和记录等，九宫格抽奖组件可以在执行完毕上述抽奖流程之后，发送一个名为squre.lottery.message的消息，这个消息完整的包含了后端接口返回的信息，开发人员可以选择性的处理这个消息，达到更高级的自定义。九宫格抽奖组件通过信息的反馈实现了更好的可扩展性和复用性，用户在依靠九宫格抽奖组件处理了基本的抽奖业务逻辑之后还可以进行更进一步的定制，从而满足更多的业务需求。

在上述基础上，如图5所示，本发明实施例提供了一种抽奖业务组件20，所述抽奖业务组件20包括组件加载模块21、界面显示模块22和界面处理模块23。

其中，组件加载模块21用于在页面上加载预先配置的抽奖业务组件20。

由于组件加载模块21和图1中步骤s11的实现原理类似，因而在此不作更多说明。

界面显示模块22用于在所述页面显示对应的抽奖业务界面，所述抽奖业务界面中包括用于接收用户配置信息的配置项目。

由于界面显示模块22和图1中步骤s12的实现原理类似，因而在此不作更多说明。

界面处理模块23用于在接收到用户通过所述配置项目输入的配置内容之后，根据所述配置内容对所述抽奖业务界面进行重绘。

由于界面处理模块23和图1中步骤s13的实现原理类似，因而在此不作更多说明。

可选地，所述配置项目为多个，所述界面处理模块23用于获得通过每一个所述配置项目输入的配置内容，将通过每一个所述配置项目输入配置内容后的抽奖业务界面进行实时渲染并进行显示预览。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序。所述计算机程序运行时控制所述计算机可读存储介质所在抽奖业务组件20执行上述的抽奖业务实现方法。

本发明实施例提供的抽奖业务实现方法和组件，将抽奖业务功能和逻辑封装成独立的抽奖业务组件，只需在页面上加载预先配置好的抽奖业务组件即可在页面上实现抽奖业务，并且该抽奖业务组件对应的抽奖业务界面支持自定义配置，只需在配置项目中输入配置内容，即可实现抽奖业务界面的重绘，实现较为便捷，灵活。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的组件和方法，也可以通过其它的方式实现。以上所描述的组件和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的组件、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的可选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。