小程序组件之表单组件

本节知识点

• button 按钮
• checkbox 复选框
• input 输入框
• label 单机框
• picker 弹出选择
• radio 单选框
• slider 滑块
• switch 开关
• form 表单

表单之button

• loading 类型布尔 名称前是否带loading图标
• form-type 类型String 用于
  组件点击分别会触发组件的submit/reset事件
• open-type 类型contact 进入人工客服
• send-message-title 类型String 当前标题 会话内消息卡片标题 必须搭配open-type=”contact”
• send-message-path 类型String 当前分享路径 会话内消息卡片点击跳转小程序路径 必须搭配open-type=”contact”
• send-message-img 类型String 截图 会话内消息卡片图片 必须搭配open-type=”contact”
• show-message-card 类型Boolean 值false 显示会话内消息卡片 必须搭配 opern-type=”contact”
• bindcontact 事件名称 客服消息回调 必须搭配 opern-type=”contact”
• bindgetphonenumber 事件名称 获取用户手机号回调 open-type=”getphonenumber”

关于这个使用说明:

<!--index.html-->
<span style="font-size:14px;"><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button></span>

但是使用之前必须要调用login方法

App({  
    onLaunch: function () {  
        wx.login({  
            success: function (res) {  
                if (res.code) {  
                    //发起网络请求  
                    console.log(res.code)  
                } else {  
                    console.log('获取用户登录态失败！' + res.errMsg)  
                }  
            }  
        });  
    }  
})

通过bindgetphonenumber绑定的事件来获取回调，回调函数有3个
errMsg:用户点击取消或授权的信息回调
iv:加密算法的初始向量。(如果用户没有同意授权则是undefined)
encrytedData:用户信息的加密数据(如果用户没有同意则返回undefined)

getPhoneNumber: function(e) {
    console.log(e.detail.errMsg);
    console.log(e.detail.iv);
    console.log(e.detail.encryptedData);
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '未授权',
          success: function (res) { }
      })
    } else {
      wx.showModal({
          title: '提示',
          showCancel: false,
          content: '同意授权',
          success: function (res) { }
      })
    }
  }

表单之checkbox

• checkbox-group
  多项选择器，内部由多个checkbox组成
  bingchange 类型事件名 说明中选项发生改变是触发change事件。detail={value:[选中的checkbox的value的数组]}

• checkbox 最外面必须套一层checkbox-group配合使用 这个标签使用的时候一定要小心。他没有闭口，只有/
  多选项目
  value String 标识，选中时触发的 change事件，并携带的value
  disabled Boolean false 是否禁用
  checked Boolean false 当前是否选中，可用来设置默认选中
  color Color checkbox的颜色，同css的color

<!--index.html-->
<checkbox-group bindchange="checkboxChange">
<label class="checkcolor" wx:for="{{items}}">
<checkbox  value="{{item.value}}"checked="{{item.checked}}"/>{{item.name}}
</label>
</checkbox-group>

index.js文件

  data: {
     items:[
       {"name":"美国","value":"1"},
        {"name": "中国", "value": "2" },
         {"name": "韩国", "value": "3" },
          {"name": "日本", "value": "4" },
           {"name": "英国", "value": "5" }
     ]
  },
  checkboxChange:function(e){
    console.log(e);
    console.log(e.detail.value);
  }

input输入框

• value 类型Sting 输入框的初始内容
• type 类型String 默认值:text input类型
• password Boolean 默认值false 是否是密码类型
• placeholder String 输入框为空时，占位符
• placeholder-style String 指定placeholder的样式
• placeholder-class String 指定placeholder的样式类
• disabled Boolean 是否禁用
• maxlength Number 140 最大输入长度，设置为-1的时候不限制最大长度
• cursor-spacing Number 0 指定光标与键盘的距离 单位PX
• confirm-type String 设置右下角按钮的文字。
• confirm-hold Boolean false 点击键盘右下角按钮时候是否保持键盘不收起
• cursor Number 指定focus的光标位置

<!--input输入框-->
<view class="section">
  <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
  <view class="section__title">你输入的是：{{inputValue}}</view>
  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
  <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
  <input password type="number" />
</view>
<view class="section">
  <input password type="text" />
</view>
<view class="section">
  <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
  <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
<!--input输入框结束-->

picker

滚动选择器，现在支持3种选择器，通过mode来区分。分别是普通选择器，时间选择器，日期选择器，默认是普通选择器

普通选择器 mode = selector

• range Array 默认值[] 当mode为selector时候，range有效
• value Number 0 当mode为selector时候，是数字，表示了range中的第几个，从0开始
• bindchange 事件名称 value改变时候触发change事件。e.detail = {value:value}

时间选择器 mode = time
多列选择器 mode = multiSelector
日期选择器 mode = date
省市选择器 mode = region

radio-group 单项选择器同checkbox-group 事件名称:bindchange = “bindchange”

具体看checkbox