清云小程序教程六：wxml与组件

原文链接：http://www.0575yun.com/articledetail/id/63.html

之前，我们主要是围绕着app.json来讲解小程序的，从中讲解了一些app.json的配置项的知识，从这次开始，我们要把关注度放到小程序的一种另外的基本文件类型，也就是.wxml上面来。

前面我们在新建classic这个文件的时候，小程序已经自动帮我们生成了4个基本的文件，其中的classic.wxml就是本次要讲解的主题。让我们打开vs code，打开里面的classic.wxml，在之前的教程中我们也提到了wxml，它其实是一种骨架文件。那么我们现在看到的.wxml文件很简单，它只有一句代码：

pages/classic/classic.wxml

现在我们来看看最终完成的小程序中的.wxml是什么样子的：

在这里我们可以看到，现在的wxml文件就比较复杂了，我很可以很清楚的知道，它是由一个一个的标签嵌套起来的一种结构，那么各种各样的标签就支撑和构建了我们的wxml文件。这些一个一个的标签，比方说“view”、“image”、“epsoide-cmp”等等的这些蓝色的标签在小程序中叫什么呢？我们在小程序中统称它们为组件。现在的代码其实大家可以推断出来，一个wxml就是一个或多个组件的集合，就是说，写wxml就是在用一个一个的组件来填充wxml文件。

小程序给我们内置了很多很多组件，这些组件可以在哪里找到呢？在我们的小程序文档中，你可以看到各种各样的组件。回到我们的文档我们点击上面的“组件”，那么大家就可以看到，这里列出了所有的它所提供的一系列组件。

大致的分类在左侧的导航栏这里，最基础的组件叫做“视图容器”，然后呢，有一些基础内容组件，还有表单组件，等等等等，非常多的组件。在众多的组件中，我们开发者使用到最多的就是我们的“view”组件。

“view”组件在我们小程序中叫做视图容器，看到这里，你可以发现，小程序中组件其实和我们在开发网页的时候html中使用的标签是类似的，没有什么太大的区别。关于组件，这里也不一一详细的讲解了，大家多去看看文档吧！

关于组件有2点需要注意的。第一点，有些组件是要成对出现的，也有一些组件是即可以成对出现，也可以单个出现的。

对于"view"组件来说，它是要成对出现的，前面是的开始，后面是的闭合，成对出现的组件内部，我们是可以添加一些别的组件的，而例如像“image”组件，则可以单个出现，它不像是"view"组件需要在里面添加其他的内容，所以一般我们都是把“image”写成单行的形式，在后面加上“/”，写成来表示它的结束。这里要说明一点，如果把“image”写成像“view”那样，成对出现，也是可以的，只是通常是建议大家，可以单个的就只要写的单行就行，尽量避免它成对出现。第二点呢，对于组件来说，除了组件的它名字之外，它可以在名字后面为这个组件增加一系列的属性。比如说<view class="header">，这个后面的“class”就是它的属性，而像“image”组件，它里面除了“class”，还有”slot“、”src“属性，那是由于不同的组件支持不同的属性，才让我们的组件变得丰富多彩，实现各种各样的功能。所以说组件的属性也是大家要关注的一个地方。

关于组件的还有一点，在这里跟大家提一下，因为之后会详细的讲解，这里就简单的介绍一下。组件其实可以分为两大类：一类是微信已经给写好的组件，也叫做内置组件，比如“view”“image”都是小程序已经写好的组件，我们直接拿来用就可以了；还有一类是自己编写的组件，大家可以看到，这里有一些带横线的，比如“-cmp”的，这些不是微信官方提供的，而是我们开发者自定义的一些组件。在以前的小程序中我们要自己自定义组件是不能实现的，但是在新版本中，支持我们自己去编写组件。在微信的新增功能中，我觉得，自定义组件的出现是其中最为重要的功能了。

小程序中的组件跟我们html中的标签极为的相识，在这里就点到为止了，大家知道基本概念就可以了，讲太多对大家也没有多大的意义，大家多去写写就好了。