【微信小程序】WXML的模板语法与WXSS模板样式（一）

WXML的模板语法

数据绑定

• 数据绑定的基本原则

• （1）在data中定义数据

• （2）在WXML中使用数据

Page({
  data:{
    //字符串典型的数据
    info:'int data',
    //数据类型的数据
    msgList:[{msg:'hello'},{msg:'world'}]
  }
})

• Mustache语法

• 语法的格式

• 应用场景

<view>{{要绑定的数据名称}}</view>

①绑定内容

②绑定属性

③运算（三元运算、算术运算）

• 动态绑定内容

Page({
  data:{info:'int data'}
})

//页面结构
<view>{{info}}</view>

• 动态绑定属性

Page({
  data:{imgSrc:'https://wx2.sinaimg.cn/mw690/006HhBxply1hjb88sv9dtj31tk10m14k.jpg'}
})

//页面结构
<image src='{{imgSrc}}'></image>

• 三元运算

Page({
  data:{randomNum:Math.random()*10} //生成10以内的随机数
})

//页面结构
<view>{{randomNum >=5 ? '随机数字大于等于5 ':'随机数字小于5'}}</view>

小程序常用事件

事件对象的属性列表

条件渲染

1、wx:if是否需要

在小程序中，使用wx:if="{{conditon}}"来判断是否需要渲染该代码块

<view wx:if="{{condition}}">True</view>

也可用wx:elif 和wx:else来添加else判断

<view wx:if="{{type===1}}">1</view>
<view wx:elif="{{type===2}}">2</view>
<view wx:else>4</view>

2、结合<block> 使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

注意：并不是一个组件，他只是一个包裹性质的容器，不会在页面中做任何渲染

3、hidden

在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

<view hidden="{{condition}}">条件为true隐藏，条件为false显示</view>

4、wx:if 与hidden的对比

①运行方式不同

wx:if以动态创建和移除元素的方式，控制元素的显示与隐藏

hidden以切换样式的方式，控制元素的显示与隐藏

②使用建议

频繁切换时，建议使用hidden

控制条件复杂时，建议使用wx:if搭配wx:elif ,wx:else进行展示与隐藏

5、wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{array}}">
  索引是:{{index}}当前项是：{{item}}
</view>

默认情况下，当前循环项的索引用index表示；当前循环项用item表示

6、wx:key的使用

类似于Vue列表渲染中的:key小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率，示例代码如下：

data:{
  userList:[
    {id:1,name:"2"},
    {id:2,name:"3"},
    {id:3,name:"5"}
  ]
}