小程序的事件机制

小程序中的javascript实现方式

小程序的事件机制

参见文档—>框架—>事件

1、实现方法     事件绑定的写法同组件的属性，以 key=“value” 的形式实现     key 以bind或catch开头，然后跟上事件的类型（参考文档）         如bindtap、catchtouchstart。 说明：自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart      value 是一个字符串，需要在对应的 Page 中定义同名的函数。

或者

2、bind绑定的事件和catch绑定的事件的区别：    

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

3、事件捕获：    

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。

实现方法：capture-bind:事件名、capture-catch:事件名

点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1 说明：捕获阶段位于冒泡阶段之前               capture-catch，会中断捕获阶段和取消冒泡阶段。

4、事件对象

（1）基础事件对象的属性    

①type：事件类型    

②timeStamp：页面打开到触发事件所经过的毫秒数。    

③target：触发事件的源组件，该属性值是一个对象包含:

④currentTarget：事件绑定的当前组件，该属性的属性值是一个对象包含内容同target

⑤touches：当前停留在屏幕上的触摸点的一系列信息

⑥changedTouches：changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

js文件结构与Page页面的生命周期

监听页面生命周期的函数

js文件结构与Page页面的生命周期

页面生命周期执行顺序：

setData()函数 作用：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

小程序页面路由

参见文档—>框架—>路由

1、wx.navigateTo()   打开新页面，原来页面被隐藏（父级页面跳转到子级页面）参数接收一个object

注意：小程序最多只能跳5级

2、wx.redirectTo()   关闭当前页面，跳转到应用内的某个页面，原来页面被卸载（两个页面之间平行跳转）       参数接收一个object 说明： wx.navigateTo() 对应页面生命周期的onHide函数 wx.redirectTo()对应页面生命周期的onUnload函数

模块化

1、概念 可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。或者将业务中的数据分离到单独的数据文件中 2、用法： 第一步：抽离完成后采用 module.exports 来暴露模块接口 第二步:在需要用到该模块处利用require(path)引入

注意：path仅支持相对路径

加油 ! ^^