微信小程序----WXML

简介

全称：

WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。

WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似

标签闭合编译：

WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

WXML中的属性是大小写敏感：

WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方

下面来一一阐述一下：

1. 标签名不一致
   1. HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。
   2. 小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。
2. 属性不一致

   1. 属性：WXML多出wx:if、wx:for等一些属性及表达式

      在网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的 树)，以引起界面的一些变化响应用户的行为。

   2. MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。
   3. MVVM模式：简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
   4. 小程序的框架也是用到了这个思路，例如数据绑定案例。
3. 数据data初始化：
   1. 页面需要显示动态数据必须要定义到data对应的变量中；
   2. 如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
   3. 获取data数据语法为this.data.属性名

基本标签

视图容器标签

<view>

先介绍最基础的一个容器标签

<view></view>

功能：基本视图容器，类似于页面开发时的

<div></div>

标签。

文本标签

<text>

功能：基本文本信息，类似于

<span></span>

标签

WXML属性

属性不一致

数据绑定案例。

home.wxml

home.wxss

home.js

页面渲染结果

WXML属性操作

数据驱动案例

wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定

wxml代码

js代码

控制显示信息

页面效果

将status改为false

控制台效果

area不在控制台内消失

页面效果

添加按钮操作，控制显隐

在原来基础上新增按钮文本切换

WXML属性

数据绑定：

通过Mustache 即双大括号{{}}语法把变量绑定到界面上，称为数据绑定。

属性：

仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXML语法—数据绑定

WXML 中的动态数据均来自对应 Page 的 data

1. 文本绑定

   

   data初始化数据中

   

   渲染结果

   

2. 属性绑定（class、id、style等属性动态绑定）

   

   data初始化数据中

   

   渲染结果

   

3. 算术运算

   WXML的文本插值可以进行算术运算

   

   data初始化数据中

   

   渲染结果

   

4. 三目运算/三元运算

   

   渲染结果

   

5. 字符串运算

   

   data初始化数据

   

   渲染效果

   

WXML语法—列表渲染

指定变量名

wx:for-item 可以指定数组当前元素的变量名

wx:for-index 可以指定数组当前下标的变量名

渲染结果

列表渲染案例

9*9乘法表

data初始化数据

<block>

标签

如果不想要标签多层嵌套，可以在外层使用

<block

>标签进行嵌套，block不会渲染读取出来

wx:key属性

wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符

接下来结合switch开关按钮，体会下wx:key的作用

初始化数据data

此时，每个switch按钮都被view嵌套者，如果不想用嵌套语法，可以在外层用block标签

添加操作按钮

注意：小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

添加操作按钮

点击添加按钮

点击添加按钮后发现，之前给开关1绑定的开属性被新开关取代，没有实时跟踪到自身，所以需要添加key，给每个元素添加身份识别。