[LayaAir 2.0]针对2.0.0 beta5 setLoadingPage 做增强

在2.0 beta5版本增加了 setLoadingPage 功能 beta5更新说明
 
这个功能很大程度上帮开发者减少了制作loading页面的逻辑
但要还是要写很多代码才能实现
例如：
1、开发者需要自己先加载LoadingPage，才能setLoadingPage
2、有时在加载下个场景的同时，需要请求服务器，引擎在场景加载完后会自动隐藏LoadingPage，但服务器却还没返回数据
 
增强类：
loadPage.js

/**

 * 增强 loading page 功能

 * 预加载 loading页面

 * 支持 加载下一个场景的同时执行异步方法

 */

export default class LoadPage {

  constructor(url = null) {

    this._loadScene = null

    if (url) this.preload(url)

  }



  /**

   * 预加载loading页面

   * @param {String} url loading页面url

   */

  async preload(url = 'loadingpage.scene') {

    if (this._loadScene && url === this._loadScene.url) return

    let scene = await this._getLoadingScene(url)

    this._loadScene = scene

    Laya.Scene.setLoadingPage(scene)

  }



  /**

   * 打开场景

   * otherHandler 执行时间小于 loadScene 使用此方法

   * otherHandler 不会阻塞 loadScene

   * @param {String} url 要打开的场景

   * @param {Promise} otherHandler 同时执行的其它事件

   * @param {Boolean} closeOther 关闭其它场景

   * @param {Array} param 打开场景携带参数

   * @param {Laya.Handler} complete 打开场景完成回调

   * @param {Laya.Handler} progress 打开场景进度回调

   */

  openScene(url = null, otherHandler = null, closeOther = true, param = null, complete = null, progress = null) {

    if (!url) return

    if (otherHandler === null) otherHandler = this._promiseHandler

    if (!this._loadScene) {

      Laya.timer.loop(10, this, this.openScene, [url, otherHandler, closeOther, param, complete, progress])

      return

    }

    Laya.timer.clear(this, this.openScene)

    Laya.Scene.showLoadingPage(null, 0)



    // 同步执行

    Promise.all([this._load(url, progress), otherHandler()]).then(res => {

      let nextScene = res[0]

      if (res.length > 1) param = .concat((param || ), [res[1]])

      nextScene.open(closeOther, param)

      if (complete) complete.runWith(nextScene)

      // 重新设置loadingPage 并隐藏

      Laya.Scene.setLoadingPage(this._loadScene)

      Laya.Scene.hideLoadingPage()

    })

  }



  /**

   * 打开场景

   * otherHandler 会阻塞 loadScene

   * ohterHandler 执行成功后执行 loadScene

   * @param {String} url 要打开的场景

   * @param {Promise} otherHandler 同时执行的其它事件

   * @param {Boolean} closeOther 关闭其它场景

   * @param {Array} param 打开场景携带参数

   * @param {Laya.Handler} complete 打开场景完成回调

   * @param {Laya.Handler} progress 打开场景进度回调

   */

  openScene2(url = null, otherHandler = null, closeOther = true, param = null, complete = null, progress = null) {

    if (!url) return

    if (otherHandler === null) otherHandler = this._promiseHandler

    if (!this._loadScene) {

      Laya.timer.loop(10, this, this.openScene, [url, otherHandler, closeOther, param, complete, progress])

      return

    }

    Laya.timer.clear(this, this.openScene)

    Laya.Scene.showLoadingPage(null, 0)



    // 先执行otherHandler

    otherHandler().then(res => {

      // 默认进度加1%

      this._loadScene.event("progress", .01)

      if (res) param = .concat((param || ), [res])

      Laya.Scene.open(url, closeOther, param, complete, progress)

    })

  }



  /**

   * 清除loading page

   */

  clearLoadingPage() {

    this._loadScene = null

    Laya.Scene.setLoadingPage(null)

  }



  _load(url, progress) {

    return new Promise((resolve, reject) => {

      Laya.Scene.load(url, Laya.Handler.create(this, function (scene) {

        // setLoadingPage为null 是为了避免引擎加载完场景自动关闭loadingPage

        Laya.Scene.setLoadingPage(null)

        resolve(scene)

      }), progress)

    })

  }



  _promiseHandler() {

    return new Promise((resolve, reject) => {

      resolve()

    })

  }





  _getLoadingScene(url) {

    return new Promise((resolve, reject) => {

      Laya.Scene.load(url, Laya.Handler.create(this, function (scene) {

        resolve(scene)

      }))

    })

  }



}

 
例子：
完整例子：

• loadingpage.zip

page1
loadingpage
page2
 
page1Runtime.js

import LoadPage from './loadPage'

export default class page1 extends Laya.Scene {

  constructor() {

    super()

  }



  onEnable() {

    // 预加载loadPage

    let loadPage = new LoadPage()

    loadPage.preload()



    this.getChildByName('text').on(Laya.Event.CLICK, this, function () {

      // 切换打开场景方式 查看效果不同

      loadPage.openScene('page2.scene', this.getUserInfo, true, [1, 2, 3])

      // loadPage.openScene2('page2.scene', this.getUserInfo, true, [1, 2, 3])

    })



  }



  /**

   * 获取用户信息需要5s才能执行完

   */

  getUserInfo() {

    return new Promise((resolve, reject) => {

      // get

      Laya.timer.once(5000, null, function () {

        // cache user

        // 把user传个下个场景

        let user = {name: 'ttaccp'}

        resolve(user)

      })

    })

  }





}

loadingpageRuntime.js

export default class loadingpage extends Laya.View {

  constructor() {

    super()

  }



  onEnable() {

    this.text = this.getChildByName('text')

    this.on(Laya.Event.PROGRESS, this, this.onProgress)

  }



  onDestroy() {

    this.off(Laya.Event.PROGRESS, this, this.onProgress)

  }



  onProgress(val) {

    // 渲染界面效果

    this.text.text += `\r\n${(val * 100).toFixed(2)}%`

  }

}

page2Runtime.js

export default class page2 extends Laya.Scene {

  constructor() {

    super()

  }



  onOpened (args) {

    console.log(args)

  }

}