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

前言

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

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

​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文件中“匿名投票”的下方增加以下代码：

完成

重置

(先敲了代码再看原书，发现了疑惑的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 开发创建多选投票事件。