微信小程序学习笔记二 数据绑定 + 事件绑定

微信小程序学习笔记二

1. 小程序特点概述

1. 没有DOM
2. 组件化开发: 具备特定功能效果的代码集合
3. 体积小, 单个压缩包体积不能大于2M, 否则无法上线
4. 小程序的四个重要的文件
   
   *js

*.wxml ---> view 结构 ---> html

*wxss ---> view样式 ---> css

*.json --->view 数据 ---> json文件
5. 小程序适配方案: rpx (responsive pixel 响应式像素单位)
   
   小程序适配单位 px
   
   规定任何屏幕下宽度为 750px
   
   小程序会根据屏幕的宽度不同自动计算rpx 值的大小
   
   Iphone6下 : 1rpx = 1物理像素 = 0.5px
   
   

2. wxml语法

---

2.1 数据绑定

2.1.1 初始化数据

1. 页面.js的 data选项中定义初始化数据

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    message:"hello world"
  },
})

在调试器中的 AppData中可以查看当前文件的数据

---

2.1.2 使用数据

1. 模板结构中使用双大括号(插值表达式) {{mssage}}
2. 注意事项: 小程序中为单项数据流 model ---> view
   
   
   
   点开模拟器就可以看到页面解析后的样子了
   
   

---

2.1.3 修改数据

1. this.setData( { DATA_NAME: "NEW_VALUE"}, callback)
2. 特点:
   
   2.1 同步修改: this.data值被同步修改
   
   2.2 异步更新: 异步将setData函数用于将数据从逻辑层发送到视图层(异步)

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    message:"hello world"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('页面加载完成');

    // 修改message的状态,语法: this.setData
    console.log(this); // this 代表当前页面的实例对象
    this.setData({message:'new Hello World'},function () {
      console.log('数据更新完成')
    })
  }
})

• 在上面代码中我们知道了, setData修改数据的操作, 在自身所带的钩子函数中是同步的, 下面我们来测试一下在非自身的钩子函数中修改数据是否同步
• 代码如下:

onLoad: function (options) {
	// 这里我们定义了一个定时器, 延时两秒执行, 运行一下看在模拟器中看效果![请添加图片描述](https://img-blog.csdnimg.cn/28b629180a6c414ab23c802cc5571b9b.gif)

    setTimeout(() => {
      this.setData({ message: 'new Hello World' }, function () {
        console.log('数据更新完成')
      })
    }, 2000);
  },

由此我们可以得出, 小程序的数据修改,在非自身的钩子函数中也是同步的

---

2.2 事件绑定

2.2.1 事件分类

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  • 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

事件列表

类型	触发条件	最低版本
touchstart	手指触摸动作开始	-
touchmove	手指触摸后移动	-
touchcncel	手指触摸动作被打断,如来电提醒,弹窗等	-
touchend	手指触摸动作结束	-
tap	手指触摸后马上离开	-
longpress	手指触摸后,超过350ms再离开, 如果指定了事件回调函数并触发了这个事件, tap事件将不被触发	1.5.0
longtap	手指触摸后, 超过350ms再离开 (推荐使用longpress事件代替)	-
transitionend	会在 WXSS transition或wx.createAnimation动画结束后触发	-
animationstart	会在一个WXSS animation动画开始时触发	-
animationiteration	会在一个WXSS animation一次迭代结束时触发
animationend	会在一个WXSS animation动画完成时触发	-
touchforcechange	在支持 3D Touch的iPhone设备, 重按时会触发	1.9.90

---

2.2.2 绑定事件

• bind绑定: 事件绑定不会阻止冒泡事件向上冒泡
  
  演示: 分别在 index.wxml和index.js定义以下代码

<view class="goStudy" bindtap="clickParent">
    <text catchtap="bindtap">{{message}}</text>
  </view>

  clickParent() {
    console.log('clickParent()');
  },
  clickChild() {
    console.log('clickChild()');
  },

• 点击text标签之后我们查看调试器中信息, 可以看到外层的父元素的tap事件也被触发了
  
  

• catch绑定: 事件绑定可以阻止冒泡事件向上冒泡

• 演示: 我们将index.wxml代码修改如下

<view class="goStudy" bindtap="clickParent">
    <text catchtap="bindtap">{{message}}</text>
  </view>

• 点击text标签之后我们查看调试器中信息
  
  

• 可以看到只打印了一个clickChild(), 说明我们的默认冒泡事件被阻止了

---

2.2.3 向事件对象传参

• 在小程序开发的时候，有时候需要在点击事件触发之后拿到一个参数做为使用，小程序不像 Vue 可以直接点击事件中放参数，而小程序它只能通过自定义属性进行绑定参数使用。

1. 语法: data-KEY=VALUE
   
   1.1 在index.wxml中这样写

 <text catchtap="clickChild" data-msg="传递的hello world">{{message}}</text>

1. 获取: event.target.dataset.key || event.currentTarget.dataset.key

 clickChild(e) {
    console.log('clickChild()');
    console.log(e.currentTarget.dataset.msg);
    let newMsg = e.currentTarget.dataset.msg;
    this.setData({message:newMsg});
  },

1. Event.target 和 event.currenTarget的区别
   
   3.1 Event.target是触发事件的对象, 但不一定是绑定事件的对象, 如: 事件委托, 冒泡
   
   3.2 currentTarget触发事件的对象一定是绑定事件的对象, 没有事件委托