专栏首页腾讯NEXT学位小程序Ticker倒计时最佳实践

小程序Ticker倒计时最佳实践

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

点击阅读原文,马上报名

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在ThinkPHP中使用Laravel Mix

    参照Laravel Mix文档,可以用在独立项目中,因此可以在ThinkPHP根目录下,参照Laravel项目,建立如下两个文件:

    TLingC
  • 【火绒安全警报】热门游戏被病毒团伙利用 每天感染数十万台电脑

    近日,火绒安全实验室发出警报,病毒团伙正在利用多款热门游戏疯狂传播后门病毒“Backdoor/Jsctrl”,每天有数十万台电脑受到感染。感染病毒之后,病毒制作...

    用户6477171
  • HTTP cookies

    HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时...

    用户2202688
  • GitHub 标星 2.3k+,比个手势,AI 自动识别 Emoji!

    AI 的爸爸,名字叫 Nick Bourdakos (简称 “尼克”) ,是来自 IBM 的程序猿。

    GitHubDaily
  • vue 构建 todo 项目系列 2

    vue 构建 todo 项目系列 1 只是用模拟的数据,页面一刷新就打回原型,本文将用 json-server 构建一个简易的 api,模拟真实的数据服务器

    章鱼喵
  • 面向前端工程师的 Node.js 入门手册(一)

    本文面向的读者已经是了解JavaScript基本使用的前端程序员,但是缺乏服务端的经验,接下来将带你走进在服务端的世界,看看运行在服务端的JavaScript是...

    五月君
  • 如何通过爬虫自动化获取300+免费网站模版

    想建立一个个人网站,秉承cvbox的思想。ctrl + c , ctrl +v

    快乐咸鱼每一天
  • vue-cli 3 ----- 项目频繁发送‘sockjs-node/info’请求

    在vue-cli3跑项目时发现了这个问题,浏览器一直在频繁发送这个请求,导致联调时很不方便,而且本地开发时项目也不能实时更新。

    小蔚
  • java | 如何让线程按顺序执行?

    本文使用了8种方法实现在多线程中让线程按顺序运行的方法,涉及到多线程中许多常用的方法,不止为了知道如何让线程按顺序运行,更是让读者对多线程的使用有更深刻的了解。...

    一个优秀的废人
  • 2019年度十大Web开发趋势 - 51CTO.COM

    原文标题:Top 10 Web Development Trends to Follow in 2019,作者: Saif Sadiq

    Lemon黄

扫码关注云+社区

领取腾讯云代金券