前言
之前是先看文章，再敲代码，出现预览效果，最后码字。
现在改变顺序，先直接照着敲代码，再看文章，最后码字。不知道能不能更加内化学习到该书作者教的内容。希望自己不是一味照抄书的代码和内容。
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 开发创建多选投票事件。
