三枚紫橄榄
三枚紫橄榄
  • 发布:2015-05-04 20:14
  • 更新:2015-05-05 15:25
  • 阅读:2282

webview子页面首次展示的问题

分类:5+ SDK

代码如下所示:

背景:
在plusReady的时候分别创建了webview1和webview2, 其中, webview1是首页的子窗口, webview2是独立窗口. 而在msg.html中, 大概有不到200个li, 每个li包含图文和文字. (跟微信会话列表类似).

设备:
华为荣耀6普通版

步骤:
1, 重启app, 稍等片刻, 等待所有页面的plusReady均执行完成.

  1. 打开webview1, 然后关闭
  2. 打开webview2, 然后关闭
  3. 打开webview1, 然后关闭
  4. 打开webview2, 然后关闭

现象:

  1. 明显看到第一次打开webview1的时候, 有一个从左到右的渲染过程.(可能是子窗口打开动画?)
  2. 第一打开webview2的时候, 几乎没有看到这个渲染过程. 仅仅闪了一下, 很快.
  3. 第二次打开webview1和webview2的时候, 没有看到渲染过程, 直接显示.

疑问:

  1. webview模块的父子窗口的具体有什么逻辑关系.
  2. 在API文档中看, 说子窗口append到父窗口之后, 不能调用child.show(), 而应该调用parent.show(), 但是在hbuilder的基于webview模式的选项卡的例子中, 却又是这样的用法, 这个用法到底对不对? 如果不对, 正确写法应该怎么样的?

这个问题怎么破?? 难道父子页面的鸡肋? 能看不能用?

备注:
如果app启动的时候, 直接显示webview1, 然后在webview1的plusReady回调中执行plus.navigator.closeSplashscreen();关闭splash页面, 也同样看不到从左到右的渲染过程. 但是如果让splash自动关闭的话, 同样能看到该效果?


mui.plusReady(function(){  
            var viewStyle = {  
                background: 'transparent',  
                top: '48px',  
                bottom: '55px',  
                bounce: 'vertical',  
                scrollIndicator : 'vertical',  
            };  

            var self = plus.webview.currentWebview();     

            // 之前担心父窗口show的动画对子窗口有影响, 这里尝试重置一下.  
            //self.hide('none');  
            //self.show('none');  

            var webview1 = plus.webview.create('msg.html','msg1', viewStyle);  
            var webview2 = plus.webview.create('msg.html','msg2', viewStyle);  
            webview2.hide();  
            self.append(webview2);  

            //选项卡点击事件  
            mui('.mui-bar-tab').on('tap', 'a', function(e) {  
                var targetTab = this.getAttribute('href');  
                if (targetTab == '1') {  
                    webview1.show('none');  
                }  

                if (targetTab == '2') {  
                    webview1.hide('none');  
                }  

                if (targetTab == '3') {  
                    webview2.show('none');  
                }  
                if (targetTab == '4') {  
                    webview2.hide('none');  
                }  

                return;  
            }  
}
2015-05-04 20:14 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

若父webview只有一个子webview,则调用parent.show()方法后,会同步将子webview显示;
若父webview有多个子webview,且不同子webview显示位置重叠,则此时就要手动控制待显示的子webview;webview模式的选项卡就属于这种类型。

  • 三枚紫橄榄 (作者)

    十分感谢你的回答.


    但是, 我比较关注的是, 首次打开webview1的时候, 那个明显的从左到右的渲染的过程怎么破. 从webview2的情况来看, 应该不是设备性能的问题.

    2015-05-05 09:45

  • DCloud_UNI_CHB

    5+ runtime团队正在解决;

    2015-05-06 22:07

三枚紫橄榄

三枚紫橄榄 (作者)

经过反复测试, 在andriod上, 子窗口的渲染性能要比独立窗口的渲染性能要低很多. 这在首次打开子窗口的时候特别明显. 如果不是首次打开, 而是通过JS修改里面内容的时候, 也能明显感觉到两种窗口性能上的差别.

该问题目前已经被锁定, 无法添加新回复