微信小程序开发5-WXML
1.HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位。HTML与其他标记语言一样,HTML的关键,是标签(tag)。HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分。标签是经过编码的符号,用于区分和分隔内容的不同部分,并告知浏览器它处理的是什么类型的内容。大多数HTML标签的名字都准确地描述了它们的用途和它们所标注的内容的类型,如标题、段落、列表、图像等。
2.HTML的标签包括在一对尖括号(<>)之间,以便将它们与普通文本区分开来。第一个尖括号(<)标明了标签的开头,随后是特定的标签名(tag name),最后以一个反向的尖括号(>)结束。例如下面是一个表示段落的开头的HTML标签:
<p>
在HTML中,标签名是大小写不敏感的,就是说不区分大小写,但在WXML中的属性是大小写 敏感的。也就是说 {{name}} 和 {{Name}} 是两个不同的变量。
3.大多数标签配对使用:一个开标签[(opening tag),也叫开始标签、起始标签(start tag)],用于表明一个内容片段的开始,还有一个闭标签[closing tag,也叫结束标签、结尾标签、终止(end tag)],用于表明其结束。例如段落的开始用开标签<p>表示,其结尾标签用</p>表示。闭标签中第一个尖括号后的斜线(/)将它与开标签区分开。一个完整的段落标记如下:
<p>Hello, World!</p>
4.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中。
5.通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算。
三元运算
算数运算
字符串拼接
<!--
{ name: 'world' }
--> <view>{{"hello " + name}}</view> <!-- 输出 hello world -->
6.WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块(条件逻辑):
<view wx:if="{{condition}}"> True </view>
7.使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名
8.<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
- 因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
2.类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:
</block>
9.WXML 提供两种文件引用方式import和include。
需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。
include 可以将目标文件中除了 <template/> <wxs/>
外的整个代码引入,相当于是拷贝到 include 位置。
10.所有wxml 标签都支持的属性称之为共同属性
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标识 | 整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
bind*/catch* | EventHandler | 组件的事件 |
微信小程序开发5-WXML的更多相关文章
- 微信小程序开发笔记01
微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...
- 微信小程序开发:学习笔记[2]——WXML模板
微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发 -- 02
微信小程序开发 --02 微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码 ...
随机推荐
- HDU4622 (查询一段字符串的不同子串个数,后缀自动机)
http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意:给出一个字符串和q次询问,每次询问[l,r]区间内不同子串的个数 分析: N<=2000. 我 ...
- django中使用时间帅选报RuntimeWarning: DateTimeField Coupon.valid_begin_date received a naive datetime (2018-08-16 20:51:40.135425) while time zone support is active.
今天在使用当前时间进行筛选数据时出现了RuntimeWarning: DateTimeField Coupon.valid_begin_date received a naive datetime ( ...
- nginx基础学习第二篇:nginx内置变量的使用
ngx_http_core模块提供的内置变量有很多,常见的有 $uri,用来获取当前请求的uri,不含请求参数. $request_uri,用来获取请求最原始的uri,包含请求参数,且未解码. $re ...
- 计算机网络透明网桥算法时间戳c++
要交CG的兄弟们别抄啊,撞上了严nan谁都不会放过的 好久没写博客了,这次是老师布置的作业,做出来一种,觉得写得很不好,第一种方法把情况都写死在代码里了. 上代码 #include<iostre ...
- mvc Area(区域)相关技术
ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...
- PL/SQL 游标
本随笔不是原创,只是学习笔记,用于加深记忆,原创地址PL/SQL --> 游标 一.游标的相关概念和特性 1.定义: 映射到结果集中的某一行的特定位置,类似与C语言中的指针.即通过游标方式定位到 ...
- JDBC(1)-连接数据库
主要步骤包括: 加载驱动: 连接数据库: 使用语句操作数据库: 关闭数据库连接,释放资源. 1.需要导包: 2.加载数据驱动: mysql驱动名:com.mysql.jdbc.Driver 加载方式: ...
- JetBrains PyCharm(Professional版本)的下载、安装和初步使用
不多说,直接上干货! 首先谈及这款软件,博主我用的理由:搞机器学习和深度学习! 想学习Python的同学们,在这里隆重介绍一款 Python 的开发工具 pyCharm IDE.这是我最喜欢的 Pyt ...
- Kafka 0.9 新消费者API
kafka诞生之初,它自带一个基于scala的生产者和消费者客户端.但是慢慢的我们认识到这些API有很多限制.比如,消费者有一个“高级”API支持分组和异常控制,但是不支持很多更复杂的应用场景:它也有 ...
- JavaSE_XMind总结
1 JDBC知识点总结