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

news/2024/5/20 21:14:47

前言

之前是先看文章,再敲代码,出现预览效果,最后码字。

现在改变顺序,先直接照着敲代码,再看文章,最后码字。不知道能不能更加内化学习到该书作者教的内容。希望自己不是一味照抄书的代码和内容。

​3.3 开发创建投票页面

3.3.11 使用button组件

接下来用button组件增加一个完成设置的按钮和一个重置表单的按钮。

button的常用属性如下:

size 按钮的大小

type 按钮的样式选择,primary绿色,default白色,warn红色

plain 是否镂空,背景色透明

disabled 是否禁用

loading 文字前是否带loading图标

form-type 用于form表单,可选submit和reset。和form组件一起使用,选了submit,点击button会触发form组件的submit事件,reset同。

hover-class 指定按钮按下去的样式类

hover-start-time 按住后多久出现单击态,毫秒

hover-stay-time 手指松开后单击态保留时间,毫秒

open-type 微信开放能力,调用小程序提供的微信开发能力。contact、share、getPhoneNumber、getUserInfo、lauchApp、openSetting和feedback。

在wxml文件中“匿名投票”的下方增加以下代码:

<view class="form-btn-group">

<button class="form-btn" type="primary" form-type="submit"> 完成</button>

<button class="form-btn" form-type="reset"> 重置</button>

</view>

(先敲了代码再看原书,发现了疑惑的type和form-type的具体用法)

在wxss中加入样式:

.form-btn-group {

padding: 40rpx 0;

}

.form-btn {

margin-top: 20rpx;

}

最后在JS文件修改之前TODO的formSubmit和formReset两个事件处理函数:

formSubmit(){

const formData = {

voteTitle: this.data.formTitle,

voteDesc: this.data.formDesc,

optionList: this.data.optionList,

endDate: this.data.endDate,

isAnonymousfalse: this.data.isAnonymousfalse

}

//TODO 将formData提交到云端

},

formReset(){

const now = new Date()

const nowYear = now.getFullYear()

const nowMonth = now.getMonth() + 1

const nowDay = now.getDate()

const nowDate = nowYear +

'-' +

((nowMonth < 10)?('0' + nowMonth):nowMonth) +

'-' +

((nowDay < 10)?('0' + nowDay):nowDay)

this.setData({

nowDate,

endDate: nowDate,

formTitle: '',

formDesc: '',

optionList: [],

isAnonymous: false

})

},

formReset函数和onLoad函数代码重复,修改JS文件onLoad代码:

onLoad(options) {

this.formReset()

}

onload表示页面加载,formReset表示表单重置,为了语义的正确性和简简洁修改了代码。

最后预览效果如下图所示:

之前学过java会后台开发,还挺期待微信云原生开发,不知道submit函数,会把新Object数据提交到哪里去。后面继续了。

感觉微信封装了许多控件和控件属性,挺好用。以后不好切换啊有点小担心。

下一节是3.3.12 开发创建多选投票事件。

 


https://www.xjx100.cn/news/3091925.html

相关文章

vue3定时器的清除

两个思路 1&#xff0c;通过vue的生命周期函数 这里我们用 onBeforeUnmount 实例卸载之前被调用的生命周期函数 //引入生命周期函数import { onBeforeUnmount } from vuestate.timer //定义变量&#xff0c;保存实例state.timer setInterval(() > {// 逻辑代码}, 60000…

2024年测试工程师必看比列之Unittest单元测试框架-知识点总结

unittest单元测试框架 1.导入unittest包 2.创建类的时候要继承与unittest.TestCase类 2.1&#xff0c;setUp方法是在类中测试执行前的初始化工作 2.2&#xff0c;tearDown方法是在类中测试执行后的清除工作 2.3&#xff0c;测试用例函数以test开头的方法是普通的测试用例方法&…

一文了解Spring依赖注入时循环依赖问题

目录 什么是循环依赖 凡是Java的循环依赖都会有问题&#xff1f; 为什么Spring循环依赖会有问题&#xff1f; Spring解决循环依赖问题的思路&#xff1f; 设置二级缓存对象池 方案一直接将实例化对象放入早期对象池 方案一缺点 方案二-将实例化对象处理AOP后放入早期对象…

常用的指令集

常用的命令行指令 以下是一些常用的命令行指令&#xff0c;它们的类型和作用&#xff1a; 命令类型作用ls文件/目录管理列出当前目录下的文件和子目录cd文件/目录管理改变当前工作目录mkdir文件/目录管理创建新目录rm文件/目录管理删除文件或目录cp文件/目录管理复制文件或目…

python连接hive报错:TypeError: can‘t concat str to bytes

目录 一、完整报错 二、解决 三、 其他报错 四、impala方式连接hive 或者直接使用 pip install pyhive[hive] 安装。需要先 pip uninstall pyhive。 一、完整报错 Traceback (most recent call last): File "D:/Gitlab/my_world/hive2csv.py", line 18, in <…

ubuntu中经常脚本汇总

ubuntu中经常脚本汇总 # get pascal voc # standard voc mkdir -p data cd data wget -c http://host.robots.ox.ac.uk/pascal/VOC/voc2012/VOCtrainval_11-May-2012.tar tar -xvf VOCtrainval_11-May-2012.tar wget -c http://pjreddie.com/media/files/VOC2012test.tar tar -…

如何使用 RTLS?

RTLS 的不同应用几乎是无限的。毕竟&#xff0c;几乎任何人都可以从更好地了解事物的实时变化中受益。位置数据的一般价值导致了各种各样的最终用途应用&#xff0c;从制造工作跟踪、库存管理、堆场管理、供应链和物流&#xff0c;到医疗保健、动物跟踪以及采矿和采矿业人员的安…

ES索引数据清理脚本示例

说明&#xff1a;我得索引是按月份创建的&#xff0c;索引名后面都有yyyy.MM 需求&#xff1a;删除三个月以前的索引&#xff0c;清理收集的应用日志数据&#xff0c;释放磁盘空间 #!/bin/bash# 定义 Elasticsearch 节点的地址 ELASTICSEARCH_HOST"192.168.53.100" …