零基础学做网站培训介绍

当前位置:

什么是微信小程序组件

以下为学做网站论坛关于“什么是微信小程序组件”讲解视频教程。

在制作微信小程序中,有一个概念经常会被说起,那就是“组件”。那么什么是微信小程序组件呢?这一节,我们带领大家了解一下微信小程序组件。
什么是组件:(等同于HTML中的标签)

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

<view></view>

微信小程序组件与HTML中的标签类似,一个组件是指从组件开始标签到结束标签的所有代码,由于组件可能会被转译为不同端对应的代码,所以在页面创建过程中,不能使用小程序组件标签以外的标签。
组件定义及属性

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

按类型可以将组件划分为七大类:视图容器、基础内容、表单、导航、多媒体、地图、画布
一个完整的组件结构如下:


<tagname property="value">contents</tagname>

组件可以通过属性进行配置,属性只能用在开始标签或单个自闭合标签上,不能用于结束标签。一个组件可以对应多个属性,属性具有名称和值两部分,组件的属性名称都是小写,以连字符“-”连接。组件属性分为所有组件都有的共同属性和组件自定义的特殊属性。
1.组件的共同属性

  • id:组件的唯一表示,保持整个页面唯一。
  • class:组件里的样式类,在对应的WXSS中定义的样式类。
  • style:组件的内联样式,可以动态设置的内联样式。使用方式同HTML标签style属性。
  • hidden:组件是否显示,所有组件默认显示。
  • data-*:自定义属性,组件上触发事件时,会发送给事件处理函数。事件处理函数可以通过datascl获取。
  • bind*/catch*:组件的事件,绑定逻辑层相关事件处理函数。bind为冒泡事件,catch为非冒泡事件。

除上述属性以外几乎所有组件都有自定义属性,可以对该组件的功能或样式进行修饰,具体参考各个组件的定义。
2.组件的属性类型
每个属性都有其对应的类型,使用时应给属性值传入对应的类型值,属性按类型可分为:

  • Boolean:布尔值,组件写上该属性,不管该属性等于什么,其值都为true,只有组件上没有写该属性时,属性值才为false。如果属性值为变量,变量的值会被转换为Boolean类型。
  • Number:数字。
  • String:字符串。
  • Array:数组。
  • Object:对象。
  • EventHandler:事件处理函数名。
  • Any:任意属性。

发表评论

邮箱地址不会被公开。 必填项已用*标注