教程六:wxml与组件

之前,我们主要是围绕着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中的标签极为的相识,在这里就点到为止了,大家知道基本概念就可以了,讲太多对大家也没有多大的意义,大家多去写写就好了。


版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/63.html