五.微信小程序基础组件

傷城~ 2023-07-03 06:03 35阅读 0赞

# 微信小程序 基础组件 #

### 文章目录 ###

*  微信小程序 基础组件
 *   *  一.基础组件
     *  二.属性类型
     *  三.共同属性类型
     *  四.组件列表
     *   *  1. 视图容器( View Container):
         *  2. 基础内容(Basic Content):
         *  3. 表单(Form):
         *  4. 导航(Navigation):
         *  5. 多媒体(Media):
         *  6. 地图(Map):
         *  7. 画布(Canvas):
         *  8. 客服会话:

## 一.基础组件 ##

*  组件是视图层的基本组成单位.
 *  组件自带一些功能与微信风格的样式.
 *  一个组件通常包括`开始标签`和`结束标签`, `属性`用来修饰这个组件, `内容`在两个标签之内.

**注意: 所有组件与属性都是小写, 以连字符`-`连接**

## 二.属性类型 ##

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
   <th>注解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Boolean</td> 
   <td>布尔值</td> 
   <td>组件写上该属性, 不管该属性等于什么, 其值都为<code>true</code>, 只有组件上没有写该属性时, 属性值才为<code>false</code>. 如果属性值为变量, 变量的值会被转化为Boolean类型.</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>数字</td> 
   <td><code>1</code>, <code>1.2</code></td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串</td> 
   <td><code>"string"</code></td> 
  </tr> 
  <tr> 
   <td>Array</td> 
   <td>数组</td> 
   <td><code>[ 1, "string" ]</code></td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>对象</td> 
   <td><code>{ key: value }</code></td> 
  </tr> 
  <tr> 
   <td>EventHandler</td> 
   <td>事件处理函数名</td> 
   <td><code>"handlerName"</code>是Page中定义的事件处理函数</td> 
  </tr> 
  <tr> 
   <td>Any</td> 
   <td>任意属性</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 三.共同属性类型 ##

所有组件都有的属性:

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>注解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>String</td> 
   <td>组件的唯一标示</td> 
   <td>保持整个页面的唯一</td> 
  </tr> 
  <tr> 
   <td>class</td> 
   <td>String</td> 
   <td>组件的样式类</td> 
   <td>在对应的wxss中定义的样式类</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>String</td> 
   <td>组件的内联样式</td> 
   <td>可以动态设置的内联样式</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>Boolean</td> 
   <td>组件是否显示</td> 
   <td>所有组件默认显示</td> 
  </tr> 
  <tr> 
   <td>data-*</td> 
   <td>Any</td> 
   <td>自定义属性</td> 
   <td>组件上触发的事件时, 会发送给事件处理函数</td> 
  </tr> 
  <tr> 
   <td>bind*/catch*</td> 
   <td>EventHandler</td> 
   <td>组件的事件</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 四.组件列表 ##

基础组件分为以下八大类:

### 1. 视图容器( View Container): ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>view</td> 
   <td>视图容器</td> 
  </tr> 
  <tr> 
   <td>scroll-view</td> 
   <td>可滚动视图容器</td> 
  </tr> 
  <tr> 
   <td>swiper</td> 
   <td>可滑动的视图容器</td> 
  </tr> 
 </tbody> 
</table>

### 2. 基础内容(Basic Content): ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>icon</td> 
   <td>图标</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文字</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>进度条</td> 
  </tr> 
 </tbody> 
</table>

### 3. 表单(Form): ###

<table> 
 <thead> 
  <tr> 
   <th>标签名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>button</td> 
   <td>按钮</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>表单</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>多项选择器</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单项选择器</td> 
  </tr> 
  <tr> 
   <td>picker</td> 
   <td>列表选择器</td> 
  </tr> 
  <tr> 
   <td>picker-view</td> 
   <td>内嵌列表选择器</td> 
  </tr> 
  <tr> 
   <td>slider</td> 
   <td>滑动选择器</td> 
  </tr> 
  <tr> 
   <td>switch</td> 
   <td>开关选择器</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>标签</td> 
  </tr> 
 </tbody> 
</table>

### 4. 导航(Navigation): ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigator</td> 
   <td>应用内跳转</td> 
  </tr> 
 </tbody> 
</table>

### 5. 多媒体(Media): ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>audio</td> 
   <td>音频</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>图片</td> 
  </tr> 
  <tr> 
   <td>video</td> 
   <td>视频</td> 
  </tr> 
 </tbody> 
</table>

### 6. 地图(Map): ###

### 7. 画布(Canvas): ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>canvas</td> 
   <td>画布</td> 
  </tr> 
 </tbody> 
</table>

### 8. 客服会话: ###

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>contact-button</td> 
   <td>进入客服会话按钮</td> 
  </tr> 
 </tbody> 
</table>