框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。详细介绍请参考组件文档

什么是组件:

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

注意:所有组件与属性都是小写,以连字符-连接

属性类型

类型 描述 注解
Boolean 布尔值 组件写上该属性,不管是什么值都被当作 true;只有组件上没有该属性时,属性值才为false
如果属性值为变量,变量的值会被转换为Boolean类型
Number 数字 12.5
String 字符串 "string"
Array 数组 [ 1, "string" ]
Object 对象 { key: value }
EventHandler 事件处理函数名 "handlerName" 是 Page 中定义的事件处理函数名
Any 任意属性  

公共属性

所有组件都有以下属性:

属性名 类型 描述 注解
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind* / catch* EventHandler 组件的事件 详见事件

特殊属性

几乎所有组件都有各自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。

.

小程序框架之视图层 View~基础组件的更多相关文章

  1. 小程序框架之视图层 View

    (1)视图层View 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示. 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. WXML(WeiXin Markup languag ...

  2. 小程序框架之视图层 View~事件系统~WXS响应事件

    WXS响应事件 基础库 2.4.4 开始支持,低版本需做兼容处理. 背景 有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势 ...

  3. 小程序框架之视图层 View~获取界面节点信息

    获取界面上的节点信息 WXML节点信息 节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: ...

  4. 小程序之如和使用view内部组件来进行页面的排版功能

    这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1 ...

  5. 小程序三:视图层之WXML

    WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. [1]数据绑定 1.1 简单绑定 数据绑定使用" ...

  6. 微信小程序学习笔记(5)--------框架之视图层

    这一系列转载:http://blog.csdn.net/zsp45212/article/details/53518238 视图层 框架的视图层由wxml与wxss编写,由组件进行展示.将逻辑层的数据 ...

  7. 零基础入门 实战mpvue2.0多端小程序框架

    第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...

  8. 小程序框架之逻辑层App Service

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈. ...

  9. Westore 1.0 正式发布 - 小程序框架一个就够

    世界上最小却强大的小程序框架 - 100多行代码搞定全局状态管理和跨页通讯 Github: https://github.com/dntzhang/westore 众所周知,小程序通过页面或组件各自的 ...

随机推荐

  1. 淡sqlserver对like '%关键词%' 处理时的索引利用问题

    说法一:百分号%通配符前置会让SQL查询不走索引,改走全表扫描.这种说法很流行 结论是错误的 事实上这种说法不太准确 通配符%前置会让SQL查找索引时效率极速下降,但在大多数情况下还是会走索引(不需要 ...

  2. Linux交换分区内存优化

    swappiness的值的大小对如何使用swap分区是有着很大的联系的.swappiness=0的时候表示最大限度使用物理内存,然后才是 swap空间,swappiness=100的时候表示积极的使用 ...

  3. 利用Idea查看类的继承关系图

    1.将光标定位到你想查看的类,点击右键,选择 Diagrams,其中有 show 和 show ... Popup,只是前者新建在标签页内,后者以浮窗的形式展示 可得,如下图所示. 查看图中的Appl ...

  4. 用海豚框架(DolphinPHP)实现单/多图片上传时,如何获得图片路径

    用框架实现图片上传很简单,就不多说了,然后这个框架的实现机制是这样的,我们选择图片,点击上传,他会将图片保存在uploads下,以当天时间和随机字母作为图片名,然后在返回个数字,这个数字是这个图片的i ...

  5. 解决Jupyter notebook安装后不自动跳转网页的方法

    在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...

  6. docekr安装mysql,redis,git和maven 脚本

    编写脚本 images_install.sh #!/bin/bash # author:qiao # 安装脚本 # reids:3.2(自启) mysql:5.7(自启)或者JDK:1.8 tomca ...

  7. Appium_Page object设计模式

    Page object设计模式思维,把app按页面去划分,一个页面就是一个page对象 每个页面的元素集中管理.页面上按钮操作方法单独封装 # __author__ = " Caric Le ...

  8. 深度自适应增量学习(Incremental Learning Through Deep Adaptation)

    深度自适应增量学习(Incremental Learning Through Deep Adaptation) 2018-05-25 18:56:00 木呆呆瓶子 阅读数 10564  收藏 更多 分 ...

  9. .Net Jpush极光推送

    1.首先登陆极光官网注册账号   https://www.jiguang.cn/push   2.注册成功后,在应用管理中创建应用

  10. js 使用 "use strict"

    "use strict"是JavaScript中一个非常好的特性,而且非常容易使用. 使用方法 // file.js "use strict" function ...