当前位置：模板网首页 > 建站教程 > DCloud,APICloud > mui webview 界面操作、正文

mui webview 界面操作、窗口层关系

作者：网页模板

类型：文章教程

点击次数：

发布时间：2018-08-06 14:23

分享到：

1、获取当前窗口id：

//WebviewObject plus.webview.currentWebview();
var ws=plus.webview.currentWebview();//获取当前页面所属的Webview窗口对象
console.log( "窗口标识: "+ws.id );
console.log( "当前Webview窗口："+ws.getURL() );

2、通过id获取对象关闭窗口（查找指定标识的WebviewObject窗口）

var ws = plus.webview.getWebviewById(id);
plus.webview.close(ws);
//等效于：plus.webview.getWebviewById(id).close();
var h=plus.webview.getWebviewById( plus.runtime.appid );
console.log( "应用首页Webview窗口："+h.getURL() );

更多方法可参考H5 Api： http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview

3、获取所有Webview窗口

// Array[WebviewObject]   plus.webview.all();
// 获取所有Webview窗口
var wvs=plus.webview.all();
for(var i=0;i<wvs.length;i++){
        console.log('webview'+i+': '+wvs[i].getURL());
}

4、关闭Webview窗口

//void  plus.webview.close( id_wvobj, aniClose, duration, extras );
var ws=plus.webview.currentWebview();
plus.webview.close(ws);

5、创建新的Webview窗口

//WebviewObject   plus.webview.create( url, id, styles, extras );
var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
w.show(); // 显示窗口

参数extras: ( JSON ) 可选创建Webview窗口的额外扩展参数
值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，如： var w=plus.webview.create(‘url.html’,’id’,{},{preload:’preload webview’}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”

6、获取屏幕所有可视的Webview窗口

说明：仅在屏幕区域显示的Webview窗口，如果Webview窗口显示了但被其它Webview窗口盖住则认为不可视。

// Array[WebviewObject] plus.webview.getDisplayWebview();
// 获取所有可视的Webview窗口
var wvs=plus.webview.getDisplayWebview();
for(var i=0;i<wvs.length;i++){
    console.log('Display webview '+i+': '+wvs[i].getURL());
}

7、获取应用首页WebviewObject窗口对象

//WebviewObject  plus.webview.getLaunchWebview();
// 获取应用首页窗口对象
var h=plus.webview.getLaunchWebview();
console.log('应用首页Webview窗口：'+h.getURL());

8、获取应用第二个首页WebviewObject窗口对象

//WebviewObject plus.webview.getSecondWebview();
var h=plus.webview.getSecondWebview();
if(h){
        console.log('应用第二个首页Webview窗口：'+h.getURL());
}else{
        console.log('应用不存在第二个首页Webview窗口');
}

9、mui 双首页secondwebview配置的使用
    以往流应用或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的体验。

10、获取应用显示栈顶的WebviewObject窗口对象

//WebviewObject plus.webview.getTopWebview();
// 获取应用首页窗口对象
var h=plus.webview.getTopWebview();
console.log('应用显示栈顶的Webview窗口：'+h.getURL());

11、隐藏Webview窗口

//void plus.webview.hide( id_wvobj, aniHide, duration, extras );
plus.webview.hide(plus.webview.currentWebview());

12、创建并打开Webview窗口

//WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
var w = plus.webview.open('http://m.weibo.cn/u/3196963860');

13、显示Webview窗口

//void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
plus.webview.show(w); // 显示窗口

14、create页面，显示不存在父子窗口

15、父子窗口append

    Webview窗口作为子窗口添加（Webview.append）到其它Webview窗口中时有效，这时其它Webview窗口为父窗口。
    将另一个Webview窗口作为子窗口添加到当前Webview窗口中，添加后其所有权归父Webview窗口，父窗口显示时子窗口会自动显示，父窗口隐藏时子窗口自动隐藏，当父窗口关闭时子窗口也自动关闭。
    我们不妨在子webview关闭父webview试试，结果发现子webview也被关闭了，如果不对子webview进行close()方法操作，可知子webview的生命周期是由父webview决定的。我们可以通过对子webview进行show()、hide()操作，甚至可以使用remove移除子Webview窗口，从而实现动态子webview。这种场景最常用的是webview选项卡。

16、mui.fire()触发自定义事件

mui.fire( target , event , data )

17、界面重新加载

location.reload();

18、窗口层级关系

append 父子关系
subpages 父子关系
openwindow 平行关系
preloadpages 平行关系
create 平行关系
(责任编辑：网页模板)

本文标签：
mui webview

mui webview 界面操作、窗口层关系

热门建站教程

热门PSD模板

热门CSS模板

热门网页特效

热门网站源码

热门酷站欣赏

热门建站资源

热门文章