class03：WXML语法

目录

一、WXML语法1

1.image组件

2.image组件示例

3.WXML的数据绑定

4.图片和随机数的数据绑定以及隐式转换问题

二、WXML语法2

1.事件

2.事件响应和事件对象

3.target和curentTarget的区别

4.点击事件修改数据

5.事件传参

---

一、WXML语法1

• 服务器（一种管理计算资源的计算机）：服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。

• 根据服务器所提供的服务，一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。服务器作为电子设备，其内部的结构十分的复杂，但与普通的计算机内部结构相差不大，如：cpu、硬盘、内存，系统、系统总线等。

• 双大括号{{ }}可以通过属性名直接获取js文件中page里data的数据。

1.image组件

详见网址：image | 微信开放文档 (qq.com)

2.image组件示例

例1：

<image 
src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
style="width:100%; height:300px">
</image>

例2：

<!-- 长边完全显示，短边缩放显示 -->
<image src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
mode="aspectFit">
</image>

<!-- 短边完全显示，长边缩放显示 -->
<image src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
mode="aspectFill">
</image>

 例3：

<!-- 宽度不变，高度自适应，保持原图宽高比 -->
<image src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
mode="widthFix">
</image>

<!-- 高度不变，宽度自适应，保持原图宽高比 -->
<image src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
mode="heightFix">
</image>

 例4：

<!-- 图片的宽高完全拉伸，不保持纵横比 -->
<image src="https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8694a4c27d1ed21b2b88bbdba36eddc451da3f4e.jpg" 
mode="scaleToFill">
</image>

3.WXML的数据绑定

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

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

 

 

4.图片和随机数的数据绑定以及隐式转换问题

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>
<view> {{message}} </view>
<!-- 三目运算 -->
<text>{{randomNum}}</text>
<view>{{randomNum > 5 ? "科比":"詹姆斯"}}</view>

<image src="{{imgSrc}}"></image>

<view>{{a+b}}</view>   // 30
<view>{{false + true}}</view>   //false -> 0,true -> 1;  ==> 1
<view>{{false}} + {{true}}</view>   // false + true  
注：false和true只有在进行比较运算时才会隐式转换为0和1。
<view>{{0.1 + 0.2}}</view>  // 不等于0.3；浮点数精度丢失
<view>{{1 + false}} + {{1 + true}}</view>  // 1 + 2

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!',
    randomNum: Math.random()*10,
    imgSrc:"https://ossweb-img.qq.com/upload/webplat/info/zqnba/20210211/1613043493137072.jpg",
    a:10,
    b:20,
    c:30
  },
  })

二、WXML语法2

1.事件

详见：事件 | 微信开放文档 (qq.com)

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应当事件处理函数，
• 事件对象可以携带额外信息，如id，dataset，touches。 

2.事件响应和事件对象

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>
<button type="primary" bindtap="tabBtn">按钮</button>

// pages/test/test.js
Page({
  // 定义事件处理函数
  tabBtn(e){
    // console.log("勒布朗詹姆斯");
    console.log(e)  //打印输出事件对象
  },
  })

 

3.target和curentTarget的区别

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>
<view bindtap="tapView">
  <button type="primary">按钮</button>
</view>
// target是触发该事件的源头组件，在谁身上点击就指向谁；
// currentTarget是当前正在执行事件函数的组件

// pages/test/test.js
Page({
  tapView(e){
    console.log(e)
  },
})  

/* pages/test/test.wxss */
view{
  font-size: 26px;
  padding: 20px 0;
  background-color: #ff0;
}

 

4.点击事件修改数据

例：将abc分别修改为100、200、300，每点击一次count自增1。

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text> 
<!-- 点击修改数据 -->
<button type="primary" bindtap="changeCount">按钮</button>

// pages/test/test.js
Page({
    data: {
    message: 'Hello MINA!',
    randomNum: Math.random()*10,
    imgSrc:"https://ossweb-img.qq.com/upload/webplat/info/zqnba/20210211/1613043493137072.jpg",
    a:10,
    b:20,
    c:30,
    count:0
  },
  // 修改data里的count数据
  changeCount(){
    // 修改data数据的方式
    this.setData({
      a: 100,
      b: 200,
      c: 300,
      count: this.data.count + 1,
    });
  },
  })

5.事件传参

说明：所传参数存贮在事件对象的target属性中的dataset

<!--pages/test/test.wxml-->
// data-后加参数名即所传参数，事件对象中会将参数名自动转为小写；
// 建议参数名取小写字母，否则将无法获取事件对象中传递的参数，输出undefined
<button type="primary" bindtap="changeCount" data-csname="99">按钮</button>
// 要传数字需将数字用{{}}包裹起来。

// pages/test/test.js
Page({
  changeCount(e){
    console.log(e)
    // 获取参数:console.log(e.target.dataset + 参数名)
    console.log(e.target.dataset.csname)
  },
  })