微信小程序云开发教程-WXML入门-常用组件和属性

同学们大家好，我是小伊同学，今天继续学习WXML部分，我们来介绍一下常用的组件和属性。

 

  在上一节教程中，我们已经知道了什么是组件什么是属性。通常情况下，组件和属性都是配合使用，同时出现。

 

 

  组件和属性一起使用的基本格式在我们上一小节讲到的结构中添加了属性名称等于属性值的结构。这样的结构根据我们所需要的效果可以写很多，相互之间是平级的，共同起作用。

 

  需要注意的是所有组件与属性都是小写，以连字符-连接，每一种组件和每一种属性都代表一种“独特”的功能。

 

  在我们进行小程序开发的过程中，我们编写wxml的步骤主要就是两步：

• Step1：选择合适的组件

• Step2：为组件配备相应的属性

 

  下面我们来介绍一下组件的通用属性，包括id、class、style、hidden、data-*和bind*。

 

 

  其中我们最常用的主要是前三个和第五个。具体的使用方法同学们可以查阅微信开发文档，也可以观看我们的视频教程，我们将在实操部分具体为大家讲解该怎么使用。

 

  下面，我们来介绍一些我们后面实操会用到的几个基本组件：

 

 

  View是小程序中最常用的组件，主要功能就是组件容器，大家可以把他近似理解成一个盒子，将其他组件放到这个盒子中，再用几个盒子组成这整个页面，这样能够使得页面更加整齐有序。

 

  同时，在盒子的内部，我也可以很方便地设置一定的规律顺序排列组件，这样的设置不会影响到其他组件。同时，class指定的样式会作用于view内部的组件或文本内容。

 

  Text组件主要用于展示文字文本，是一种基础组件。我们可以在这个组件的起止标签内部书写文字，当然我们直接把文字放在View中也是没有问题的。

 

 

  媒体组件中，我们常用的就是image组件了，通过src属性，我们可以设置图片位置，使得程序页面上加载出图片来。

 

 

  Button组件顾名思义就表示按钮啦，通过这一组件，我们可以实现在页面上添加按钮。

 

 

  Input组件是页面出现输入框，程序可以获取到用户输入。

 

  当然，其实还有很多组件，同学们可以通过微信开发者文档进行自学。

 

 

  打开微信开发者文档，选择组件标签，左侧列出了所有组件，点击后右侧会显示该组件的专用属性及说明，里面还会有示例代码供大家参考学习。

 

  好了，本小节的内容就是这些，如果大家喜欢我的讲解，欢迎关注或转发分享，不要忘了点个“在看”支持一下哦~

 

  我们明天继续。

 

想看视频版？

关注公号“微程序学堂”，我们的视频教程即将上线

 

如果你自己写了好文章想投稿

请联系我们