从零开始学微信小程序开发：6 旅行计划调查

小程序对HTML5表单及表单元素进行了封装，提供了丰富的表单组件。

6.1 用form组件收集信息

form（表单）也是前端视图层与后端服务层交互过程中最重要的信息来源。

小程序的form组件具有一些特殊的属性：

report-submit：是否返回formId用于发送模板消息
bindsubmit：携带form中的数据触发submit事件，event.detail = { value:{'name':'value'}, formId: "}
bindreset: 表达重置时会触发reset事件

<!--pages/train/train.wxml-->
<view class="content"><form bindsubmit='formSubmit' bindreset='formReset'><view class="section section_gap"><view class="section_title">声音</view><switch name="voice" checked='{{open}}'/></view><view class="section section_gap"><view class="section_title">音量</view><slider name='volume' show-value value='{{vol}}'> </slider></view><view class="section"><view class="section_title">配置名</view><input name='config_name' placeholder="输入配置名称" value="{{configName}}" /></view><view class="btn-area"><button formType="submit" type="primary" type="primary">确定</button><button formType="reset">重置</button></view></form>
</view>

/* pages/train/train.wxss */
.content {margin: 40rpx;
}
.section {margin-bottom: 80rpx;
}
.section_gap {padding: 0 30rpx;
}
.section_title {margin-bottom: 16rpx;padding-left: 30rpx;padding-right: 30rpx;
}
.btn-area {padding: 0 30px;
}

表单的提交：

首先来看如何获取表单中各组件的值，每个组件值保存在data中，更快捷的方式，如果组件在form中，则程序只需要在bindsubmit中获取整个表单各组件的值。

获取值之后，就可以向后端提交这些数据。

表单的重置：bindreset属性

  data: {open: true,vol: 50,configName: "配置 1"},formSubmit: function(e) {console.log('提交表单数据')console.log(e.detail)},

6.2 设计旅行计划调查

6.3 选择性别（单选）

radio组件：一个带单选圆圈，可设置属性：value（change事件会携带这个内容）, checked（是否选中）, disabled（是否禁用）

radio-group组件：将多个radio组合，但只有一个被选中，不需要设置value，checked等属性。

获取性别内容：

根据数据生成radio组件：国家列表，使用wx:for控制命令

     items: [   /* 实际应用中，数据应该通过网络向服务器获取 */{name: 'Europe', value: '欧洲'},{name: 'America', value: '美洲', checked: 'true'},{name: 'Africa', value: '非洲' },{ name: 'SoutheastAsiae', value: '东南亚' },{ name: 'other', value: '其他' }]

      <view class="page"><view class="page_hd"><text class="page_title">选择目的地</text></view><view class="page_bd"><view class="section section_gap"><radio-group class="radio-group" bindchange="radioChange"><label class="radio" wx:for="{{items}}"><radio value="{{item.name}}" checked="{{item.checked}}"></radio>{{item.value}}</label></radio-group></view></view></view>

6.4 选择想去的国家（多选）

checkbox组件：

check-group组件：

国家名称的多选：

获取选中的数据：

6.5 选择日期和时间

picker组件：目前支持普通选择器、时间选择器和日期选择器，通过mode属性区分。

普通选择器：mode设置为"selector"，有以下3个属性：

range：字符串数组
value：选中的序号，从0开始
bindchange：

日期选择器：mode设置为“date”，有以下5个属性：

value：日期格式的字符串，格式为"yyyy-MM-dd“
start：开始日期
end：结束日期
fields：选择器的粒度，"year", "month", "day"
bindchange：

时间选择器：mode设置为"time"，有以下4个属性：

value：时间的字符串，格式为"hh:mm"
start：开始时间
end：结束时间
bindchange：

创建名为picker的子目录

picker.js

  data: {countries: ['中国','美国','巴西','日本','英国','法国','意大利'],index: 0,date: '2016-09-01',time: '12:01'},bindPickerChange: function(e) {console.log("picker")console.log(e.detail.value)this.setData({index: e.detail.value})},bindTimeChange: function (e) {console.log("时间发生改变")console.log(e.detail.value)this.setData({time: e.detail.value})},bindDateChange: function (e) {console.log("日期发生改变")console.log(e.detail.value)this.setData({date: e.detail.value})},

picker.wxml

<!--pages/picker/picker.wxml-->
<view class="page"><view class="page_hd"><text class="page_title">picker选择器</text></view><view class="page_bd"><view class="section"><view class="section_title">地区选择器</view><picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{countries}}"><view class="picker">当前选择：{{countries[index]}}  </view></picker></view><view class="section"><view class="section_title">日期选择器</view><picker mode="time" bindchange="bindTimerChange" value="{{time}}" start="09:01" end="21:01"><view class="picker">当前选择：{{time}}  </view></picker></view><view class="section"><view class="section_title">时间选择器</view><picker mode="date" bindchange="bindDateChange" value="{{date}}" start="2016-09-01" end="2018-09-01"><view class="picker">当前选择：{{date}}  </view></picker></view></view>
</view>

6.6 输入建议

普通的输入内容使用input组件就可以了，

输入较多内容时，使用textarea组件

表单创建完后，后端使用Java、PHP、C#、Python、Node.js等服务接口，进行数据项的验证，加工，保存到后端数据库等操作。

train.js

// pages/train/train.js
Page({/*** 页面的初始数据*/data: {regions: [   /* 实际应用中，数据应该通过网络向服务器获取 */{ name: 'CHN', value: '中国', checked: 'true'},{ name: 'USA', value: '美国' },{ name: 'BRA', value: '巴西' },{ name: 'ENG', value: '英国' },{ name: 'TUR', value: '法国' },],time: '8:00',date: '2016-11-1',suggent: ''},formSubmit: function(e) {console.log('提交表单数据')console.log(e.detail.value)},formReset: function() {console.log('form发生了reset事件')},bindTimeChange: function(e) {console.log(e.detail.value)},bindDateChange: function(e) {console.log(e.detail.value)},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

train.wxml

<!--pages/train/train.wxml-->
<view class="content"><form bindsubmit='formSubmit' bindreset='formReset'><view class="section"><view class="section_title">性别：</view><radio-group name="sex"><label> <radio value="male" checked />男 </label><label> <radio value="female" style='margin-left:20rpx;'/>女 </label></radio-group></view><view class="section"><view class="section_title">想去的国家：</view><checkbox-group name="region"><label class="checkbox" wx:for="{{regions}}"><checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox> {{item.value}}</label></checkbox-group></view><view class="section"><view class="section_title">出发日期：</view><picker mode="date" name="date1" value="{{date}}" start="2016-09-01" end="2018-09-01" bindchange='bindDateChange'><view class="picker">{{date}}</view></picker></view><view class="section"><view class="section_title">出发时间：</view><picker mode="time" name="time1" value="{{time}}" start="08:00" end="22:00" bindchange='bindTimeChange'><view class="picker">{{time}}</view></picker></view><view class="section"><view class="section_title">其他建议：</view><textarea name="suggest" styple="height:100rpx;" placeholder="建议" value="{{suggest}}"></textarea></view><view class="btn-area"><button formType="submit" type="primary" type="primary">确定</button><button formType="reset">重置</button></view>    </form>
</view>

train.wxss

/* pages/train/train.wxss */
.content {margin: 40rpx;
}
/*设置边框、圆角，底部间距为40rpx*/
.section {margin-bottom: 40rpx;border: 1px solid #e9e9e9;border-radius: 6rpx;
}
/*标题*/
.section_title {margin-bottom: 16rpx;padding-left: 30rpx;padding-right: 30rpx;background-color: aqua;
}
/*内边距*/
radio-group {padding: 20rpx;
}.checkbox {padding: 20rpx;
}
.btn-area {padding: 0 30px;
}

6.7 广告轮播

动态展示的图片

swiper组件：叫滑块视图容器，其中放置的组件会轮换显示。注意：只能放置名为swiper-item的组件，其他自动删除。swiper-item又可放置其他组件

属性如下：

indicator-dots：是否显示面板指示点

autoplay：是否自动切换swiper-item

current：当前页面的序号

interval：自动切换页面的时间间隔

duration：页面滑动动画时长，默认为1秒

bindchange：切换页面时触发

swiper-item组件： swiper的子组件，宽度、高度自动设置为100%

创建swiper页面

<!--pages/swiper/swiper.wxml-->
<view class="page"><view class="page_hd"><text class="page_title">swiper组件</text></view><view class="page_bd"><view class="section section_gap swiper"><swiper indicator-dots="{{indicatorDots}}" vertical='{{vertical}}'autoplay='{{autoplay}}' interval='{{interval}}' duration="{{duration}}"><block wx:for="{{background}}"><swiper-item><image src="{{item}}" /></swiper-item></block></swiper></view><view class='btn-area'><button type="default" bindtap="changeIndicatorDots">指示点</button><button type="default" bindtap="changeVertical">{{vertical?'水平指示点':'垂直指示点'}}</button><button type="default" bindtap="changeAutoplay">自动播放</button></view><slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000" /><view class="section_title">页面切换间隔</view><slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000" /><view class="section_title">滑动动画时长</view></view>
</view>

  data: {background: ['../../images/1.jpg','../../images/2.jpg','../../images/3.jpg'],indicatorDots: true,   //显示指标点vertical: false,  //垂直显示指标点autoplay: false,  //自动播放interval: 3000, //切换时间间隔duration: 1200   //时长},changeIndicatorDots: function(e) {this.setData({indicatorDots: !this.data.indicatorDots})},changeVertical: function(e) {this.setData({vertical: !this.data.vertical})},changeAutoplay: function(e) {this.setData({autoplay: !this.data.autoplay})},intervalChange: function(e) {this.setData({interval: e.detail.value})},durationChange: function(e) {this.setData({duration: e.detail.value})},