使用ivx实现投票的经验总结

Posted 2021-03-01

在交互案例中，投票属于一种常用功能，我们今天就讲一讲在ivx中如何制作一个具有投票功能的小demo。

一.后台数据库
首先，投票案例的数据由两部分组成的，一是参与投票的候选人，需要包括候选人的信息以及票数，二是投票流水记录，需要包含投票用户和被投候选人，这两部分需要在后台用两个数据库分别存储。
1.候选人信息
由于demo是运行在微信环境下，可以由用户组件直接发起微信公众号登录，所以我们直接使用用户组件存储候选人信息，以openID作为唯一标识，这里给用户组件额外添加了三个字段，是否参与用来标记用户是否为候选人，是否投票用于标记用户是否进行过投票，票数则是存储候选人用户已经获得的票数。

2.投票流水
投票流水记录我们使用数据库——投票库进行记录，因为数据库默认就会设置提交用户的字段，所以我们只需要再添加一个投票对象的字段即可。不过要注意这里我们给数据库限制了提交条件，每位用户只能提交1次，第二次提交会失败并且反馈失败原因为超出提交次数，我们就是通过这种方式限制每个用户只能投票一次。

二.服务
投票案例中对后台数据的操作包含获取候选人列表和投票，我们将其封装在两个服务中。
1.输出服务
我们添加一个返回参数，将用户组件内的全部用户数据输出，然后把对象数组格式的输出结果赋值给返回参数即可。

2.投票服务
前面说过，系统会自动在提交用户字段填入当前用户的openID，所以投票服务只需要候选人openID这一个接收参数，首先我们将候选人openID提交到投票库来添加一条投票流水记录，添加成功后再去用户组件找到当前用户将其是否投票改为1，找到该候选人将其票数加1。

三.前台
前台初始化时进行一个如下的流程：

1.检测案例运行环境是否为微信浏览器。

2.确认后发起微信公众号登录获取当前用户的头像和昵称。

3.登录成功后获取当前用户是否参与投票和是否已经投过票。

4.调用输出服务将候选人列表传到前台的对象数组中。

5.如果当前用户为候选人用户则设置其微信公众号的分享属性，使用户给其它用户转发案例时微信对话框内的标签为如下样式。

四.页面
Demo包含进入也和投票页，分别放在两个if容器中，用一个布尔值变量“跳转”来判断当前显示哪一个。


在进入页点击Vote按钮会跳转到投票页，点击Take Part in按钮则当前用户会成为一个候选人，即在用户组件中把当前用户的是否参与改为1并设置分享参数，当然，如果用户已经参加评比会进行一个提示。

投票页中，我们利用存储候选人信息的对象数组循环创建一个候选人列表，当点击一个候选人时，就将当前数据的openID和序号保存起来。

当用户确定好候选人就可以点击下方的Vote For Him/Her，这时就把保存的候选人openID传给投票动作组，调用投票服务完成投票过程，这里要注意必须等投票成功，即后台数据修改完成后再来更新前台对象数组中的候选人票数。


总结
ivx中也有封装好的投票组件，添加后可以看到自动包含投票流水记录和候选人信息两个数据库，而且这两个数据库也都可以通过限制提交条件来限制每位用户的投票票数，另外投票和获取候选人列表的操作也都已经封装成投票组件的动作。这类案例中，由于涉及多个数据库，还有前后台，所以最重要的就是流程的处理，必须上一步骤完成并给出反馈后再依据反馈进行下一步骤，否则如果某一步骤出错就会导致前台后台票数不一致，投票流水和候选人票数对不上等问题。