微信小程序2

WXML 模板语法

数据绑定

①在 data 中定义数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可

②在 WXML 中使用数据

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。

Mustache 语法的应用场景

1. 绑定内容

   // js
   Page({
        
       data: {
        
           msg:'你好啊'
       },
   })
   

   // wxml
   <view><text>{
       {msg}}</text></view>
   

2. 绑定属性

   // js
   Page({
        
       data: {
        
           imgsrc:'./imgs/hello.png'
       },
   })
   

   // wxml
   <image src="{
         {imgsrc}}"></image>
   

3. 运算（三元运算、算术运算等）

   // js
   Page({
        
       data: {
        
           randomNum:Math.random().toFixed(2)
       },
   })
   

   // wxml
   <text>{
       { randomNum * 100 }}</text>
   <text>{
       { randomNum * 100 > 50 ? '大于50' : '小于等于50' }}</text>
   

事件绑定

小程序中常用的事件

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

事件绑定 bindtap触摸事件

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为。

1. 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

   // 注意：btnTapHandler后不加()
   <button type="primary" bindtap="btnTapHandler">按钮</button>
   

2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收

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

事件对象 event

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：

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

event.target 和 event.currentTarget

事件默认以冒泡的方式向外扩散，event.target是触发事件的源组件，event.currentTarget是包裹源组件的外层组件。

// wxml
<view id="view" bindtap="viewTap">
    <button id="btn" type="primary" bindtap="btnTap">按钮</button>
</view>

// js
Page({
   
    viewTap(e) {
   
        console.log('点击了view');
        console.log(e.target.id);
        console.log(e.currentTarget.id);
    }    
    btnTap(e) {
   
        console.log('点击了按钮');
        console.log(e.target.id);
        console.log(e.currentTarget.id);
    },
})

点击按钮后打印：

点击了按钮
btn
btn
点击了view
btn
view

点击view后打印：

点击了view
view
view