微信小程序学习记录（4）基础组件之表单组件

button，checkbox，form，input，label，picker，picker-view,radio,slider,switch,textarea

button

---

第一部分外观样式，第二部分开放能力

开放能力：open-type:

• contact ：直接打开客服对话功能
• share：转发当前的小程序到微信朋友中，·不能分享到朋友圈
• getPhoneNumber：：获取当前用户手机号码信息，不是企业账号，没有权限来获取用户的手机号码 

          1，绑定一个事件bindgetphonenumber

           2,在事件的回调函数中，通过参数来获取信息

           3，获取的信息已经加密，需要在后台服务器中解密

• getUserInfo:获取当前用户的信息

             1，可以直接获取不存在加密的字段

• launchApp 在当前小程序中直接打开app

              1，需要先在app中通过app的某个连接打开小程序

               2，在小程序中在通过这个功能重新打开app

• openSetting打开小程序内置的授权页面

                1，授权页面只会出现用户曾经点过的权限

• feedback：打开小程序内置的意见反馈界面

                 1，只能通过真机调试打开

 

详细代码例子参考微信小程序button

picker

---

从底部弹起的滚动选择器

主要有selector普通选择器，multiSelector 多列选择器，time时间选择器，date日期选择器，region省市区选择器

例子：

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

.js

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
   
    index: 0,
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
   if (e.detail.column==0){   //改变的是第一列
      switch(data.multiindex[0]){
        case 0:             //无脊柱
        data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
        data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
        break;
        case 1:             //脊柱
        data.multiArray[1] = ['鱼','两栖动物','爬行动物'];
        data.multiArray[2] = ['红鱼','黑鱼'];
        break;
      }
      data.multiindex[1] = 0; 
      data.multiindex[2]=0;
    }
    if(e.detail.column==1){               //改变的是第二列
      //因为第一列分了两个
      if (data.multiindex[0]==0){              //第一列选的脊柱
        switch (data.multiindex[1]) {
          case 0:
          data.multiArray[2]=['扁形虫子'];
          break;
          case 1:
          data.multiArray[2] = ['线性形虫子'];
          break;
          case 2:
            data.multiArray[2] = ['环形虫子'];
            break;
          case 3:
            data.multiArray[2] = ['软体虫子'];
            break;
        }
      }
      if (data.multiindex[0] == 1) {            //第一列选的无脊柱
        switch (data.multiindex[1]) {
          case 0:
            data.multiArray[2] = ['红鱼'];
            break;
          case 1:
            data.multiArray[2] = ['青蛙'];
            break;

        }
      }
      
    }
    this.setData(data);
  },
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})