【小程序语法】详解 WXML

🍳作者:

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

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

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

vue element

🙊语录:

多一些不为什么的坚持

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

多一些不为什么的坚持

可用性测试

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

敏捷开发

PS: 💭

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

o

f

f

e

r

,程序员的必备刷题平台

牛客网

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

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

循环神经网络

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

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

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

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

微信支付

子系统

详解 WXML

datagridview

🍤 WXML基本格式

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

🧵 Mustache语法

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

zabbix离线

image-20221007153408854

仿腾讯视频小程序

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

image-20221007153626734

单片机

④ hidden 属性

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

框架

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

image-20221007154129030

Python

⑤ hidden和wx:if的区别

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

💼 列表渲染

① wx:for

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

斗地主

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

面试

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

入门必备

image-20221007154637326

Iceberg

② block 标签

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

p2p

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

职场

③ item/index名称

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

Spring中的xml使用

image-20221007155030979

算法与数据结构

④ key作用

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

涓棿浠?

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

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

image-20221007155238878

在这里插入图片描述

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注