抽奖插件使用教程 - H5开发教程

案例演示

抽奖插件简介

抽奖活动是运营人员常用的活动工具之一，几乎每款APP都有过抽奖活动，比如大转盘抽奖，是目前效果最出众的运营玩法之一。它可以帮助运营人活动促活，实现高效转化。我们可以依据自己的场景需求，选择不同的抽奖类型进行H5作品的趣味设计，包括大转盘、砸金蛋、抽奖箱、扭蛋机、九宫格等等。

版本权限：专业版及以上版本可商用，专业版以下版本，单个插件可试用100次。

插件使用须知

注：抽奖插件配置投入使用后，不建议再更改抽奖配置，具体说明如下：

【场景1】：改变已设置的奖品数量，可能会引发数据不一致问题：如果在修改的时候，有很多用户抽中了当前奖项，可能引发数据不一致问题。

【场景2】：新增同等级奖项，新增一个同等级的应用是没有影响的，会直接更新，不存在并发导致的数据问题。

【场景3】：先删除原有奖项再追加新奖项，会直接更新，不存在并发导致的数据问题。

【场景4】：含有抽奖插件的作品，不支持复制并在新的作品上修改/删除抽奖插件，否则会影响原作品中抽奖的数据。建议每个作品单独添加抽奖插件；

抽奖插件添加及配置

注：以下教程主要以大转盘为设置演示案例，其他抽奖类型也是相同的设置哦。

一、添加抽奖插件

在顶部工具栏中的互动组件——抽奖来添加组件。注意一个H5作品中只可以添加1个抽奖插件。

二、设置元素插件属性

点击画布中的抽奖插件，右侧会出现插件属性面板。

属性面板由抽奖类型、配置抽奖信息、管理抽奖数据和清空抽奖数据组成，我们可以设置抽奖规则、奖品等级、活动时间等抽奖信息，并可查看抽奖用户的信息等。另外，触发器还可设置用户抽中奖品时、抽奖失败时、抽中非奖品时的触发行为。

1.右侧属性面板——类型

点击类型下拉框，可切换到不同的抽奖类型。目前支持的抽奖类型包括：大转盘、砸金蛋、抽奖箱、扭蛋机、九宫格共五种类型，后续会开放更多趣味功能，敬请期待哦！

抽奖类型展示如下：

大转盘

砸金蛋

抽奖箱

扭蛋机

九宫格

2.配置抽奖信息

点击配置抽奖信息弹出配置面板，可设置抽奖插件的相关信息。

2.1基本设置：

可设置抽奖的活动标题、活动起止时间、举办方名称、活动规则说明及活动图片。

其中，活动图片支持下载、上传图片替换或复原初始图片，并附有图片制作尺寸供参考哦。

手机端演示效果图：

2.2规则设置：

设置抽奖规则包括：抽奖的规则、抽奖次数、抽中次数、及设置抽奖插件的的显示项。

注：大转盘支持在活动规则中配置：只显示文字、只显示图片、显示文字和图片等类型。

建议用户上传的奖品图片为正方形，确保在转盘中不会变形。

可以依据想要在抽奖界面中显示的内容进行选择设置。

比如：当选择显示中奖用户滚动列表时，页面下方会循环展示用户中奖情况（前提是有人抽奖后才会显示）。

注：为了应对高并发，服务器会每隔十分钟刷新一次，这样处理后，并发可以满足几百人同时抽奖的要求。

因此，“中奖者滚动列表”不会实时刷新所有用户的中奖信息，“中奖者滚动列表”会在当前用户抽中奖后显示当前用户的中奖信息，当前用户退出h5重进后，不会在中奖滚动列表中看到自己之前的中奖滚动信息。但用户可以在“我的奖品”按钮处看到自己的中奖信息。

2.3表单设置：

此处可设置是否要收集抽奖用户信息，以及收集哪些信息，比如常用的姓名、电话、地址等，此外若还想收集其他信息，可支持添加两个自定义字段；

另外还可以设置用户填写信息的时段，分为抽奖前填写和中奖后再填写。

抽奖前填写：用户点击抽奖按钮时会先出现填写信息的弹窗，正确填写提交后，才可参与抽奖活动。

中奖后再填写：用户可以先点击开始抽奖，若抽中奖品后，会出现信息填写的弹窗。

2.4提示文案：

用户在参与抽奖后，无论其中奖或未中奖，页面中都会出现一个弹窗提示，此处支持我们对弹窗内的提示文案及按钮文字进行个性化修改。

2.5样式设置

有时我们会需要对插件本身部分样式进行个性化调整，样式设置中支持我们自行编辑CSS 文档，支持嵌套，便于我们根据自己的想法需求去调整抽奖组件的布局和外观。

后续，我们将在【样式设置】面板中增加一些默认的css代码，方便不会代码的用户自定义文字颜色、字号、阴影等设置。

大家也可以自行学习css样式：https://www.w3school.com.cn/cssref/index.asp

2.6奖项设置：

可在该页面自定义配置抽奖奖项，最多可添加8个奖项。点击奖项右边的编辑可进入单个奖项具体内容（表格配置）设置，从上往下依次设置奖项、奖品名称、奖品图片、奖品类型、奖品数量，其中奖品图片支持下载、替换或复原。

配置面板—奖项设置—奖品剩余数量：

配置面板—奖项列表中的奖品剩余数量，和工作台的实际奖品数量为异步，因此并非实时跟随抽奖数据刷新。

所以如果在编辑器内看到剩余奖品数量与实际奖品数量不符的情况，可以刷新下作品看看。

九宫格奖项规则须知：

1.九宫格必须设置8个奖项，不可删除奖项；

2.当使用其他类型抽奖插件进行配置，且奖项数不为8项时，此时切换到九宫格时，奖项会自动补充为8项。如：设置扭蛋机的奖项为7项，此时切换九宫格，此时奖项会自动补充为8项，此时若再切换回扭蛋机，奖项数量仍为8项。

2.7补充说明：

目前列表支持实物及非奖品两种类型设定、后续后扩展电子券等多类型的奖项配置。
可设置该奖项的数量。设置完成后，当前奖项的中奖概率自动计算。公式为：概率=当前奖项奖品数量/奖项列表所有奖项奖品数量之和X100%。
【非奖品】：类似谢谢惠顾这样的虚拟空奖。
奖品池抽光后，可配置两种模式：
1. 结束抽奖。用户再次点击抽奖时，提示“奖品池已抽空”，这种模式下，可设置8个奖项全部为实物奖项；
2. 继续抽非奖品。当奖品池内的全部奖品抽完后，用户再次点击抽奖时，只会抽到奖项列表中第一个非奖品（如谢谢惠顾），直到抽奖次数用光。这种模式下，最少需设置1个非奖品。

配置完成后，编辑器预览效果。