【小程序语法】详解 WXML

🍳作者：

贤蛋大眼萌，一名很普通但不想普通的程序媛

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

贤蛋大眼萌，一名很普通但不想普通的程序媛🤳

vue element

🙊语录：

多一些不为什么的坚持

\color{#0000FF}{多一些不为什么的坚持}

多一些不为什么的坚持

可用性测试

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

敏捷开发

PS: 💭

眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂

o

f

f

e

r

，程序员的必备刷题平台

−

−

牛客网

\color{#ff7f50}{眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台–牛客网}

眼过千遍不如手锤一遍：推荐一款模拟面试，斩获大厂offer，程序员的必备刷题平台−−牛客网

循环神经网络

求知无坦途，学问无捷径。👣

一步一个脚印，你走过的路，每一步都算数。

\color{#ff7f50}{一步一个脚印，你走过的路，每一步都算数。}

一步一个脚印，你走过的路，每一步都算数。 每一次进步都是对自己努力的肯定。如果读了文章有收获，不如一起来学习，一起进步吧。传送门🚪刷题神器

微信支付

子系统

详解 WXML

• • 🍤 WXML基本格式
  • 🧵 Mustache语法
  • 💍 逻辑判断语法
  • • ① wx:if
    • ② wx:elif
    • ③ wx:else
    • ④ hidden 属性
    • ⑤ hidden和wx:if的区别
  • 💼 列表渲染
  • • ① wx:for
    • ② block 标签
    • ③ item/index名称
    • ④ key作用

datagridview

🍤 WXML基本格式

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

🧵 Mustache语法

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

zabbix离线

仿腾讯视频小程序

补充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

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

SpringBoot单体项目

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

② wx:elif

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

二叉树

③ wx:else

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

CubeMX

单片机

④ hidden 属性

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

框架

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

Python

⑤ hidden和wx:if的区别

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

💼 列表渲染

① wx:for

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

斗地主

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

面试

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

入门必备

Iceberg

② block 标签

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

p2p

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

职场

③ item/index名称

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

Spring中的xml使用

算法与数据结构

④ key作用

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

涓棿浠?

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

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

普通

收藏 链接