从零开始学微信小程序开发：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
    })
  },