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

什么是组件:

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格一致的样式。
  • 一个组件通常包括 开始标签 和 结束标签属性 用来修饰这个组件,内容 在两个标签之内。
<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. [LeetCode] 712. Minimum ASCII Delete Sum for Two Strings 两个字符串的最小ASCII删除和

    Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings equal. ...

  2. nvm安装、解决nvm command not found问题、卸载

    安装 nvm是node的包版本管理工具,github地址如下:nvm 安装命令 1 curl -o- https://raw.githubusercontent.com/creationix/nvm/ ...

  3. hexo 博客如何更换电脑

    如何在更换电脑后继续使用Hexo部署博客 重要目录 _config.yml package.json scaffolds/ source/ themes/ 在新电脑上配置hexo环境:安装node.j ...

  4. Prometheus入门到放弃(5)之AlertManager部署

    alertmanager与exporters.cadvisor一样,都是独立于prometheus项目,这里我们也使用docker方式部署alertmanager. 1.下载镜像 镜像地址:https ...

  5. Kafka序列化和反序列化与示例

    1.  卡夫卡序列化和反序列化 今天,在这篇Kafka SerDe文章中,我们将学习使用Kafka创建自定义序列化器和反序列化器的概念.此外,我们将了解序列化在Kafka中的工作原理以及为什么需要序列 ...

  6. 【C++札记】标准输入与输出

    概述 C语言中使用函数scanf和printf作为标准输入和输出,在C++中引入了类cin和cout进行标准输入和输出,所需头文件为<iostream>,命名空间是std.这里所说的标准输 ...

  7. 题解 P3957 【跳房子】

    对于这题有一个不用单调队列并且不是玄学设置区间最大值的做法 这题校内模拟考的时候打二分+枚举,结果写炸了,跑过来看题解发现为什么他们的区间最大值都是 $ 1005 $ ???特别懵,其实我的代码在dp ...

  8. 长乐培训Day4

    T1 矩阵 题目 [题目描述] 从前有个 n×m 的矩阵,初始时每个位置均为 0.你需要依次执行 q 个操作,每个操作会指定一行或一列,然后将该行或该列的所有元素全部赋为一个相同的值. 输出操作完成后 ...

  9. Serializer组件

    Serializer组件 一 .序列化器-Serializer 作用: 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 反序列化,把客户端发送过来的数据,经过req ...

  10. leetcode无重复字符的最长子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...