[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)
}))
})
}

}

 
例子:
完整例子:

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)
}
}

 
已邀请:

Aar0n

赞同来自:

感谢分享~!

155*****702

赞同来自:

谢谢分享,学习一下

要回复问题请先

商务合作
商务合作