微信小程序---投票神器

作者: 多闪 | 来源:发表于2019-02-27 22:35 被阅读9次

来文章源于本人公众号：三角洲科技

如需代码请评论区留言

5.2.1 案例功能详解

麻雀虽小，五脏俱全，本案例有5大功能：

创建新的微投票主题。

我的微投票主题

投票功能（分享、生成二维码）

扫码参与投票

查询微投票结果

界面如下：

5.2.2 案例程序结构

其中index是首页， createvote是创建微投票主题和选项的页面，myvote是我创建过的微投票主题，voteitem是投票页面（含分享、二维码功能），voteresult 是微投票结果页。

5.2.3 案例程序细化详解

首先修改app.json ，设置标题：

然后定义index界面：

这里我们定义了三个button 组件作为微投票的功能菜单，一个是扫描二维码图片，然后跳转到对应的微投票主题上。第二个用来查看我创建过的微投票主题。第三个button用来创建一个新的微投票主题。分别绑定了三个方法，attendvote、myvote和createvote，这些方法将在index.js里实现。

先看看 index.js 里定义了一些变量：

而三个button绑定的方法代码如下：

扫码button调用wx.scanCode方法然后跳转到path上，其他两个button分别调用对应的页面，简单进入即可。

那让我们来实现这两个功能吧，先看“创建我的投票”的界面：

微投票的功能上我们可以设置了3个属性，一个是投票类型，说明微投票是单选，还是可以多选。一个是标题，最后一个是选项，我们会把它设计成可以变化的多个选项，只需要简单的点击 ”添加选项” 按钮就可以。

我们看看页面代码（createvote.wxml），类型和标题：

选项部分的页面代码：

业务方面我们的微投票至少要有2个选项，最多可以有16个选项，所以我们直接写死了前2个name分别为 voteopt1和voteopt2 的input选项，而从第三个开始到第十六个就不一样了，我们用block 把整个选项的view包裹起来，并通过op3condition这个变量开关来控制block 是否显示，实现选项的动态显示和隐藏，达到自定义选项数量的目的。

添加选项的button我们绑定了一个叫addOption 方法，将会在createvote.js里实现：

而整个页面，我们用一个form的组件包裹，然后通过submit来提交到createvote.js 的formSubmit方法上：

我们看看点击“添加选项”后会发生什么：

点击后发现多了个选项3，而且后边还多了个“-” 号，这个减号是我们拿来删除对应某个选项的操作。再点一次“添加选项”：

我们又发现，选项4已经成功添加，同时选项3的 “-” 减号已经消失，这时如何实现的呢？看看代码：

这里就是通过控制对应选项的block上定义的变量op4condition，变更成true来显示，同时把上个选项的“-”减号的变量bt3condition 变成false来隐藏。同理，点击“-” 减号，也可以把本选项隐藏掉，同时把上个选项的“-”减号显示：