1.WXML模板语法

1.1数据绑定

  • 在data中定义数据
  • 在wxml中使用数据
    1. 在data中定义页面的数据
Page({
  data:{
    info:"Holle world",
    ## 如果是短横线声明数据，需要使用双引号包裹
    "user-name": "xxx",
    imgSrc:"xxxxxx",
    ## 生成10以内的随机数
    randomNum:Math.random()*10
  }
})
2. 在wxml中使用数据

<view>{{ info }}</view>
<image src="{{imgSrc}}"> </image>
<view> {{randomNum >= 5 ? '数字大于或等于5'：'数字小于5'}} </view>

1.2事件绑定

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

![](https://secure2.wostatic.cn/static/6RL8i6BgU9ZcJ5r6bj41Zk/image.png?auth_key=1743064044-i8vLw1aoYBms7HPhwm8zkR-0-0c0261d8e6b0a858a95e33e82a033687)

当事件回调触发的时候，会收到一个事件对象event，

![](https://secure2.wostatic.cn/static/ma75LU4uXaZvkoJDvFnnHv/image.png?auth_key=1743064044-krdLgtueQ5uDs1Mf6Qob7t-0-aa59ec5a3d9d98d8bcd440a9d0bdc469)
  • target属性 ，是触发该事件的源头组件，它经常会和currentTarget容易混淆
  • currentTarget是当前事件所绑定是组件，

1.2.1bindtap

- 通过bindtap，可以为绑定tap触摸事件

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


- 在页面js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e） 来接收，注意，事件函数要和data平级

1.2.4 事件传参

## 事件传参 data-* 自定义属性传参，*代表参数名字
    info 会被解析为参数的数字
    数值2 会被解析为参数的值
    
<button bindtap="onbtn" data-info="2"> </button>

1.2.5bindinput

通过input事件来响应文本框的输入事件

<view>
  <input bindinput="inputValue" focus></input>
</view>

1.2.6双向数据绑定

  • 定义数据
  • 渲染结构，绑定data中的数据
  • 监听input事件

内容

大标题2

内容

中标题2

内容

小标题2

内容

大标题3

内容

中标题3

内容

小标题3

内容

wolai 原创模板