预加载webview导致获取逻辑分辨率问题

在页面A预加载了页面B。
页面B的plusready里执行了获取设备逻辑分辨率的操作,但据我测试,因为是预加载,在A页面显示未切换到B页面时,B的plusready就已经执行了。
因为A页面的Scale和B的不同,导致B获取的逻辑分辨率有问题。
物理分辨率高度是1920。
A页面scale是0.75,逻辑分辨率应为1920/0.75=2560
B页面scale是3,逻辑分辨率应为1920/3=640
现在B页面得到了A页面的逻辑分辨率。
请问这个如何解决?


2017-01-10 11:22 添加评论 分享
已邀请:
1

朝阳

赞同来自: 1772581000@qq.com

获取的分辨率应该是不对的,地图仍无法显示。


0

DCloud_客服_Trust

赞同来自:

提供一个可重现问题的示例工程。


0

朝阳

赞同来自:

见附件。
在登录界面稍微等一下,就可以看到另外2个还没显示的页面,plusready已经执行了,获取的逻辑分辨率自然也不对。
登录后点击地理信息,页面为views/maps/main.html
另外,我还有个地图的问题,提问地址是http://ask.dcloud.net.cn/question/27569,你回答一半没音了。
逻辑分辨率的问题,暂时都写死为固定值了。

if(mui.os.plus) {
mui.plusReady(function() {
// widthX = plus.screen.resolutionWidth ;
// heightX = plus.screen.resolutionHeight - 15;

widthX = 360;
heightX = 640 - 15;
});
}
\n
0

朝阳

赞同来自:

我也是醉了,看题也看不清,回答也捣糨糊。
1、我从没说devices/table.html与maps/main.html获取的scale不一致;我说的很清楚,demo里也有说明,在login页面预加载的几个页面,逻辑分辨率都不对。据我测试,你们逻辑分辨率的算法是“物理分辨率/scale”,现在login页面的scale是0.75,应算的逻辑分辨率1920/0.75=2560。其它几个页面的scale是3,应算得1920/3=640。现在因为预加载的原因,其它几个页面在还没显示时plusready就已经执行,并以login页面的scale=0.75计算了逻辑分辨率为2560。你说我对高度理解有误,请指出来我哪里理解有误。
2、你说maps/main.html中的DOMContentLoaded触发正常。在事件回调中打印日志即可。我在另一个问题(http://ask.dcloud.net.cn/question/27569)中回复过,据我测试,在事件中打印log确实可以,但用chrome develop tool调试页面,首次断点都不会进,只有点左上角的刷新才会进,你们要觉得无所谓么那就无所谓,反正除了你们,环境都有问题。
3、我特么也是服,我拿红米Note3,Note4,华为Mate7,P9都测过,都显示不出来,要进chrome develop tool调试页面刷新一下才行,就你们能显示出来,我就不信了这个邪。当然,除了你们,环境都有问题;你们的产品没bug,用不好的都是傻逼。
4、你说我maps/main页面plusready调用了2次,我是完全照你们http://www.html5plus.org/doc/zh_cn/maps.html这个原样复制过来的,只是改了plusready里的代码,自己加了2个业务方法add而已。有疑问的话,建议你们梳理自己的文档demo。


0

DCloud_客服_Trust

赞同来自:

抱歉,之前对问题理解有误。下面,依次回复以上问题。
请提供一下调试所用的HBuilder的版本信息,并且通过plus.runtime.innerVersion读取下5+runtime的版本信息。

问题一
根据你的描述,是否可以理解为,在login页面获取的scale值与其它(例如map页)的scale值不一致,导致在login页计算的结果与map页计算结果不一致。

测试结果:我这里测试了几个手机设备,获取的scale值以及逻辑分辨率均不存在差异,未能重现所述问题。

如果你那边依旧会出现login页的scale值与map页的值不同,可以使用以下办法:
在目标webview(例如map页),也就是需要获取逻辑分辨率的页面,读取相关的值进行设置。

问题二
原生层是不会阻塞js的加载的。
测试结果:任意包含debugger页面,直接在浏览器中运行,首次运行debbuger也不会进。

问题三
地图显示的问题,手机上查看是正常的。由于map是原生的控件,不属于html的内容,所以chrome中是不显示map控件的内容的。

问题四
根据提供的示例,map.html中,分别在plusready以及DOMContentLoaded后调用了plusready()函数。
只是一个代码的建议,没有其它意思。

再次提醒
提供以下信息
在HBuilder中查看所用的HBuilder的版本信息,并且通过plus.runtime.innerVersion获取5+runtime的版本号。


0

朝阳

赞同来自:

我的HBuilder版本为7.6.5.201612301621,检测无更新。
plus.runtime.innerVersion得到的值为1.9.9.28326。
1、根源问题是,在login页面预加载了其它页面,比如table和map,导致table和map的plusready里获取的scale是login页的0.75,同时获取的逻辑分辨率也是以1920/0.75算得的2560。如果单独运行table和map页,是没有问题的。这个,麻烦你下载我昨天后来更新过的zip包测试一下,我在table页和map页都加了个alert,应该说明的很清楚。如果你们测试确实没有问题,我只能说奇了怪。
另外注意,每次都需要把测试APP强退(杀掉进程)再开才能重现,如果双击返回关闭再开是无法重现的。
2、pass,我就当它进不进没关系。
3、我测试的4个手机上地图均显示不出来,是手机上,不是chrome里。只有默认的“地图加载中...”几个字。
4、地图的代码,我确实是直接从http://www.html5plus.org/doc/zh_cn/maps.html这个原样复制过来的,只是修改了plusready里的代码,如果你觉得“在plusready以及DOMContentLoaded后调用了plusready()函数。”这个写法有问题,是不是你们的文档有误?


0

DCloud_客服_Trust

赞同来自:

跟进

问题一
根据你描述的重现步骤,每次杀掉进程真机运行,未能重现问题。
测试方法是,每个页面单独输出逻辑分辨率以及scale值。均不存在差异,未能重现问题。

问题三
地图不显示,建议进行如下操作。
真机运行Hello H5+的示例工程,测试例子中的地图能否正常加载。

以上测试环境,与你所反馈的一致。
截图不够直接,请下载附件中的工程运行。在原有基础上,在三个不同页面输出了各自的日志。


0

朝阳

赞同来自:

假如我随意修改table页面的js内容,比如哪里加一个回车,保存,让HBuilder更新代码的话,则可以看到log如下:
明显2次是不同的。


0

朝阳

赞同来自:

手机信息如下


0

朝阳

赞同来自:

这是华为Mate8初次运行,及运行后更改js代码,保存的log


0

DCloud_客服_Trust

赞同来自:

根据上面反馈的信息,预计是部分手机上webview加载过程中的scale值发生了变化。

将navigation.js中的代码调整如下,然后测试下结果。

//创建子页面,首个选项卡页面显示,其它均隐藏;
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for(var i = 0; i < 5; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if(i > 0) {
sub.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(aniShow, temp);
}
self.append(sub);
}

// 新增下面代码
var deviceTable = plus.webview.getWebviewById('views/devices/main.html');
console.log('deviceTable:' + deviceTable.id);
deviceTable.addEventListener('titleUpdate', function() {
console.log('titleUpdate:' + new Date().getTime());
console.log('index.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('index.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('index.html页面的scale值:' + plus.screen.scale);
});
deviceTable.addEventListener('loading', function() {
console.log('loading:' + new Date().getTime());
console.log('index.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('index.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('index.html页面的scale值:' + plus.screen.scale);
});
deviceTable.addEventListener('loaded', function() {
console.log('loaded:' + new Date().getTime());
console.log('index.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('index.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('index.html页面的scale值:' + plus.screen.scale);
});
});
\n

监听下webview的加载过程中,是否发生了scale值的变化。


0

朝阳

赞同来自:

你好,测试结果如下,请参考,谢谢,


0

朝阳

赞同来自:

我将navigation.js中新增的代码删除,将如下代码添加到table页面中,得到的结果如下,你看是否对你确定问题有所帮助,貌似loading和loaded事件并不会触发。

var deviceTable = plus.webview.currentWebview();
console.log('deviceTable:' + deviceTable.id);
deviceTable.addEventListener('titleUpdate', function() {
console.log('titleUpdate:' + new Date().getTime());
console.log('table.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('table.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('table.html页面的scale值:' + plus.screen.scale);
});
deviceTable.addEventListener('loading', function() {
console.log('loading:' + new Date().getTime());
console.log('table.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('table.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('table.html页面的scale值:' + plus.screen.scale);
});
deviceTable.addEventListener('loaded', function() {
console.log('loaded:' + new Date().getTime());
console.log('table.html页面逻辑分辨率的高度值:' + plus.screen.resolutionHeight);
console.log('table.html页面逻辑分辨率的宽度值:' + plus.screen.resolutionWidth);
console.log('table.html页面的scale值:' + plus.screen.scale);
});
\n
0

DCloud_客服_Trust

赞同来自:

鉴于你所反馈的问题,均未能重现。
建议先尝试其它办法,解决办法:
问题一,如之前所述,在index.html中获取逻辑分辨率等值,create目标webview的时候,通过extras传参。在目标webview读取参数,并进行设置。

问题三,尝试在切换至地图webview的时候,再执行创建map的相关逻辑。或者show地图的webview之前,webviewObject.reload(true),体验可能会差一些。更推荐在show之前再执行创建map控件的相关操作。


0

朝阳

赞同来自:

多谢,已照你说的方法解决。
另外,你之前说的map页面plusready调用多次的问题,我确实是照你们的文档原样复制的,截图如下,请确认是不是文档有问题?


要回复问题请先登录注册

退出全屏模式 全屏模式 回复