扫码参与投票查询微投票结果界面

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

扫码参与投票查询微投票结果界面

查询微投票结果

界面如下：

5.2.2 案例程序结构

索引即首页微信投票小程序制作，是创建微投票主题和选项的页面。 这是我创建的微投票主题。 是投票页面（包含分享和二维码功能），是微投票结果页面。

5.2.3 案例流程详解

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

然后定义索引接口：

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

我们首先看一下index.js中定义的一些变量：

三种绑定方法代码如下：

扫码调用wx. 方法并跳转到该路径。 另外两个分别调用对应的页面，直接进入即可。

我们来实现这两个函数。 我们先看一下“创建我的投票”界面：

我们可以为微投票功能设置三个属性。 一是投票类型，表示微投票是单选还是多选。 **个是标题，*后一个是选项。 我们将其设计成多个可以更改的选项。 只需单击“添加选项”按钮即可。

让我们看一下页面代码（.wxml）、类型和标题：

选项部分的页面代码：

从业务上来说，我们的微投票至少要有2个选项，*多可以有16个选项，所以我们直接写下前两个输入选项，名字分别是 和 ，从第三个到第十六个分别是同样，我们用一个块来包裹整个选项的视图，并通过这个变量开关来控制该块是否显示，实现选项的动态显示和隐藏，达到自定义个数的目的选项。

为了添加选项，我们绑定一个名为的方法，该方法将在 .js 中实现：

对于整个页面，我们用一个form组件包裹起来，然后通过以下方式提交给.js方法：

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

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

我们还发现选项4已经成功添加，选项3中的“-”减号消失了。 如何实现这一目标？ 看一下代码：

这里控制对应选项块上定义的变量，改为true显示，同时将上一个选项带有“-”减号的变量改为false隐藏。 同理，点击“-”减号即可隐藏该选项，并显示上一个选项的“-”减号：

j是一个页面变量，用于控制相应的选项。 点击“-”减号，就会变成：

这时我们选择类型，填写标题和选项内容，点击“创建微投票主题”按钮，就生成了我们的微投票主题：

这里我们的表单将调用该方法并通过POST将数据提交到远程服务器。 如果成功返回，会弹出弹窗提示输入相关信息，然后跳转到“我的投票列表”页面。 服务器代码和数据库结构将在下面的章节中提到。

第二个功能“我的投票主题”：

通过这个界面，你可以查看我创建的微投票，并且可以通过这个界面进入微投票页面和微投票结果页面。 这个页面在目录下，page.wxml很简单：

主要通过方法加载数据：

进入实际的微投票页面：

通过以下方式进入微投票结果页面：

第三个功能“投票”：

在我的投票主题中扫码参与投票查询微投票结果界面，点击“投票”即可进入微投票（.wxml）的真实投票页面：

页面代码如下：

数据通过（.js）加载：

选择选项后，单击“投票”并通过表格提交：

执行成功返回后，根据返回的状态码，成功则跳转到投票结果页面； 如果失败，则返回微投票主题列表：

在此页面上，我们还看到一个生成二维码的按钮。 点击后，页面下方会生成二维码图片。 具体实现代码如下。 首先要根据你应用的appid和appid来获取，然后才能调用API生成：

在这个页面上，我们还实现了分享功能。 点击右上角的“...”会弹出：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等