在页面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页面的逻辑分辨率。
请问这个如何解决?
![朝阳](https://img-cdn-tc.dcloud.net.cn/account/identicon/0951f77f12256cc3ff9e277a018ebbc0.png)
- 发布:2017-01-10 11:22
- 更新:2017-01-12 17:48
- 阅读:2733
![朝阳](https://img-cdn-tc.dcloud.net.cn/account/identicon/0951f77f12256cc3ff9e277a018ebbc0.png)
朝阳 (作者)
见附件。
在登录界面稍微等一下,就可以看到另外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;
});
}
-
朝阳 (作者)
两个回答都被我弄混了,反正工程就是这一个,devices/table.html页面获取的逻辑分辨率有问题,maps/main.html页面逻辑分辨率有问题,地图也无法显示。
2017-01-11 16:44
![朝阳](https://img-cdn-tc.dcloud.net.cn/account/identicon/0951f77f12256cc3ff9e277a018ebbc0.png)
朝阳 (作者)
我也是醉了,看题也看不清,回答也捣糨糊。
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。
![Trust](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/08/62/85_avatar_mid.jpg?v=0)
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的版本号。
![朝阳](https://img-cdn-tc.dcloud.net.cn/account/identicon/0951f77f12256cc3ff9e277a018ebbc0.png)
朝阳 (作者)
我的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()函数。”这个写法有问题,是不是你们的文档有误?
![Trust](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/08/62/85_avatar_mid.jpg?v=0)
Trust - 少说废话
跟进
问题一
根据你描述的重现步骤,每次杀掉进程真机运行,未能重现问题。
测试方法是,每个页面单独输出逻辑分辨率以及scale值。均不存在差异,未能重现问题。
问题三
地图不显示,建议进行如下操作。
真机运行Hello H5+的示例工程,测试例子中的地图能否正常加载。
以上测试环境,与你所反馈的一致。
截图不够直接,请下载附件中的工程运行。在原有基础上,在三个不同页面输出了各自的日志。
![Trust](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/08/62/85_avatar_mid.jpg?v=0)
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);
});
});
监听下webview的加载过程中,是否发生了scale值的变化。
![朝阳](https://img-cdn-tc.dcloud.net.cn/account/identicon/0951f77f12256cc3ff9e277a018ebbc0.png)
朝阳 (作者)
我将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);
});
![Trust](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/08/62/85_avatar_mid.jpg?v=0)
Trust - 少说废话
鉴于你所反馈的问题,均未能重现。
建议先尝试其它办法,解决办法:
问题一,如之前所述,在index.html中获取逻辑分辨率等值,create目标webview的时候,通过extras传参。在目标webview读取参数,并进行设置。
问题三,尝试在切换至地图webview的时候,再执行创建map的相关逻辑。或者show地图的webview之前,webviewObject.reload(true),体验可能会差一些。更推荐在show之前再执行创建map控件的相关操作。
Trust
Hello H5+的例子也不显示?手头的手机设备均不显示么?提供一下测试手机的具体型号信息。
2017-01-12 14:25
朝阳 (作者)
回复 Trust:H5的例子是显示的,包括我这个map页面,我试过,单独拿出来也是可以显示的,只有以这种tabview方式无法显示。
2017-01-12 14:34
Trust
回复 朝阳:有尝试使用其它手机设备么?
2017-01-12 14:40
朝阳 (作者)
回复 Trust:另外测试了红米Note4,华为Mate7,华为P9,均是同样的问题:分辨率对不上,和地图无法显示。另外不知你是否有按我下面一层楼的方法,随意在js里加一个回车,保存,看log里输出的分辨率和scale是否和第一次的一致?
2017-01-12 14:44
Trust
回复 朝阳:均是一致的,未能重现问题一和问题三。
2017-01-12 14:51
朝阳 (作者)
回复 Trust:那真是神奇了!我这4部手机均是安卓6.0,不知你的测试机安卓版本是多少,是否有影响?
2017-01-12 14:56