Trust
Trust
  • 发布:2017-03-03 11:42
  • 更新:2019-01-08 11:11
  • 阅读:11087

【示例】双首页secondwebview配置的使用

分类:HTML5+

概念澄清

HBuilder8.0.1版更新说明App中有一条:
【重要】新增双首页配置(manifest->plus->secondwebview),加速首页为双webview模式时的应用启动速度。

以往流应用或5+App的首页,就是指的入口页面这一个页面,应用启动时native层立即创建这个launchWebview。
双首页配置下,入口页面依旧是launchWebview,但是还有一个secondWebview同时被创建。两个webview的操作由native层完成,大大提高了第二个webview的创建及加载速度。

举例说明

常规方案

以首页父子页面结构为例,子页面的创建在父页面(即首页)中完成。

var launch = plus.webview.getLaunchWebview();  
var home = plus.webview.create('home.html','home', {  
    top: '50px',  
    bottom: 0  
});  
launch.append(home);  

创建子页面这个操作,需要在首页加载完成后才开始。这样就会造成用户先看到首页部分的内容,然后才能看到子页面的内容。

双首页模式

依照更新说明,在manifest.json文件的plus节点下,新增secondwebview节点配置。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home"  
    }  
}  

这里同样支持secondWebview的styles等属性。

"plus": {  
    "secondwebview": {  
        "launch_path": "_www/home.html",  
        "id": "home",  
        "top": "50px",  
        "bottom": "0px"  
    }  
}  

然后,在launchWebview中建立父子关系即可。当然,如果非必要情况下,是不用建立父子关系的。

var _self = plus.webview.getLaunchWebview();  
var _second = plus.webview.getSecondWebview();  
_self.append(_second);  

在双首页模式下,父页面和子页面的内容是同时显示的,不会给用户造成加载延迟的感觉,大大增强了流应用及5+App的体验。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

8 关注 分享
lam 若末lan 好冷 豆 abiu 小贼 阎宸晏 1***@qq.com

要回复文章请先登录注册

移动达人

移动达人

不错,不错!
2017-04-06 23:02
好冷

好冷

这个好啊,原来都是用splash挡住的,等加载完了之后自己关
感觉APP启动的时候好慢,有双首页就不用这么费劲了
2017-03-03 11:50