基础使用

数据绑定

Page({
  // 页面的初始化数据
  data:{
    info:'hello world' ,
    image:'https://url...',
   	randomNum: Math.random()*10,
    randomMin:Math.random().toFixed(2)
  }
})

在 wxml 中可以使用其数据、属性、三元运算、算术运算

<view>{{info}}</view>
<image src="{{image}}"></image>
<view>{{randomNum>=5?'>5':'<5'}}</view>
<view>{{randomMin*100}}</view>

数据改值

Page({
  data:{
    count:0
  },
  changeCount(){
    this.setData({
      count:this.data.count+1
    })
  }
})

<button type='primary' bindtap='changeCount'>按钮</button>

事件绑定

常见事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后离开
input	bindinput 或 bind:input	文本框输入
change	bingdchange 或 bind:change	状态发生改变

bindtap使用

Page({
  btnTapHandler(e){
    console.log(e)
  }
})

<button type='primary' bindtap='btntapHandler'>按钮</button>

bindinput 使用

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

<input bindinput'inputHandler'></input>

事件对象e

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经历的毫秒数
target	Object	触发事件的组件的一些属性集合
currentTarget	Object	当前组件的一些属性集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target和currentTarget区别

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

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数，此时对于外层的 view 来说

e.target 指向的是触发事件的源头组件，因此是内部的按钮组件

e.currentTarget 指向的是当前正在触发事件的那个组件，也就是当前的view 组件本身

​

事件传参

<button type='primary' bindtap="btnTap" data-info="{{2}}" >按钮</button>

语法 ：data-*(参数名)={{}}

取值：e.target.dataset.*(参数名)

Page({
  btnTap(e){
    this.setDate({
      count:this.data.count+e.target.dataset.info
    })
  }
})

条件渲染

if...elif...else

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

block标签

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

可以利用 block 标签对多个组件进行展示和隐藏

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

hidden

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

hidden 和 wx:if 的对比

hidden 是切换样式的方式 ，控制元素的显示与隐藏，实际上还存在改元素

wx:if 是对元素的移除和创建

在频繁切换的应用场景中，推荐使用 hidden

wx:for

<view wx:for = "{{array}}">
	索引固定使用:{{index}} 当前项固定使用:{{item}}
</view>

同时也可以改变默认的索引值和当前项

<view wx:for = "{{array}}" wx:for-index='idx' wx:for-item='itemName'>
	索引使用:{{idx}} 当前项使用:{{itemName}}
</view>

wx:key

指定唯一 key 值，提高渲染效率

<view wx:for = "{{array}}" wx:for-index='idx' wx:for-item='itemName' wx:key='id'>
	索引使用:{{idx}} 当前项使用:{{itemName}}
</view>

key 可以是item 中的某一项 ，直接写属性名