当前位置:
首页 > MUI踩坑之路 > 【MUI踩坑之路002】窗口预加载

【MUI踩坑之路002】窗口预加载

【MUI踩坑之路002】窗口预加载

MUI的窗口控制有个很实用的功能就是-预加载,官方说明好处是:通过预加载解决切页白屏问题,通过封装原生动画解决SPA模式的动画卡顿。

我的app是从mui的登录模板修改而来,很多都搞不明白,踩到的这个坑也是试了好久才搞明白。

 

首先:

app的启动流程是启动后加载login.html,然后登录成功后跳转main.html页面。

我需要在login登录时从服务器获取token同时得到登录账号的nickname,然后在跳转到main.html后显示到页面上边,例如:“欢迎你,***”。

从服务器取到的token和nickname等信息都是保存在本地state中,main.html启动后从state中读取需要的信息并显示。

结果:

怎么搞都是登录成功后,main.html页面显示是:“欢迎你,undefined”,去查login的代码发现需要的nickname确实是成功获取到并保存在state中了,这是什么情况?一边显示获取成功并存储了,另一边却怎么读取不到......

原因:

查了很久才想起了login.html的代码中有对main.html页面的预加载,猜想既然是预加载会不会是在login.html页面加载成功时main.html也同时加载完毕(里边的js代码这时候也已经运行完毕了),并没有等待login.html页面点击登录按钮。

实验一下,在main.html页面的mui.plusReady()中顶部添加一行代码

plus.nativeUI.toast("loaded")

然后再次调试运行,果然和login.html几乎同时加载,连login.html的页面还没显示,main.html的“loaded”的调试信息已经显示出来了

【MUI踩坑之路002】窗口预加载

既然如此也就明白了为什么main.html中读取不到登录后从服务器获取到的nickname,因为main.html是和login.html页面同时加载(同时读取state,这时候state里当然啥都没有),这个时候还没有发生点击登录按钮的事件,也就是还没有从服务器读数据,等到页面跳转main.html的时候并没有重新读取state,所以此时依旧是undefined。

解决办法:

把main.html页面的state读取的代码放到window的“show”事件中,确保页面显示的时候读取新鲜的state变量内容,代码如下:

window.addEventListener("show",function(){

var state = app.getState();

var account = doc.getElementById("nickname");

account.innerText = state.account;

})

测试运行,显示正常。

承接航母大修、空间站维护、航天飞机打蜡,专业翻新核弹头,潜艇抛光,回收二手航母,大修核反应堆,航天飞机保养换三滤,高空作业擦洗卫星除尘;长期代写小学生寒暑假作业,替小学生打架,欺负同学,打老师(体育老师除外)

【MUI踩坑之路002】窗口预加载:等您坐沙发呢!

发表评论

表情
还能输入210个字