博客

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>
   

事件绑定

小程序中常用的事件

事件绑定 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

，它的详细属性如下表所示：

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