小程序中的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仅支持相对路径
加油 ! ^^