微信小程序模板语法

2022-10-08 08:19:56

模板语法

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

WXML和HTML的不同：

WXML中的text相当于HTML中的span
WXML中的view相当于HTML中的div
WXML中的checkbox相当于HTML中的复选框

数据绑定

Page({
    data:{
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            name:"王",
            age:50
        },
        isChecked:false
    }
})

<!--字符串-->
<view>{{msg}}</view>
<!--数字-->
<view>{{num}}</view>
<!--bool类型-->
<view>是否是伪娘{{isGirl}}</view>
<!--object-->
<view>{{person.age}}</view>
<!--在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--使用boll类型当属性 checked
 字符串和花括号之间不要存在空格，否则会导致识别失败
-->
<checkbox checked="{{isChecked}}"></checkbox>

运算

<!--加减-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<!-- 三元表达式-->
<view>{{10%2===0?"偶数":"奇数"}}</view>

列表渲染

wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
wx:key=“唯一的值” 用来提高列表渲染的性能
1. wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
2. wx:key="*this" 就表示你的数组是一个普通的数组，" *this"表示是循环项
当出现数组的嵌套循环的时候，尤其要注意，不要重名
默认情况下，我们不写wx:for-item="item" wx:for-index="index"，小程序也会把循环项的名称和索引的名称 item和index

只有一层循环的话wx:for-item="item" wx:for-index="index"才可以省略‘
对象的循环，wx:for-item指向的是对象的值，wx:for-index指向的是对象的属性

项的变量名默认为item， wx:for-item可以指定数组当前元素的变量名

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

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
    索引：{{index}}
        --
    值：{{item.name}}
    </view>
</view>

wx:key用来提高数据渲染的性能

wx:key绑定的值，有如下的选择

string类型，表示循环项的唯一属性

list:[{id: 0, name: "炒饭"}, {id: 1, name: "炒面"}]
wx.key="id";

<view>
  <view wx:for="{{list}}" wx:key="index" wx:for-item="item" >
    {{index}}---{{item.name}}
  </view>
</view>

保留字*this，它的意思是item本身，*this代表的必须是唯一的字符串和数组
```
list:[1, 2, 3, 4, 5]
wx:key="*this"
```

block标签

block在写代码的时候可以看见，但是运行代码的时候不会变成一个真正的dom元素——运行时，block标签消失，但是其他标签不受任何影响

用处：用来绑定循环

<block wx:for="{{list}}">
    <view>
        {{index}}---{{item.name}}
    </view>
</block>

条件渲染

wx:if

在框架中，使用wx:if"{{condition}}"来判断是否需要渲染该代码块

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

if成立执行，elif和else都不执行
if不成立，elif成立执行，else不执行
zhijieif和elif不成立，else执行

hidden

在标签上直接加入属性 hidden——标签直接隐藏
hidden="{{条件表达式}}"

<view hidden>11111</view>
<view hidden="{{true}}">22222</view>

区别及使用场合

当标签不是频繁地切换显示，优先使用wx-if

直接把标签从页面结构给移除掉
当标签频繁地切换显示的时候，优先使用hidden

通过添加样式的方式切换显示

码农公寓