10、WXML

说明文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

数据绑定

将data中的数据渲染到页面中需要使用{{}}包裹

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

动态属性：

<!--wxml-->
<image src="{{ imgSrc }}"></view>

// page.js
Page({
  data: {
    imgSrc: '...png'
  }
})

条件渲染

在小程序中使用wx:if="{{ condition }}"来判断是否需要渲染改代码块，也可以使用wx:elif和wx:else来添加else的判读。

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

Page({
  data: {
    type: 2
  }
})

如果想要一次性控制多个组件的展示和隐藏，需要使用一个<block></block>标签将组件进行包裹，并在block上使用wx:if控制属性。
**block**并不是一个组件，只是一个包裹性质的容器，不会再页面上做任何渲染。

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

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

<view hidden="{{ flag }}">这是一个hiddenview</view>

Page({
  data: {
    flag: true
  }
})

wx:if和hiddent的对比：
1、运行方式不同
wx:if是动态的方式创建和移除元素的方式；hidden是切换样式的方式（display: none）
2、使用场景
当频繁切换的显示隐藏时候使用hidden
控制条件比较复杂的时候使用wx:if、wx:elif和wx:else

列表渲染

使用wx:for可以循环渲染，默认情况下，index表示循环的索引，item表示循环的项
数据循环的时候需要指定一个key值。

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

Page({
  data: {
    list: ["苹果", "香蕉", "葡萄"]
  }
})

使用wx:for-index可以为index进行重命名，使用wx:for-item可以为item进行重命名

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

事件绑定

事件是渲染层到逻辑层的通讯方式。
通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序常用的事件：

事件对象：
当事件触发的时候，会收到一个事件对象evnet

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

target和currentTarnet的区别：
target是触发事件的源头组件，而currentTarget是当前事件所绑定的组件。

bindtap的语法格式：
小程序中不存在click事件，而是通过tap事件来响应用户的触摸行为。
1、通过bindtap为组件绑定触摸事件
2、然后在js文化中定义事件处理函数

<button type="primary" bindtap="handleTapBtn">点击按钮</button>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "Hello World"
  },
  /**
   * 处理点击按钮事件
   *  */
  handleTapBtn(event) {
    console.log(event)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  // ...
})

如何更改页面中data数据：
调用this.setData(dataObject)方法可以更改data里面的数据。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "Hello World",
    count: 0
  },
  /**
   * 处理点击按钮事件
   *  */
  handleTapBtn(event) {
    console.log(event)
    this.setData({
      count: this.data.count + 1
    })
  }
  // ...
})

事件传参：
小程序的事件传参比较特殊，不能在绑定事件的同事为事件处理函数传递参数。
需要通过data-*自定义属性传参，然后通过event.target.datase获取参数

<button type="primary" data-info="this is btn" bindtap="handleTapBtn">点击按钮</button>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "Hello World",
    count: 0
  },
  /**
   * 处理点击按钮事件
   *  */
  handleTapBtn(event) {
    console.log(event.target.dataset); // {info: "this is btn"}
  },
  // ...
})

bindinput的语法格式：
input用来处理文本框输入事件。

<input bindinput="handleInput"></input>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "Hello World",
    count: 0
  },
  handleInput(event) {
    console.log(event.detail.value)
  },
  // ...
})

双向绑定

文档：
简易双向绑定 | 微信开放文档

<input model:value="{{ inputValue }}" ></input>