模板语法

数据绑定

绑定内容

Mustache语法。双大括号将变量包起来。

即插值语法，同vue {{ info }}

绑定属性

和vue不同，不使用 :src=""，而是使用插值语法 src="{{src}}"

事件绑定

事件

事件是渲染层到逻辑层的通讯方式

常用事件

类型	绑定方式	事件描述
tap	`bindtap`或`bind:tap`	手指触摸后马上离开，类似于html中的click
input	`bindinput`或`bind:input`	文本框的输入时事件
change	`bindchange`或`bind:change`	状态改变时触发

事件对象event

event属性中的

target属性

类型：Object

触发事件的组件的一些属性值集合

currentTarget属性

类型：Object

当前组件的一些属性值集合

target与currentTarget的区别

target是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件

bindtap语法格式

在小程序中，通过tap事件来响应用户的触摸行为

<button  type="primary"  bindtap="btnTapHandler">按钮</button>

事件传参与数据同步

数据同步

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值

Page({
  data: {
    n: 1
  },
  btnTapHandler() {
    this.setData({
      n: this.data.n + 1
    })
  }
})

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

因为小程序会将bindtap的属性值整体统一当做事件名称来处理，相当于要调用一个名称为btntapHandler（data）的事件处理函数

解决方法

为组件提供data-*自定义属性传参，其中 * 表示参数的名字。在事件函数的event.target.dataset.参数名可获取到具体参数的值

<!-- data-info="2" 当直接写一个2，不使用大括号时，输出参数为字符串 -->
<button type="primary"  bindtap="btnHandler"  data-info="{{2}}">事件传参</button>

  btnHandler(e) {
    console.log( e.target.dataset.info );
  }

bindinput语法格式

input事件响应文本框的输入事件。 input框样式默认为白色，与背景颜色重合，所以看不出样式

<input bindinput="inputHandler" />

  inputHandler(e) {
    console.log(e.detail.value);
  }

实现文本框和data之间的数据同步

实现步骤

定义数据
渲染结构
美化样式
绑定input事件处理函数

<!--  2 4 绑定数据、绑定事件 -->
<input class="input" type="text" value="{{inputVal}}" bindinput="inputHandler2" />

Page({
  data: {
    inputVal: '你好'   // 1 定义数据
  },
  inputHandler2(e) {
    this.setData({
      inputVal: e.detail.value
    })
  }
})

/**  3 美化样式  **/
.input {
  border: 2px black solid;
  border-radius: 5px;
  width: 200px;
  padding: 3px;
  box-shadow: 1px 1px 10px brown;
}

条件渲染

wx:if

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

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

结合`<block>`使用wx:if

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

注意

<block>并不是一个组件，只是一个包裹性质的容器，不会在页面中做任何渲染

<block wx:if="{{type===1}}">
  <view>A</view>
  <view>B</view>
</block>
<block wx:elif="{{type===2}}">
  <view>CD</view>
  <view>FG</view>
</block>
<block wx:else>
  <view>fdfd</view>
  <view>dfsaf</view>
</block>

hidden

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

<view hidden="{{flag}}">hidden显示或隐藏</view>

wx:if与hidden的对比

1.运行方式不同

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

hidden以切换样式的方式（display：none/block）控制元素显示和隐藏

2.使用建议

频繁切换时，建议使用hidden

控制条件复杂时，建议使用wx:if wx:elif wx:else

列表渲染

wx:for

根据指定数组，循环渲染重复的组件结构

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

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

Page({
  data: {
    array:[1,2,3,4,5]
  })

手动指定索引和当前项的变量名（了解）

使用wx:for-index=""指定当前循环项索引的变量名

使用wx:for-item=""指定当前项的变量名

wx:key

类似于Vue列表渲染中的:key

<!-- id外面不需要包裹大括号 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

Page({
  data: {
    userList: [
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' },
      { id: 3, name: '小白' }
    ]
  }
})

小程序-WXML语法