小程序：基础内容和表单组件总结

你的名字 2022-01-21 23:57 358阅读 0赞

**前言**  
经过这么久的学习，可以看出来小程序中组件的使用方法就跟html的标签一样，标签有起始`<tagname>`和闭合`</tagname>`，可以拿来直接使用，然后属性直接在<`tagname>`中调用，例如，使用button组件的type属性，可以这样用：

## 1.基础内容组件 ##

基础内容包含图标icon、进度条progress、富文本rich-text和文本text等组件。小程序版本更新很快，后面可能还会有新增加的组件。

1.  图标icon
    
    icon图标组件的长度默认是px，目前支持的属性有图标类型type(必填)，图标的大小size、图标的颜色color。
    
    如下：
    
    ![icon][]
    
    图标类型type的有效值有：success, success\_no\_circle, info, warn, waiting, cancel, download, search, clear这些。形状分别如下图：
    
    ![icon类型][icon 1]
2.  进度条progress
    
    进度条组件属性的长度单位默认的是px，常用的属性有：
    
    显示百分比percent、在进度条右侧显示进度条show-info，进度条圆角border-radius、进度条颜色color、进度条从左到右的动画active等。详细属性如下：
    
    ![percent属性][percent]
    
    例如wxml文件中代码：
    
        <progress percent="20" show-info />
        <progress percent="40" stroke-width="12" />
        <progress percent="60" color="pink" />
        <progress percent="80" active />
    
    效果：
    
    ![进度条效果][20190604161926620.png]
3.  文本text
    
    文本text组件目前有三个属性，分别是：selectable（文本是否可选）、space（显示连续空格）和decode（是否解码）。
    
    ![text属性][text]  
    text组件有几点需要注意的地方：
    
    1.text组件内只支持text嵌套，不支持其他组件嵌套。
    
    2.基础库的版本低于2.1.0时，text组件内嵌的text style样式设置可能不会生效。
    
    3.decode解码可以解析的有：空格` `、<`<`、>`>`、&`&`、单引号’`'`、空格标记` `和` `

[详情参考开发文档][Link 1]

## 2.表单组件 ##

表单类组件有些多，特绘制如下表格：

<table> 
 <thead> 
  <tr> 
   <th>组件名称</th> 
   <th>描述</th> 
   <th>常用属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>button</td> 
   <td>按钮</td> 
   <td>size：按钮大小，type：按钮的样式类型，disabled：是否禁用</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>多选项目</td> 
   <td>checked：当前是否选中，用来设置默认选中；color：checkbox的颜色，同css的color；value：checkbox的值</td> 
  </tr> 
  <tr> 
   <td>checkbox-group</td> 
   <td>多项选择器，内部由多个checkbox组成。</td> 
   <td>bindchange：checkbox-group中选中项发生改变时触发 change 事件</td> 
  </tr> 
  <tr> 
   <td>editor</td> 
   <td>富文本编辑器，可以对图片、文字进行编辑</td> 
   <td>read-only：设置编辑器为只读；placeholder：提示信息</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。</td> 
   <td>bindsubmit：携带form中的数据触发submit事件。bindreset：表单重置时触发reset事件。</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
   <td>value：输入框的初始内容；type：输入框类型；password：是否是密码类型等</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发相应的控件。</td> 
   <td>for：绑定控件的id</td> 
  </tr> 
  <tr> 
   <td>picker</td> 
   <td>从底部弹起的滚动选择器</td> 
   <td>mode：选择器类型，默认是selector（普通选择器），还有time（时间选择器）、date（日期选择器）、region（省市区选择器）、multiSelector(多列选择器)。disabled：是否禁用。bindcancel：取消选择时触发。</td> 
  </tr> 
  <tr> 
   <td>picker-view</td> 
   <td>嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>pick-view-column</td> 
   <td>滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单选项目</td> 
   <td>value：radio的值。checked：当前是否选中。disabled：是否禁止。color：radio的颜色</td> 
  </tr> 
  <tr> 
   <td>radio-group</td> 
   <td>单项选择器，内部由多个radio组成</td> 
   <td>bindchange： checkbox-group中选中项发生改变时触发 change 事件。</td> 
  </tr> 
  <tr> 
   <td>slider</td> 
   <td>滑动选择器</td> 
   <td>min：最小值。max：最大值。step：步长。</td> 
  </tr> 
  <tr> 
   <td>switch</td> 
   <td>开关选择器</td> 
   <td>checked：是否选中。disabled：是否禁用。type：样式，有效值：switch, checkbox</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>多行输入框</td> 
   <td>value：输入框的值。placeholder：输入框为空时占位符。maxlength：最大输入长度。focus：获取焦点</td> 
  </tr> 
 </tbody> 
</table>

关于各个表单组件的更多属性及其用法请参考小程序开发文档。[表单组件][Link 2]

[icon]: /images/20220122/7266dc0107024cb48d1d012677ebacf4.png
[icon 1]: /images/20220122/78eae700d9804eacb577fe4e3519291e.png
[percent]: /images/20220122/2598b58a86b8491c98e3577dfc46fccf.png
[20190604161926620.png]: /images/20220122/98254f2d4cd942d1aca9c0208ca3448d.png
[text]: /images/20220122/a40cdfe166804f3eb0451983e0500d49.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html