【iVX】使用投票组件快速搭建一个投票应用

在这篇教程中，我们来搭建一个简单的投票应用（可以发布为小程序，或移动端H5），应用的核心流程如下：


用户进入投票后，首先查看候选人列表，在候选人列表中，可以直接投票，点击候选人头像，将进入候选人详情页，在详情页也可以对该候选人进行投票。
案例下载地址：https://latest.ivx.cn/ih5/app/template/download?id=104
案例预览二维码：（由于限制了微信中登录，H5或小程序，因此pc预览时，无法正常投票）


初始化候选人信息

在这个应用中，候选人信息是由主办方预先添加的。我们首先添加一个后台的投票组件，然后选中其下“候选人信息表”的数据库。


我们可以直接在数据库中手动填写数据，或导入一个excel表格。（应用中的excel表格可以点击这里下载）
在这个excel表格中，我们并没有包含“投票数”这个字段，因为投票数是在应用运行时执行“投票”动作时自动增加的，初始时，任何候选人的投票数都为0。

在其他投票应用中，候选人信息也可以在应用运行时进行添加和修改，比如，一个让用户自行报名的投票活动，可以由用户提交自己的信息作为候选人信息，但这个应用的场景是由主办方上传候选人信息，因此我们没有添加候选人报名功能。

投票相关服务配置

这个投票应用包含两个最基础的后台服务，即“获取候选人列表”与“投票”。



“获取候选人列表”，用于输出候选人列表需要的候选人信息，在这个应用中，由于我们的候选人的个数只有15个，我们只需要一次性输出候选人即可：



投票组件的“获取候选人列表”动作，本质就是候选人信息表的输出，以上服务中，我们只是做一个简单的列表输出，没有设置任何筛选或排序。

“投票”服务，是在用户点击投票按钮时调用的服务，这个服务，我们只需要调用投票组件的“投票”动作即可，这个动作会自动在投票流水记录表中添加一条记录，并给相应的候选人加一票。


注意，投票的动作可能会失败，比如，超出了个人的投票次数，因此，我们在设计这个服务时，需要返回是否成功以及失败原因，这样可以在投票失败时，在前端应用中弹出相应的提示。

候选人列表的展示

在这个应用中，我们在用户点击“马上投票”的时候，去调用获取候选人列表服务，并把候选人列表装到“候选人列表”这个对象数组中。服务成功返回后，再跳转至列表页面，确保跳转后页面中的列表即可有数据来源。



在以上点击事件中，我们还对候选人列表中的“简介”列进行了数组转化，为详情页的简介标签云做准备。

在列表页中，我们直接使用面板+循环容器，来制作候选人列表，这个是一个基本的列表展示，在这里就详细展开了。（列表展示的基础教程请点击这里）。

除了候选人列表，在这个列表页中，还有一个“总票数”的显示。



这个总票数，我们可以直接使用数据绑定来实现，由于所有的数据都来源于“候选人列表”这个对象数组，每次投票之后，这个总投票数都会自动统计，不需要额外的事件去计算了。



具体的选择方法如下：




投票按钮的动作

当用户点击列表中的投票按钮时，我们会当前候选人进行投票：

在以上事件中，除了调用投票的服务，我们还在服务返回时判断投票是否成功，如果成功，就让当前候选人的票数显示加1，如果失败，就显示失败弹窗。

注意，在投票成功后，我们不需要重新向后台请求输出最新的票数列表，只需要在前端给投票用户一个票数加1的反馈即可。因此，我们只需要找到当前候选人票数所对应的数据源的位置，即“候选人列表”对象数组中的“格子”的位置，对它执行加1操作。通过更改这个源数据，“总票数”的显示和详情页中的票数显示也会相应的更新。

限制用户投票次数

在这个应用中，我们对用户的投票次数做了一个简单的限制，即每人每天可以投3票，这个限制，只需要在投票流水记录表的数据库提交限制中设置即可：



注意，每人提交次数的限制，需要配合用户身份的鉴别（用户身份鉴别的基础介绍请点击这里）。在微信公众号和微信小程序中，系统会在初始化时获取用户的openid，但在pc环境中，我们需要首先判断用户是否匿名，如果非匿名，才可正常投票。在这种情况下，我们需要更新一下我们的投票服务：



详情页基础部分的显示

在这个应用的数据结构中，我们将所有候选人信息，包括详情页中显示的信息，全部存储在候选人信息表中，因此，一次输出之后，我们不需要再去后台查询相关的候选人详情。

（在其他很多应用场景中，候选人详情可能包含非常多的信息，在这种情况下，我们把候选人详情存储在候选人列表中就不合适了，这会导致列表一次性输出太多无关的信息。此时，我们建议将候选人详情存储在另外一张数据表中（在投票组件之外，自行添加一个额外的普通数据库），专门用户来存储候选人详情，在用户点击某个候选人时，才去查询此候选人的详情进行输出。）

回到我们当前的应用，在详情页下，我们添加一个核心变量：“候选序号”，代表当前详情页对应的候选人。



当用户在列表页点击每个候选人头像时，在跳转详情页前，我们将当前候选序号赋值为列表的当前序号：



有了这个候选序号之后，我们就可以直接定位到“候选人列表”中的相应行，将对应的信息绑定到详情页中，比如，“生活照”图片的绑定如下:




详情页中的性格标签云

详情页中还有一个特殊的区域，是一个“性格标签”云。



这个标签云不是投票的关键组成部分，但我们还是来介绍一下它的制作方法：

首先，在候选人信息表的“简介”字段中，我们以字符串数组的形式，存储了每个候选人的标签：



在获取候选人列表时，我们将简介字段转化为数组形式（数据库中存储的只是数组形式的字符串）


最后，在详情页中，为了引用方便，我们添加了一个额外的“标签数组”，绑定当前候选人对应的“简介”数组。



有了这个数组之后，我们就可以通过循环容器来创建标签，只需要把预先设置好的样式数据（位置，大小，透明度等）添加至数据源即可。但在这个应用中，为了编辑简便，我们使用了另外一种方法，即预先添加好8个文本（前提是我们的标签最多有8个）：



然后分别绑定标签数组中的相应元素，注意，由于每个候选人的标签数量不同，我们首先需要判断这个标签是否存在，然后再进行绑定，比如：



这个公式，就是判断标签数组的第8个元素是否存在，如果不存在，就使用一个空字符串。