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 效果