表单 Form

简介 Introduction

<form>和其中的大多数表单元素，基本同HTML5保持一致；具体效果视真机系统而定
表单数据提交时，请确保每个表单元素都指定属性 name；value可以由事件获取
请为每个表单元素都指定样式类 class
应初始化表单元素样式，如主题颜色和其它属性；部分需要配合类共同设置
组件还有一个共同属性：disabled

radio,
checkbox{
    zoom:0.8;
}

一定要预览。。。一定要预览。。。一定要预览。。。

<form>

表单容器；行内元素 inline
默认情况下，表单大小为0，即使添加了表单元素
生产环境下，通常是垂直方向分布各表单元素
布局上，为了优雅分隔各表单元素，通常增加一个内层元素 <view>，由它布局，而仅仅将 <form> 当作一个功能元素

<form bindsubmit="submit">
    <view class="form-cont">
        // 其它表单元素
        //按钮指定表单类型，可以触发表单的默认提交行为
        <button form-type="submit">submit</button>
    </view>
</form>

提交时，可以在事件对象 e.detail 中获取表格各元素的值；需要配合指定了 form-type 为 submit 属性的按钮 <button> 一起使用
多数情况下，抛弃表单元素 <form>，使用普通结构，通过数据双向绑定和自定义事件提交数据

submit(e) {
    console.log(e.detail);
}

表单事件
item	desc
bindsubmit	数据提交；默认
bindreset	表单重置时会触发 reset 事件

<button>

功能强大的按钮；有特定的类型属性和事件属性；块元素 block
如果设置了高度后，记得设置同样大小的行高，以确保文字垂直方向居中
除了默认的 tap 事件外，按钮其它事件大多和相应的开发能力关联

item	desc
loading	是否带 loading 图标；然并卵
form-type	按钮类型；点击触发 form 的submit/reset 事件 submit：单击后，默认行为是提交表单 reset：单击后，默认行为是重置表单
open-type	微信开放能力 chooseAvatar：获取用户头像 contact：客服 getPhoneNumber：获取用户手机(企业号) getUserInfo：获取用户信息(接口被收回)
bindchooseavatar	获取用户头像回调，返回头像临时地址；配合 open-type 使用
bindcontact	客服消息回调；配合 open-type 使用

开发能力 open-type 的使用，要随时关注官方接口的更新变化

[] 样式

<button> 组件的默认样式确实具有较高的优先级，会覆盖自定义样式
可以通过提权或设计 <view>来模拟
在调试器中，查看按钮的代理样式，体会样式初始化的重要性

// 方案1：使用 important 提权
button{
    width: 100%!important;
    background-color: var(--themeColor);
    color: #fff;    
}

// 方案2：使用选择器提权 - 叠加一个选择器作为所有按钮的基类
button.btn{
    width: 100%;
    background-color: var(--themeColor);
    color: #fff;    
}

部分样式需要在特定页面的类中设置

.btn{
    padding: 0;
    margin: 0;
    font-weight: normal;
    border-radius: 0;
}

[] 业务

打开客服对话框 - 用户点击后，打开客服对话框

<button open-type="contact" bindcontact='getContact'>getContact</button>

getContact(e){
    console.log(e);
}

选择用户头像 - 用户点击后，打开头像选择对话框

<button open-type="chooseAvatar" bindchooseavatar='getAvatar'>getAvatar</button>

getAvatar(e){
    console.log(e.detail);//http://tmp/bi86Wd1sI41s8ea8eb984c16d03bff787972d38e3ce6.jpg
}

<label>

行内元素 inline，用以扩展用户点击、改善用户体验
使用属性 for，配合指定了 id 的表单元素，如 <input>、<radio>、<checkbox>，可以改进表单组件的可用性

<checkbox value="撸码" id="code" /><label for="code">撸码</label>

或：使用 <label> 包裹表单元素，此时应略去 for 属性

<label>
    <checkbox color="#3498db" value="撸码" />撸码
</label>

<input>

单行文本输入框；块元素 block
原生组件，字体是系统字体，无法设置 font-family

item	desc
value	输入框初始内容；字符串；必填
type	输入框类型 text：文本键盘；默认 number：数字键盘 digit：带小数点的数字键盘 idcard：身份证键盘 nickname：昵称键盘 safe-password：密码
password	是否是密码类型；布尔；默认假
placeholder	输入框为空时占位符；字符串
placeholder-style	指定样式；仅支持设置颜色、大小和字重；需预览查看效果
placeholder-class	指定样式类；仅支持设置颜色、大小和字重；推荐
maxlength	最大输入长度；数字
focus	获取焦点；直接拉起键盘便于输入；但是用户欣赏不到你的设计
confirm-type	设置键盘右下角按钮的文字，仅适用text类型 send：发送 search：搜索 next：下一个 go：前往 done：完成；默认
bindinput	键盘输入时触发
bindfocus	输入框聚焦时触发
bindblur	输入框失去焦点时触发
bindconfirm	点击完成按钮时触发；不必非要使用普通事件

[] 业务

普通文本输入 - text

<view class="item">
    <text>昵称</text>
    <input type="text" 
      placeholder="您的昵称" 
      maxlength="8" 
      value="{{user.uname}}" />
</view>

昵称输入 - nickname；会自动拉取你的微信昵称

<view class="item">
    <text>昵称</text>
    <input type="nickname" 
      placeholder="您的昵称" 
      maxlength="8" 
      value="{{user.uname}}" />
</view>

密码输入 - safe-password；隐藏真实信息

<view class="item border-btm">
    <text>密码</text>
    <input type="safe-password" 
      placeholder="您的密码" 
      maxlength="8" 
      value="{{user.upass}}" />
</view>

数值型输入 - digit；打开数字键盘，需要在手机端查看效果

<view class="item border-btm">
    <text>学号</text>
    <input type="digit" 
      placeholder="您的学号" 
      maxlength="8" 
      value="{{user.usn}}" />
</view>

输入完毕后，按回车键或真机环境中，按键盘右下角的输入/确认即可触发后续逻辑；需要绑定 bindconfirm 事件并指定类型

<input type="text" 
  placeholder="请输入您要搜索的商品名称" 
  model:value='{{keyword}}' 
  bindconfirm="queryProducts" 
  confirm-type="search" />

<radio> <radio-group>

多选一组件：单选按钮和单选按钮组
行内块元素 inline-block
HTML中，需要给每个 <radio> 指定 name 以确保是一组；微信小程序中，使用 <radio-group> 分组，且指定 name

<radio-group>
item	desc
bindchange	选中项发生改变时触发；从事件对象 e.detail 获取当前选中的值（数组）

<radio>
item	desc
value	单选按钮的值
checked	当前是否选中
color	单选按钮选中时的颜色
disabled	是否禁用

[] 业务

性别选择

<radio-group bindchange="getGender" name="ugender">
    <radio color="#3498db" value="男" checked />男
    <radio color="#3498db" value="女" />女
</radio-group>

获取结果

getGender(e){
    console.log(e.detail.value);
}

利用给定的数据和当前值是否相等来决定哪个是选中状态

<radio-group bindchange="getGender" name="ugender">
    <radio color="#3498db" value="男" checked="{{user.ugender=='男'}}" />男
    <radio color="#3498db" value="女" checked="{{user.ugender=='女'}}" />女
</radio-group>

使用 <label> 改写上例，提升用户体验

[] 样式

隐藏 <radio>，重新设计
更多信息，请访问 Html - <input>

<checkbox> <checkbox-group>

行内块元素 inline-block
多选按钮；多选按钮组

<checkbox-group>
item	desc
bindchange	选中项发生改变时触发；从事件对象 e.detail 获取当前选中的值（数组）

<checkbox>
item	desc
value	多选按钮的值；数组
checked	当前是否选中
color	多选按钮选中时的颜色
disabled	是否禁用

[] 业务

兴趣选择

<checkbox-group bindchange="getLike" name='ulike'>
    <checkbox color="#3498db" value="撸码" />撸码
    <checkbox color="#3498db" value="睡觉" checked/>睡觉
    <checkbox color="#3498db" value="电玩" />电玩
    <checkbox color="#3498db" value="唱歌" checked/>唱歌
    <checkbox color="#3498db" value="跳舞" />跳舞
    <checkbox color="#3498db" value="美食" checked/>美食
</checkbox-group>

获取选择结果

getLike(e){
    console.log(e.detail.value);
}

使用 <label> 改写上例，提升用户体验

[] 样式

多选按钮默认是方块
自定义方法同 <radio>

[] 全选/全不选

购物车中商品的操作
如果全选为真，则所有商品为选中状态
如果全选为假，则所有商品为取消状态
只有所有商品都是选中状态，全选才为真
只要有一个商品是取消状态，则全选为假
数据：每个商品数据有有一个字段 selected 用来标记是否为选中状态

data:{
  carts:[],
  isAll: false
}

商品列表渲染：每个商品项和一个 <checkbox> 关联并绑定 tap 事件 toggleItemSelection；使用自定义数据携带 id，便于修改其选择状态；其它内容略

<view wx:for="{{carts}}" wx:key="item">
  <checkbox checked="{{item.selected}}" bind:tap="toggleItemSelection" data-id='{{item.id}}' />
  // ...
</view>

全选 <checkbox> 并绑定 tap 事件 toggleSelectAll

<label>
  <checkbox checked="{{isAll}}" bind:tap="toggleSelectAll" />全选
</label>

全选逻辑：获取商品数据 carts 和全选标记 isAll；如果 isAll 之前是假，单击后，将变为真；所以将 isAll 取反后给每一个商品更新状态；最后更新数据

toggleSelectAll() {
  const {
    carts,
    isAll
  } = this.data
  carts.map(cart => cart.selected = !isAll)
  this.setData({
    carts,
    isAll: !isAll
  })
}

单个商品的选择状态逻辑：获取所有商品数据及当前商品数据 id；取反当前商品数据的状态状态；然后根据当前所有商品数据的选择状态，决定 isAll 的真假；使用数组方法 every 实现 - 只要每一个商品数据都是选中状态， isAll 才是真；否则为假；最后更新数据

toggleItemSelection(e) {
  console.log(e.currentTarget);
  const {
    carts
  } = this.data
  const id = e.currentTarget.dataset.id
  const updatedCarts = carts.map(cart => {
    if (cart.id == id) {
      cart.selected = !cart.selected
    }
    return cart
  })
  const isAll = updatedCarts.every(cart => cart.selected)
  this.setData({
    carts: updatedCarts,
    isAll
  })
}

数组函数的使用 map()、every()...

<textarea>

多行输入；默认大小300*150；块元素 block
最大长度140个字符

item	desc
value	输入框初始内容；字符串；必填
placeholder	输入框为空时占位符；字符串
maxlength	最大输入长度；数字
focus	获取焦点
confirm-type	设置键盘右下角按钮的文字，仅适用text类型 send：发送 search：搜索 next：下一个 go：前往 done：完成；默认
bindfocus	输入框聚焦时触发
bindinput	键盘输入时触发；组合使用
bindblur	输入框失去焦点时触发；组合使用
bindconfirm	点击完成按钮时触发；组合使用
bindlinechange	输入框行数变化时调用

<view>
    <text>简介</text>
    <textarea name="udesc" value="{{user.udesc}}" maxlength="30" placeholder="your message"/>
</view>

[] 样式

显式的设置宽度和容器保持一样大小；同时设置内边距 padding 以使得文字内收一定距离

textarea{
    width: 100%;
    padding: 20rpx;
}

<picker>

块元素 block
从底部弹起的滚动选择器，如：时间选择器、日期选择器、地区选择器
除了下述通用的属性外，不同的 mode，picker 拥有不同的属性；如时间类的都有开始 start、结束 end 等
内部结构和样式受到一定限制，不能像普通 view 组件那样直接使用弹性盒子 Flexbox来控制其内部元素的排列
在内部增加一个子容器，对该容器使用 Flex，见后续案例

item	desc
mode	模式 selector：普通选择器 multiSelector：多列选择器 time：时间选择器；hh:mm date：日期选择器；YYYY-MM-DD region：省市区选择器
range	数据列表\|范围
bindcancel	取消选择时触发
bindchange	选择时触发

[] 业务

弹出菜单 - ind和list是data中的数据

<picker 
    mode="selector" 
    value="{{ind}}" 
    range="{{list}}" 
    bindchange="pick"
>
    {{list[ind]}}
</picker>

pick(e){
    console.log(e.detail.value)
}

时间选择 - time；可以指定起始 start 和结束 end

<picker 
    mode="time" 
    value="{{time}}" 
    bindchange="selTime"
>
    {{time]}}
</picker>

selTime(e){
    this.setData({
        time: e.detail.value
    })
}

日期选择 - date；通常应指定起始 start 和结束 end

<picker 
    mode="date" 
    value="{{user.ubirth}}" 
    start="2000-07-01"
    end="2026-12-31"
    bindchange="selDate"
>
    {{user.ubirth}}
</picker>

selDate(e){
    this.setData({
        date: e.detail.value
    })
}

地区选择 - region；e.detail.value 返回一个数组：省、市、区；可以不使用地图实现选择

<picker 
    mode="region" 
    value="{{region}}" 
    bindchange="selRegion"
>
    {{region}}
</picker>

selRegion(e){
    this.setData({
        region: e.detail.value
    })
}

[] 样式

无效

<picker class='flex'>
    <text>cont</text>
    <text>cont</text>
    <text>cont</text>
</picker>

有效 - 增加容器元素；思路同 <scroll-view>

<picker >
  <view class='flex'>
    <text>cont</text>
    <text>cont</text>
    <text>cont</text>
  </view>
</picker>

<slider>

块元素 block
滑动选择器

item	desc
min	最小值
max	最大值
step	步长
show-value	是否显示值；默认不显示
backgroundColor	背景条的颜色
activeColor	已选择的颜色
block-size	滑块的大小，取值范围为 12 - 28
block-color	滑块颜色
bindchange	拖动后触发
bindchanging	拖动过程中触发

[] 业务

年龄选择

<slider 
    activeColor="#3498db" 
    backgroundColor="#ccc" 
    block-size="24" 
    block-color="#3498db" 
    bindchange="selAge" 
    min="18" 
    max="24" 
    name="uage" 
    value="{{user.uage}}" 
    show-value 
/>

selAge(e){
    console.log(e.detail.value)
}

播放进度调节

<switch>

行内块元素 inline-block
开关选择器
也可以使用 checkbox 实现功能

item	desc
checked	是否选中
color	已选择的颜色
type	switch, checkbox；默认是switch
bindchange	选择后触发