01
什么是ticker?
tick本来的意思是钟表的滴答声。Ticker类为游戏开发提供了一个主要的定时类。它主要的目的就是把stage渲染的工作集中起来,也就是说定时调用stage.update()这个方法。Ticker设置的频率也就是游戏的帧数了。我们把Ticker应用到小程序开发中,频率设置为1s。
Ticker的使用如下,初始化Ticker对象,添加侦听tick事件,启动ticker。
const ticker = new Ticker()// 参数为Object类型,必须有tick方法ticker.addTick({ tick: (delta) => { ... }})ticker.start()
02
小程序倒计时的烦恼
假如我们都在页面onShow设置setTimeout。
1、onHide取消clearTimeout。假如首页有个倒计时在倒数100S,进入二级页面后,触发onHide,取消clearTimeout。
过了10S返回首页,又重新启动setTimeout,那么应该是从100S还是90S开始倒数呢?那肯定是90S开始呀,可是setTimeout都停了,怎么记录到过去了10S呢?
2、onUnload 取消clearTimeout。onHide之后,其实倒计时还在后台执行,setData也在重新渲染。如果有多级页面,无疑是非常浪费性能。
03
Ticker实现countdown解决方案
在Page的生命周期函数中,添加tick处理。
import ticker from './utils/ticker'
Page({ countdown: 100, // 添加当前页面对象到ticker队列 onLoad () { ticker.addTick(this) }, // 恢复当前页面对象tick onShow () { ticker.resume(this) }, // 暂停当前页面对象tick onHide () { ticker.pause(this) }, // 移除当前页面对象tick从ticker队列 onUnload () { ticker.removeTick(this) }, // 需要计时的页面添加tick方法 tick (delta) { countdown -= delta this.setData({ countdown }) }})
统一处理Page的tick
每个需要用ticker的页面,都需要在各自的生命周期函数里面添加对应的操作。重复的工作交给代码,来重写Page构造函数。interceptor.js:
// 生命周期函数集合const Interceptor = { onLoad: [], onShow: [], onHide: [], onUnload: []}
/** * 组合函数,依次执行 * @param {...Function} args 被组合的函数 */function compose(interceptorList, sourceMethod){ return function () { [...interceptorList, sourceMethod].forEach( fn => { typeof fn === 'function' && fn.call(this, arguments) }); }}
/** * 小程序Page方法的替代实现 */const wxPage = Page
/** * 重写Page构造函数 * @param pageObject - 传入的页面对象 */Page = function (pageObject) { Object.keys(Interceptor).forEach((keyName) => { const sourceMethod = pageObject[keyName] pageObject[keyName] = compose(Interceptor[keyName], sourceMethod) }) return wxPage(pageObject)}
/** * 增加对Page生命周期方法的拦截器 * @param methodName * @param handler */export function addInterceptor (methodName, handler) { Interceptor[methodName] && Interceptor[methodName].push(handler)}
小程序入口文件app.js,给页面生命周期函数全局注入ticker对应的方法。
import * as Interceptor from './utils/interceptor'import ticker from './utils/ticker'
Interceptor.addInterceptor('onLoad', function () { ticker.addTick(this)})
Interceptor.addInterceptor('onShow', function () { ticker.resume(this)})
Interceptor.addInterceptor('onHide', function () { ticker.pause(this)})
Interceptor.addInterceptor('onUnload', function () { ticker.removeTick(this)})
App({ onLaunch () { }})
页面只需要添加tick方法,利用delta计算倒数时间,无需操作ticker逻辑。page.js:
import formatTime from '../../utils/formatTime'Page({ countdown: 1000, data: { countdownStr: '' }, tick (delta) { console.log('index tick') let countdownStr = formatTime(this.countdown -= delta) this.setData({ countdownStr }) }});
-好课来袭-
「人人都会微信小程序实战进阶」
腾讯大牛手把手教学,0基础快速上手小程序
更多课程优惠信息请添加助教微信
get11.11最优方案!
(微信:TencentNext)
附赠福利:
0.02元抱走功能强大、
操作简单的前端编程工具!
【NEXT公开课】
前端开发利器VSCode配置与使用
直播时间:11月5日(下周二晚)19:30
点击阅读原文,马上报名