微信小程序之组件：微信小程序教程系列19

迈不过友情╰ 2021-12-03 13:51 527阅读 0赞

什么是组件：

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

<tagname property="value">  
  Content goes here ...  
</tagename>  
注意：所有组件与属性都是小写，以连字符-连接

组件属性类型  
![20170522144232686][]

共同属性类型

所有组件都有的属性：

![20170522144347360][]

特殊属性  
特殊属性是各个组件自己定义的属性，如 <icon> 组件的size属性，具体各参见官方文档各组件具体说明。

组件列表

![20170522144045777][]

组件列表中的一些教程如下：（点击可打开）

视图容器

[view组件][view]

[scroll-view组件][scroll-view]

[swiper组件][swiper]

基础内容

[icon组件][icon]

[text组件][text]

[progress组件][progress]

表单组件

[button组件][button]

[checkbox组件][checkbox]

[form组件][form]

[input组件][input]

[picker组件][picker]

[radio组件][radio]

[slider组件][slider]

[switch组件][switch]

导航

[navigator组件][navigator]

媒体组件

[audio组件][audio]

[image组件][image]

[video组件][video]

[20170522144232686]: /images/20211203/df195f939fc543f68961becfc687b2dd.png
[20170522144347360]: /images/20211203/dd4d129b5db44862a7c5e4cc2d4f6c12.png
[20170522144045777]: /images/20211203/d0e3e54f8abb421d8016e5f0e9fdc38e.png
[view]: http://blog.csdn.net/u014360817/article/details/52658350
[scroll-view]: http://blog.csdn.net/u014360817/article/details/52658760
[swiper]: http://blog.csdn.net/u014360817/article/details/52659079
[icon]: http://blog.csdn.net/u014360817/article/details/52664196
[text]: http://blog.csdn.net/u014360817/article/details/52664406
[progress]: http://blog.csdn.net/u014360817/article/details/52664591
[button]: http://blog.csdn.net/u014360817/article/details/52664817
[checkbox]: http://blog.csdn.net/u014360817/article/details/52666794
[form]: http://blog.csdn.net/u014360817/article/details/52666817
[input]: http://blog.csdn.net/u014360817/article/details/52667720
[picker]: http://blog.csdn.net/u014360817/article/details/52668460
[radio]: http://blog.csdn.net/u014360817/article/details/52668808
[slider]: http://blog.csdn.net/u014360817/article/details/52668909
[switch]: http://blog.csdn.net/u014360817/article/details/52670109
[navigator]: http://blog.csdn.net/u014360817/article/details/52672227
[audio]: http://blog.csdn.net/u014360817/article/details/52672816
[image]: http://blog.csdn.net/u014360817/article/details/52675624
[video]: http://blog.csdn.net/u014360817/article/details/52675838