同学们大家好,我是小伊同学,今天我们开始进入WXML部分的学习,首先我们来讲解一下基本语法。
什么是Wxml呢?我们首先要介绍一下Html,Html的全称为HyperTextMarkup Language,翻译过来就是超文本标记语言,这种语言目前已经普遍用于前端开发,而wxml正是从html演变而来,它基于微信这个平台,在很多方面变得更加简洁易用,更加适合微信小程序的开发。Wxml依然是标签语言,在小程序中,它可以结合基础组件、事件系统,可以构建出页面的结构。
如果想学习了解更多html的知识,可以百度“菜鸟教程”进行自学。本教程将以wxml为内容进行讲解,对于学习过html语言的同学通过微信开发者文档自学入门wxml也非常容易。关于wxml和html的区别,由于篇幅限制,也请访问微信开发者文档进行自学。
作为一种标签语言,wxml同样通过使用标记标签来描述页面结构,页面内容写在标签内部,标签由尖括号包围的关键词构成,具体来说,可以分为两类。
第一种是成对出现的标签,即有开始标签和结束标签,内容部分写在两个标签之间,基本结构为:<关键词>或</关键词>例如小程序中最常用的view组件的写法就是这样。
第二种是不成对出现的,使用时只有一个标签存在,基本结构为:<关键词/>,这种标签因为表示的含义使得他们不需要结束标签进行标识,例如我们常见的输入框,只需要一个标签就可以确定这个组件了,程序在编译过程中见到这个标签就会在对应位置添加输入框,而view作为视图容器,内部能够放置其他组件,就需要有开头和结尾进行标识。
在上面这张图片的例子中,代码第一行是注释,注释的格式是尖括号加感叹号加两个连字符开头,中间为注释内容,结尾为两个连字符加尖括号,在编译器中,我们使用ctrl加右斜杠/就可以实现对光标所在行或者所选代码的注释。
第二行为view,可以看到标签是成对出现的,这里的view实际上就是一个箱子,它能够作为一个或多个元素的容器使用。为了使大家在左侧模拟器中能够看到效果,我给view设定了长度和高度以及颜色三种样式。第三行和第四行,我写了两个输入组件,使用该input组件就可以在页面上完成左图所示的输入功能。那么对于input来说,其也可以成对标签的样子,两种写法都是可以的,但是大家一定要注意右斜杠的位置,避免出错。
那么,什么是组件呢?
组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。即:一个以wxml语法书写的整体。
组件的基本格式其实就是我们刚才讲到的标签语法结构。例如视图容器组件和输入框组件。
每一种组件都有一种“独特”的功能,编写wxml的第一步就是选择合适的组件。
WXML中的另一个重要概念就是属性,即刚刚提到的可以用来修饰组件的东西。属性实际上就是对不同组件设置参数用的,其基本的格式就是在第一个尖括号中,在指定了组件名称后,使用属性名称等于属性值的格式对组件的属性进行设置,其中属性值要使用单引号或双引号包裹起来,单引号和双引号都是成对出现,一些情况下,我们也需要同时使用,以区分一些字段的关系,防止歧义。
在上面这个例子中,我们使用了view组件,即视图容器。同时对这个组件设置了class、style、id、bindtap、hidden以及data-属性。Wxml组件的属性分为:通用属性和专用属性两类,通用属性是所有组件都能使用的属性,常用的通用属性包括:样式(包括静态样式class和动态的style)、id、响应函数、参数传递等。专用属性是针对特定组件使用的。想要更加细节地了解本部分内容可以访问开发文档自学。
日拱一卒,功不唐捐。涓流所积,终成沧海。
想看视频版?
关注公号“微程序学堂”,我们的视频教程即将上线
如果你自己写了好文章想投稿
请联系我们