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

3.4 开发参与投票页面

3.4.2 借用伪造数据开发功能

为了便于开发,新建一个编译模式:

之前没看文章,每次都习惯性填完投票创建的信息提交再跳转看效果。好累。 添加变异模式开发真方便。

另外,点击提交后没跳转到投票页面,通过uni-app路由跳转(redirectTo、navigateTo)不生效_uni.redirectto不生效_小玲子小玲子的博客-CSDN博客

发现自己的redirectTo方法中的url属性值前面没加上/,现在已经改了《微信小程序开发从入门到实战》二十六,书中代码没问题,自己粗心大意没控制住,哎。

接下来修改pages/vote/vote.js文件的代码:

// pages/vote/vote.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    voteID:'',

    type:'',

    voteTitle: '',

    voteDesc: '',

    optionList: [],

    endDate: '', //用于保存截止日期

    isAnonymous: false,

    isExpired: false, 

    pickedOption:[] //当前用户选择的选项

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

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

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

  },

  checkExpired(endDate){

    const now = new Date()

    const nowYear = now.getFullYear() 

    const nowMonth = now.getMonth() + 1 

    const nowDay = now.getDate()

    const endDateArray = endDate.split('-') //将字符串分隔成字符数组,分隔符为-

    const endYear = Number(endDateArray[0]) //取字符数组中的年份,并将数据类型转换为number

    const endMonth = Number(endDateArray[1]) //取字符数组中的月份,并将数据类型转换为number

    const endDay = Number(endDateArray[2]) //取字符数组中的日期,并将数据类型转换为number

    //判断是不是年份超了

    if(nowYear > endYear){

      return true

    }

    //判断是不是月份超了

    if((nowYear === endYear) && (nowMonth > endMonth)){

      return true

    }

    //判断是不是日期超了

    if((nowYear === endYear) && (nowMonth === endMonth) && (nowDay === endDay)){

      return true

    }

    //其他情况一定超了 

    return false

  },

  getVoteDateFromServer(voteID) {

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

      const voteData = {

        type:'radioVote',

        voteTitle: '测试数据投票标题',

        voteDesc: '测试数据投票描述',

        optionList: ['测试数据选项1','测试数据选项2','测试数据选项3','测试数据选项4'],

        endDate: '2023-12-30', //用于保存截止日期

        isAnonymous: false

      }

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

      const isExpired = this.checkExpired(voteData.endDate) //检查投票是否已经过期

      this.setData({

        voteID,

        type: voteData.type,

        voteTitle: voteData.voteTitle,

        voteDesc: voteData.voteDesc,

        optionList: voteData.optionList,

        endDate: voteData.endDate,

        isAnonymous: voteData.isAnonymous,

        isExpired

      })

    }else{

      // TODO 真的从服务端获取投票信息

    }

  },

})

借用的伪造的测试数据完成了数据的加载。现在将这些逻辑层的数据在视图层进行展示了。

3.4.2 借用伪造数据开发功能完成。

3.4.3 使用radio单项选择器组件敬请期待。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

xorm源码学习

文章目录 XORM源码浅析及实践ORMORM vs. SQLXORM软件架构 ORM 引擎 Engine——DBM*core.DB Golang:database/sql 源码基本结构连接复用,提高性能。增加数据库连接池数量连接管理 database/sql主要内容:sql.DB创建数据库连接sql.Open()DB.conn…

Spring——感谢尚硅谷官方文档

Spring——尚硅谷学习笔记 1 Spring简介👾1.1 Spring概述1.2 Spring Framework1.2.1 Spring Framework特性1.2.2 Spring Framework五大功能模块 2 IOC-IOC容器思想👾IOC容器思想IOC在Spring中的实现 3 IOC-基于XML文件管理Bean👾3.1 准备工作…

2023亚太杯数学建模A题思路 - 采果机器人的图像识别技术

# 1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国,年产量约为3500万吨。与此同时,中国也是世 界上最大的苹果出口国,全球每两个苹果中就有一个,全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…

数据库实验四 索引创建与管理操作

数据库实验四 索引创建与管理操作 一、实验目的二、设计性实验三、观察与思考 一、实验目的 (1) 理解索引的概念与类型。 (2) 掌握创建、更改、删除索引的方法。 (3) 掌握维护索引的方法。 二、设计性实验 在数据库job下创建worklnfo表。创建表的同时在id字段上创建名为inde…

【HarmonyOS】元服务卡片本地启动拉起加桌没问题,上架后拉起加桌时卡片展示异常

【关键字】 加桌选卡展示异常 、 2卡共用一个布局 、 代码混淆 【问题现象】 元服务卡片在本地启动拉起加桌时,多卡的选卡过程显示是没问题的。但是在上架后拉起加桌时,多卡的选卡过程卡片展示异常。 代码逻辑是通过创建卡片的时候判断卡片的尺寸大小…

数据结构与算法编程题13

设计算法将一个带头结点的单链表A分解为两个具有相同结构的链表B、C,其中B表的结点为A表中值小于零的结点,而C表的结点为A表中值大于零的结点(链表A中的元素为非零整数,要求B、C表利用A表的结点) for example: A -1 2 …

SpringBoot + 通义千问 + 自定义React组件,支持EventStream数据解析!

一、前言 大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。 最近ChatGPT非常受欢迎,尤其是…

virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…

安装第三方包报错 error: Microsoft Visual C++ 14.0 or greater is required——解决办法

1、问题描述 手动安装第三方软件时&#xff0c;可以使用setup.py&#xff0c;来安装已经下载的第三方包。一般文件下会存在setup&#xff0c;在所要安装库的目录下的cmd执行&#xff1a;python setup.py install报错&#xff1a;error: Microsoft Visual C 14.0 or greater i…

所有权成果输出(宗地基本信息表、界址标示表、界址签章表、界址点成果表、宗地图、界址说明表、调查审核表)

一、软件界面&#xff1a; 二、软件功能&#xff1a; 一、所有权成果要求(宗地基本信息表、界址标示表、界址签章表、界址点成果表、宗地图、界址说明表、调查审核表&#xff09; 1 不动产权籍调查表封面 &#xff08;1&#xff09;宗地&#xff08;海&#xff09;代码&…

基于element-plus定义表单配置化扩展表单按钮

文章目录 前言一、新增btn.vue组件二、使用总结如有启发&#xff0c;可点赞收藏哟~ 前言 在后台管理系统一般都存在列表查询&#xff0c;且可输入数据进行查询 基于element-plus定义表单配置化 新增按钮配置化 一、新增btn.vue组件 <template><template v-for&qu…

代码随想录算法训练营第四十二天【动态规划part04】 | 01背包、416. 分割等和子集

01背包问题 题目链接&#xff1a; 题目页面 求解思路&#xff1a; 确定dp数组及其下标含义&#xff1a;dp[i][j] 表示从下标为 [0] 到 [i] 的物品里任意选取&#xff0c;放进容量为j的背包&#xff0c;此时的价值总和最大值确定递推公式&#xff1a; 不放物品i&#xff0c;…

centos查看空间使用情况

查看磁盘使用空间 df -h 查看该目录下其他目录的大小 du -sh *

Unity中颜色空间Gamma与Linear

文章目录 前言一、人眼对光照的自适应1、光照强度与人眼所见的关系2、巧合的是&#xff0c;早期的电子脉冲显示屏也符合这条曲线3、这两条曲线都巧合的符合 y x^2.2^&#xff08;Gamma2.2空间&#xff09; 二、Gamma矫正1、没矫正前&#xff0c;人眼看电子脉冲显示屏&#xff…

事件溯源模式

概念解释 事件溯源&#xff08;Event Sourcing&#xff09;是一种设计模式&#xff0c;其核心思想是将系统的状态变化表示为一系列不可变的事件&#xff0c;并将这些事件存储在事件日志中。系统的当前状态可以通过重新应用&#xff08;回放&#xff09;这些事件来还原&#xf…

芯片的测试方法

半导体的生产流程包括晶圆制造和封装测试&#xff0c;在这两个环节中分别需要完成晶圆检测(CP, Circuit Probing)和成品测试(FT, Final Test)。无论哪个环节&#xff0c;要测试芯片的各项功能指标均须完成两个步骤&#xff1a;一是将芯片的引脚与测试机的功能模块连接起来&…

促进材料基因工程基础理论、前沿技术和关键装备的发展和应用,第七届材料基因工程高层论坛将于12月重庆举办,龙讯旷腾出席会议

为了进一步促进材料基因工程基础理论、前沿技术和关键装备的发展和应用&#xff0c;加强国际交流&#xff0c;加速我国新材料的研发和应用&#xff0c;由中国材料研究学会、西部科学城重庆高新区管理委员会主办&#xff0c;重庆大学、北京科技大学、北京云智材料大数据研究院等…

Java面试-微服务篇-SpringCloud

Java面试-微服务篇-SpringCloud SpringCloud 常见组件注册中心Eureka, Nacos负载均衡Ribbon服务雪崩, 熔断降级微服务的监控来源 SpringCloud 常见组件 通常情况下 Eureka: 注册中心Ribbon: 负载均衡Feign: 远程调用Hystrix: 服务熔断Zuul/Gateway: 网关 SpringCloudAlibaba…