微信小程序WXML语法介绍

WXML 介绍

全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

打开开发工具的编辑器,在根目录下找到 app.json 文件,双击打开,在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后,读者可以在编辑器中找到 pages/wxml/index.wxml 文件,

2.2.1 介绍

WXML 文件后缀名是 .wxml ,打开 pages/wxml/index.wxml 文件,有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式,简单的 WXML语句在语法上同 HTML 非常相似。

不带有任何逻辑功能的 WXML 基本语法如下:

<!-- 在此处写注释 -->

<标签名 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签名>

除了一些特殊的属性外,其余属性的格式都是key="value" 的方式成对出现

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

带有属性的图片标签

<image class="userinfo-avatar" src="./image/a.png" ></image>

一个完整的 WXML语句由一段开始标签和一段结束标签组成,在标签中可以是内容,也可以是其他的 WXML 语句,这一点上同 HTML 是一致的。有所不同的是,WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。

2.2.2 数据绑定

WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。

<!--

{

  time: (new Date()).toString()

}

-->

<text>当前时间:{{time}}</text>

属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中,如下:

需要注意的是变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

还需要注意,没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中,如代码2-10所示。

2.2.3 逻辑语法

通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算和算数运算,字符串的拼接,

{{ }}中还可以直接放置数字、字符串或者是数组

2.2.4 条件逻辑

WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:使用 wx:elif 和 wx:else 来添加一个 else 块:

列表渲染(看不懂在讲什么)

wx:if 是一个控制属性

2.2.5 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名:

类似 block wx:if ,也可以将 wx:for 用在 <block/> 标签上,以渲染一个包含多节点的结构块。例如:

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容, <switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

2.2.6 模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段,如:

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如代码2-17所示。

is可以动态决定具体需要渲染哪个模板,如代码2-18所示。

2.2.7 引用

WXML 提供两种文件引用方式import和include。

import 可以在该文件中使用目标文件定义的 template,如:

在 item.wxml 中定义了一个叫 item的 template :

需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,

2.2.8 共同属性

所有wxml 标签都支持的属性称之为共同属性,如表所示。

猜你喜欢

转载自blog.csdn.net/BTUJACK/article/details/88780743
今日推荐