【小程序语法】详解 WXML-EW帮帮网

🍳作者： $\color{#FF0000}{贤蛋大眼萌，一名很普通但不想普通的程序媛}$ 🤳

🙊语录： $\color{#0000FF}{多一些不为什么的坚持}$

📝本文章收录于专栏：小程序从0到放飞自我

详解 WXML

🍤 WXML基本格式

类似于HTML代码：比如可以写成单标签，也可以写成双标签；
必须有严格的闭合：没有闭合会导致编译错误
大小写敏感：class和Class是不同的属性

🧵 Mustache语法

在开发中，我们的页面数据往往不是写死的，都是根据服务器返回的数据进行展示的，或者由用户操作之后发生改变，学过Vue的朋友都知道，有双大括号语法，我们小程序也有一样的插值语法–Mustache语法

补充js页面数据代码：

Page({
  data: {
    message: "Hello World",
    firstname: "elva",
    lastname: "bryant",
    date: new Date().toLocaleDateString(),
    score: 10,
    isHidden: false,

    books: [
      { id: 111, name: "代码大全", price: 98 },
      { id: 112, name: "你不知道JS", price: 87 },
      { id: 113, name: "JS高级设计", price: 76 }
    ]
  },

  onChangeTap() {
    this.setData({
      isHidden: !this.data.isHidden
    })
  }
})

💍 逻辑判断语法

① wx:if

在特定的时候根据条件来决定一些内容是否被渲染，这时候就需要用到逻辑判断语句。

当条件为true时, view组件会渲染出来
当条件为false时, view组件不会渲染出来

② wx:elif

通常是多个一起出现，进行多次逻辑判断

③ wx:else

与 if 搭配出现，一般是最后一个的逻辑判断条件

④ hidden 属性

hidden是所有的组件都默认拥有的属性；

当hidden属性为true时, 组件会被隐藏；
当hidden属性为false时, 组件会显示出来；

⑤ hidden和wx:if的区别

hidden控制隐藏和显示是控制是否添加hidden属性
wx:if是控制组件是否渲染的

💼 列表渲染

① wx:for

在实际开发中，服务器经常返回各种列表数据，需要渲染到页面展示处理，我们不可能一一从列表中获取数据进行展示，这个时候就需要用到for循环的方式，遍历所有的数据，一次性进行展示。

默认情况下，遍历后在wxml 中可以使用一个变量index，保存当前遍历数据的下标，是唯一的。数组中对应的数据，可以使用变量名item进行获取。

wx:for 不仅可以遍历数组，还能遍历数字，遍历字符串，遍历对象等等。

② block 标签

某些情况下，我们需要使用 wx:if 或 wx:for时，可能需要包裹一组组件标签。可以使用<block/>标签包裹。有利于提高代码的可读性

注意： <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

③ item/index名称

默认情况下，item – index的名字是固定的，当出现多层遍历时候，item和index会重复，这个时候我们就可指定item – index的名字。

④ key作用

如果我们在进行wx:for 遍历时候，会报一个警告，提示我们添加一个key。这个key就是为我们更好的复用节点。

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

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

在这里插入图片描述

【小程序语法】详解 WXML