小程序之组件

1.  一个小程序页面可以分解成多个部分组成,组件就是小程序页面的基本组成单元。组件是在WXML模板文件声明中使用的,小程序使用标签名来引用一个组件,通常包含开始标签和结束标签,该标签的属性用来描述该组件。比方说

  <view style='padding-bottom:10%'>
        <text>学生管理系统</text>
  </view>

   需要注意,所有组件名和属性都是小写,多个单词会以英文横杠 "-" 进行连接。

2.  组件共有的属性:(感觉常用的一些,非常细节的可以去看开发文档,那里面都有)

  id             String       组件的唯一标示      保持整个页面唯一
  class         String        组件的样式类      在对应的WXSS中定义的样式类
  style         String        组件的内联样式    可以通过数据绑定进行动态设置的内联样式
  hidden      Boolean       组件是否显示       所有组件默认显示     
  data-*    Any     自定义属性    组件上触发的事件时,会发送给事件处理函数

3.  组件都拥有各自自定义的属性,可以对该组件的功能或者样式进行修饰,以image图片组件为例,其属性列表如表所示

   

4.  常用的一些组件:

   1)视图容器

    组件名                    说明
    view                    视图容器
    scroll-view               可滚动视图容器
    swiper                  滑块视图容器
    movable-view/movable-area      可移动的视图容器

   2)基础内容

    组件名       说明
    icon        图标
    text        文字
    rich-text    富文本
    progress     进度条

   3)表单

    标签名       说明
    button      按钮
    form       表单
    input      输入框
    label       标签
    textarea    多行输入框
    picker     列表选择器

   4)导航

    组件名       说明
    navigator    页面链接

   5)多媒体

    组件名    说明
    audio    音频
    image    图片
    video    视频

   6)地图

    组件名    说明
    map    地图

5.  介绍完组件写一个样例看一下

   先看样式,我们看到的属性有一个内联样式style和类样式class

   内联样式接受动态样式,在运行时会进行解析,用于控制样式的调整。定义单一元素,或使用中发生较大变化的元素。

   类样式是用于统一类型的多个元素,重复使用的元素,从而减少重复代码的数量。

   先看class和style,class和style的最后的目的是一样的,只不过class是对当前容器命名后,在wxss页面进行样式的编写,而style是直接在页面语句中的语句中进行编写,在程序执行的时候,style>class;

  <!--index.wxml-->
  <view clas="index" style="background: white">
    <text>Hello World!</text>
  </view>
  page {
    background: black;
  }
  .index
  {
    background: black;
  } 

   运行结果:

   

 

原文地址:https://www.cnblogs.com/jkzr/p/10295474.html