小程序事件及API

API

事件监听API

以on开头，用来监听某些事件的触发

wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步API

以Sync结尾的API都是同步API

同步API的执行结果，可以通过函数返回值直接获取，如果执行出错就会抛出异常

wx.setStorageSync('key', 'value') 向本地存储写入内容

异步API

类似于jQuery中的$.ajax(options)函数，通过success、fail、complete 接收调用的结果

wx.request()发起网路数据请求，通过success回调函数接收数据

事件

事件是渲染层到逻辑层的通讯方式。

通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理（通过Native微信客户端）

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

事件绑定

组件绑定tap触摸事件

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

在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event

Page({
	fn1(e){  			// 按钮的 tap 事件处理函数
		console.log(e) 	// 事件参数对象 e
	}
})

事件传参

在小程序中不能绑定事件的同时为事件处理函数传递参数

因为小程序会把bindtap的属性值，统一当作事件名称来处理，()不能传递参数

只能通过自定义属性传参 通过data-* 的方式传递

<button type='primary' bindtap='fn1' data-info="{{ 2 }}">按钮</button>
// info为参数的名字 数值2为参数的值

// 在js中通过event.target.dataset.参数名就可以获取到具体的参数的值
Page({
	fn1(e){  			
		console.log(e.target.dataset) 	// dataset 是一个对象，包含了所有通过data-* 传递过来的参数项
		console.log(e.target.dataset.info) 	// 通过 dataset 可以访问到具体参数的值
	}
})

input的事件绑定

Page({
	fn1(e){  			
		console.log(e.detail.value)  // e.detail.value 是变化过后，文本框最新的值
	}
})

事件对象

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

注：

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件

<view bindtap='fn1'>
	<button>按钮</button> 
</view>

点击button时，点击事件会以冒泡的方式向外扩散，也会触发view的tap事件处理

此时 e.target为点击的按钮 就是button组件

e.currentTarget指向的是当前正在触发事件的组件 就是view组件

页面事件

下拉刷新事件

通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件

当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主动消失，所以需要手动隐藏loading效果

此时调用wx.stopPullDownRefresh()可以停止页面的下拉刷新

// 页面相关事件处理函数 -- 监听用户下拉动作

  onPullDownRefresh: function () {
  
  	// code...
  	// 当数据重置成功之后，调用函数，关闭下拉刷新的效果
  	
    wx.stopPullDownRefresh()
  }

上拉触底事件

通过onReachBottom()函数即可监听当前页面的上拉触底事件

上拉触底距离是指触发上拉触底事件时，滚动条距离页面底部的距离

可以在全局或页面的.json配置文件中 ，通过onReachBottomDistance属性来设置上拉触底的距离

// 页面上拉触底事件的处理函数

  onReachBottom: function () {
  
  	// code...

   	console.log('触发了上拉触底的事件')
  }

loading

添加loading提示效果

wx.showLoading({ title: '数据加载...' }) // 展示 loading 效果
wx.hideLoading() // 隐藏 loading 效果