为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
产品

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

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


初始化候选人信息

在这个应用中,候选人信息是由主办方预先添加的。我们首先添加一个后台的投票组件,然后选中其下“候选人信息表”的数据库。
https://img1.sycdn.imooc.com//5f71bc1a0001dc6813960800.jpg

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

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

投票相关服务配置

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

https://img1.sycdn.imooc.com//5f71bc1b00012aa003420260.jpg

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

https://img1.sycdn.imooc.com//5f71bc1c0001111e17120590.jpg

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

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

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

候选人列表的展示

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

https://img1.sycdn.imooc.com//5f71bc1e0001388217080634.jpg

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

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

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

https://img1.sycdn.imooc.com//5f71bc1f0001f17705360314.jpg

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

https://img1.sycdn.imooc.com//5f71bc1f00019a9704920064.jpg

具体的选择方法如下:

https://img1.sycdn.imooc.com//5f71bc20000194e500490074.jpg


投票按钮的动作

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

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

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

限制用户投票次数

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

https://img1.sycdn.imooc.com//5f71bc390001682c03940730.jpg

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

https://img1.sycdn.imooc.com//5f71bc390001a9a213900626.jpg

详情页基础部分的显示

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

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

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

https://img1.sycdn.imooc.com//5f71bc390001eaad03140102.jpg

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

https://img1.sycdn.imooc.com//5f71bc390001ed8e16760448.jpg

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

https://img1.sycdn.imooc.com//5f71bc3a0001c65b05680070.jpg


详情页中的性格标签云

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

https://img1.sycdn.imooc.com//5f71bc3a0001fc3505000322.jpghttps://img1.sycdn.imooc.com//5f71bc3a00017f5104680312.jpg

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

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

https://img1.sycdn.imooc.com//5f71bc3a0001f72d02240746.jpg

在获取候选人列表时,我们将简介字段转化为数组形式(数据库中存储的只是数组形式的字符串)
https://img1.sycdn.imooc.com//5f71bc3b0001e60515820582.jpg

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

https://img1.sycdn.imooc.com//5f71bc3b00011dea07940158.jpg

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

https://img1.sycdn.imooc.com//5f71bc430001ea4603660452.jpg

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

https://img1.sycdn.imooc.com//5f71bc430001829d04500066.jpg

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消