《微信小程序开发从入门到实战》学习三十一

3.4 开发参与投票页面

3.4.9 显示投票结果

在实际使用中,一个用户不能对同一个投票进行重复提交,因此需要向服务器端提交投票结果和提交用户ID。另外页面,需要完善。用户提交完投票后 ,还需要显示投票目前的结果,提交过的用户再打开这个页面也能看到投票结果而不是重新投票。通过用户ID可以查询到这个用户的投票信息。

小程序在用云开发技术实现服务端存储时,小程序会自动在请求中携带用户ID。(我还未验证)。

实现以上效果,需要在data对象增加一个voteStatus,记录当前用户是否已经投票,每个选项的投票情况,总投票数量,用户投了哪个选项的票。vote.js代码如下:

voteStatus: {//当前的投票情况

      alreadyVoted:false, //当前用户是否已经投票

      optionStatus: [], //每个选项的投票情况,包含用户投了哪个选项的票

      totalVoteCount: 0 //总投票数

    }

修改onLoad页面初加载函数和onTapVote提交投票的事件处理函数,增加对服务器端该用户的投票信息的请求和处理,增加一个getVoteStatusFromServer,代码如下:

  onLoad(options) {

    const voteID = options.voteID //通过页面路径参数获取投票ID

    this.getVoteDateFromServer(voteID) //从服务器端获取投票信息

    this.getVoteStatusFromServer(voteID) //从服务器端获取投票情况

  },

 onTapVote(){

    if(this.data.isAnonymous) {//匿名投票的情况

      const postData = {//需要提交的数据

        voteID: this.data.voteID,

        pickedOption: this.data.pickedOption

      }

      // TODO 将postData数据上传到服务器端

      this.getVoteStatusFromServer(voteID) //从服务器端获取投票情况  

    } else {//实名投票的情况

        const _this = this //在API接口的函数中,this会被改变,因此需要提前获取this的值到_this中

        wx.getUserProfile({

          desc: 'desc',

          success:(res) => {  //授权成功后,调用wx.getUserProfile接口时会回调这个函数

            const postData = {

              voteID: _this.data.voteID,

              userInfo: res.userInfo, //获取用户信息

              pickedOption: _this.data.pickedOption

            }

            console.log(postData)

            // TODO 将postData数据上传到服务器端 

            _this.getVoteStatusFromServer(_this.data.voteID)

          }

        })

    }

  },

  getVoteStatusFromServer(voteID){

    if(voteID === 'test'){ //如果投票ID为test,则伪造一些测试数据

      const voteStatus = { 

        alreadyVoted: true, 

        totalVoteCount: 100, 

        optionStatus: [{

          count:25, //第1个选项的投票数量

          vote:false

        },{

          count:35, //第2个选项的投票数量

          vote:false

        },{

          count:10, //第3个选项的投票数量

          vote:true //用户选择了该投票

        },{

          count:30, //第四个选项的投票数量

          vote:false

        }]  

      }

      /* 以上是伪造的测试数据*/

      this.setData({ //将获取的投票更新到data对象中 

        voteStatus

      })

    }else{

      // TODO 真的从服务端获取投票情况

    }

  },

然后修改wxml文件,加入投票结果显示的部分。代码如下:

  <view wx:if="{{voteStatus.alreadyVoted}}" class="option-list">

    <view class="option" wx:for="{{optionList}}" wx:key="index">

      <text>{{item}}</text>

      <text class="vote-count">({{voteStatus.optionStatus[index].count}}/{{voteStatus.totalVoteCount}} 票)</text>

      <text class="vote-picked" wx:if="{{voteStatus.optionStatus[index].vote}}">[已选]</text>

    </view>

  </view>

  <block wx:else>

    <checkbox-group wx:if="{{type === 'multiVote'}}" class="option-list" bindchange="onPickOption">...</checkbox-group>

    <radio-group wx:else class="option-list" bindchange="onPickOption">...</radio-group>

  </block>

...

  <button class="btn" type="primary" disabled="{{isExpired || pickedOption.length === 0}}" bind:tap="onTapVote" wx:if="{{!voteStatus.alreadyVoted}}">确认投票</button>

这里有个特殊标签block,它不是一个组件,不会在页面中做渲染。和wx:if,wx:for属性一起使用,将条件或列表应用到内部的所有组件。当需要 一次性判断多个组件是否条件渲染,使用block。

block学习小例子代码如下:

<block wx:if="{{condition}}">

        <view>View A</view>

        <view>View B</view>

        <view>View C</view>

</block>

最后为vote.wxss加入一些样式美化:

.vote-count{

  color: #ccc;

}

.vote-picked{

  color: #09BB07;

}

预览效果如下:

                                                3-41 

实践的时候顺风顺水,不知道为什么确认投票按钮没实现隐藏,后来发现是参数没加{{}}所以没取到值。又是粗心大意,也许是太累。

期待每一位读者的回音。欢迎打赏,评论,点赞,收藏,关注。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/189373.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C#,《小白学程序》第二十课:大数的加法(BigInteger Add)

大数的&#xff08;加减乘除&#xff09;四则运算、阶乘运算。 乘法计算包括小学生算法、Karatsuba和Toom-Cook3算法。 重复了部分 19 课的代码。 1 文本格式 using System; using System.Linq; using System.Text; using System.Collections.Generic; /// <summary>…

字符串函数

目录 读取字符串的函数 1.gets()函数 2.fgets()函数&#xff08;不是所有的编译器都支持例如CodeBlocks&#xff09; 3.scanf()函数 4.getchar()函数 输出字符串的函数 1.puts()函数 2.fputs()函数&#xff08;编译器不一定支持&#xff09; 3.printf()函数 4.putchar…

【开源】基于Vue.js的陕西非物质文化遗产网站

文末获取源码&#xff0c;项目编号&#xff1a; S 065 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S065。} 文末获取源码&#xff0c;项目编号&#xff1a;S065。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 设计目标2.2 研究内容2.3 研究方法与…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于多尺度分量特征学习的用户级超短期负荷预测》

这篇文章的标题表明研究的主题是用户级超短期负荷预测&#xff0c;并且该预测方法基于多尺度分量特征学习。让我们逐步解读这个标题&#xff1a; 用户级&#xff1a; 这表示研究的焦点是在个体用户层面上进行的。负荷预测可能是指电力系统中的负荷&#xff0c;即电力需求。用户…

大模型能否生成搜索引擎的未来?

文&#xff5c;郝 鑫 编&#xff5c;刘雨琦 ChatGPT火爆之前&#xff0c;水面下&#xff0c;也有中国公司也在朝着智能助手的方向努力。夸克便是其中之一。在GPT风靡科技圈后&#xff0c;国内就开始陆续冒出一些大模型厂商。对当时夸克而言&#xff0c;做大模型毋庸置疑&am…

五种多目标优化算法(MOPSO、MOAHA、NSGA2、NSGA3、MOGWO)求解微电网多目标优化调度(MATLAB)

一、多目标优化算法简介 &#xff08;1&#xff09;多目标粒子群优化算法MOPSO 多目标应用&#xff1a;基于多目标粒子群优化算法MOPSO求解微电网多目标优化调度&#xff08;MATLAB代码&#xff09;-CSDN博客 &#xff08;2&#xff09;多目标人工蜂鸟算法&#xff08;MOAHA…

Redis-Redis 高并发分布式锁

集群分布式场景高并发 1.negix配置代理和路由 高并发场景超卖问题 1.使用原生redis控制超卖时(若是商品&#xff0c;则可以将商品id作为锁对象)&#xff0c;会遇到的问题 问题一&#xff1a;若直接使用&#xff1a;将获取锁的对象和设置的超时的时间分开&#xff0c;则不能控…

桥接设计模式

package com.jmj.pattern.bridge;/*** 视频文件(实现化角色)*/ public interface VideoFile {void decode(String fileName); }package com.jmj.pattern.bridge;public class RmvFile implements VideoFile{Overridepublic void decode(String fileName) {System.out.println(&…

论文阅读——MCAN(cvpr2019)

补充一下MCAN-VQA&#xff1a; 对图片的处理&#xff1a;首先输入图片到Faster R-CNN&#xff0c;会先设定一个判断是否检测到物体的阈值&#xff0c;这样动态的生成m∈[10,100]个目标&#xff0c;然后从检测到的对应的区域通过平均池化提取特征。第i个物体特征表示为&#xff…

ubuntu22.04系统下载程序和依赖,并拷贝到指定路径下

脚本1 apt install aptitude apt-get -d install xxx #xxx是待下载的安装包 mv /var/cache/apt/archives/* /home/tuners/1apt install aptitude apt-get -d install xxx mv /var/cache/apt/archives/*.deb /home/tuners/1 xxx 为程序包名称 /home/tuners/1为保存程序包的…

网络通信基础概念介绍

网络通信基础概念介绍 局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;简称LAN。 局域网内的主机之间能方便的进行网络通信&#xff0c;又称为内网&#xff1b;局域网和局域网之间在没有连接的情况下&#xff0c;是无法通信的。 局域网是指在一个相对较小的…

微机课设--汇编语言在51单片机上写一个四位十进制加法器

代码如下 KEYVAL EQU 30HKEYTM EQU 31HKEYSCAN EQU 32HDAT EQU 33HSCANLED EQU 37HS_DAT EQU 38HD_DAT EQU 39HR_DATL EQU 3AHR_DATH EQU 3BH CALFLAG EQU 3CHFLAG BIT 00HORG 0000HLJMP MAINORG 000BHLJMP T0ISRORG 0030HMAIN:MOV SP,#5FHMOV TMOD,#01HMOV TH0,#0D8HMOV TL0,…

过渡曲线的构造之平面PH曲线

平面PH曲线的构造及其相应性质 平面PH曲线的构造及其相应性质PH曲线理论三次PH曲线的构造及性质四次PH曲线的构造及性质五次PH曲线的构造及性质非尖点五次PH曲线尖点五次PH曲线 参考文献 平面PH曲线的构造及其相应性质 过渡曲线常需要满足在连接点处位置连续、曲率连续以及切线…

如何看待 2023 OPPO 开发者大会?潘塔纳尔进展如何?AndesGPT 有哪些亮点?

在2023年11月16日举行的OPPO开发者大会&#xff08;ODC23&#xff09;上&#xff0c;OPPO带来了全新ColorOS 14、全新互联网服务生态以及健康服务进展&#xff0c;这些新动态中有许多值得关注的地方。 1、全新ColorOS 14&#xff1a; 效率提升&#xff1a;ColorOS 14通过一系列…

java基于springboot公益帮学网站 新闻发布系统的设计与实现vue

以Java为开发平台&#xff0c;综合利用Java Web开发技术、数据库技术等&#xff0c;开发出公益帮学网站。用户使用版块&#xff1a;可以选择注册并登录&#xff0c;可以浏览信息、可以网上互动、发布文章、内容推荐等。后台管理员管理版块&#xff1a;以管理员身份登录网站后台…

常见的数据库面试题含答案

1、什么是数据库&#xff1f; 数据库是一个组织和存储数据的集合&#xff0c;它采用特定的数据结构和管理模式&#xff0c;以提供对数据的高效访问和管理。 2、请解释 SQL 是什么&#xff1f; SQL&#xff08;Structured Query Language&#xff09;是一种用于管理和操作关系…

机器学习---贝叶斯网络与朴素贝叶斯

1. 贝叶斯法则 如何判定一个人是好人还是坏人&#xff1f; 当你无法准确的熟悉一个事物的本质时&#xff0c;你可以依靠与事物特定本质相关的事件出现的次数来判断 其本质属性的概率。如果你看到一个人总是做一些好事&#xff0c;那这个人就越可能是一个好人。 数学语言表达…

JVM字节码文件的相关概述解读

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、字节码文件 从下面这个图就可以看出&#xff0c;字节码文件是可以跨平台使用的 想要让一个Java程序正确地运行在JVM中&#xff0c;Java源码就必须要被编译为符合JVM规范的字节码。 https://docs.oracle.com/java…

【一文讲清楚 Anaconda 相关环境配置】

文章目录 0 前言1 Package 与环境1.1 module1.2 package1.3 环境 2 Conda、Miniconda、Anaconda和Pip & PyPI2.1 Conda2. 2 Miniconda2.3 Anaconda2.3.1 Anaconda Navigator2.3.2 Anaconda PowerShell Prompt & Anaconda Prompt2.3.3 Jupyter notebook 2.4 Pip & P…

【数据结构】什么是栈?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;栈的定义 &#x1f4cc;元素进栈出栈的顺序 &#x1f4cc;栈的抽象数据类型 &#x1f4cc;栈的顺序存储结构 &#x1f4cc;栈的链式存储结构 链栈的进…