博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
mui开发app之webview
阅读量:5287 次
发布时间:2019-06-14

本文共 3995 字,大约阅读时间需要 13 分钟。

若将app理解为浏览器,那么webview相当于tab标签,app页面间的切换,也就是webview的切换。

在Html5plus的官方文档中关于webview的方法并不多,共有如下几个

  all    获取所有webview窗口

  close    关闭webview窗口

  create  创建新的webview窗口

  currentWebview  获取当前窗口的webviewObject对象(这个对象很重要!!)

  getWebviewById  查找指定表示的webviewObject窗口

  hide    隐藏webview窗口

  open     创建并打开webview窗口

  show      显示webview窗口

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() );

3.获取所有Webview窗口

// Array[WebviewObject]   plus.webview.all();    // 获取所有Webview窗口    var wvs=plus.webview.all();    for(var i=0;i

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

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配置的使用

依照更新说明,在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页面,显示不存在父子窗口 ,父子窗口append 

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

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

mui.fire( target , event , data )

16. 界面重新加载

location.reload();

17.窗口层级关系

append   父子关系  subpages 父子关系  openwindow 平行关系  preloadpages 平行关系  create  平行关系

转载于:https://www.cnblogs.com/lahm8963/p/8124818.html

你可能感兴趣的文章
spring Boot 不认Mapper.xml
查看>>
Python str转化成数字
查看>>
Pascal's Triangle II(帕斯卡三角形)
查看>>
hdu 1026 Ignatius and the Princess I
查看>>
进程间通信之Messager
查看>>
C++基础 const
查看>>
WSS 3.0部署备忘 三
查看>>
JavaScript学习笔记第一天——基本数据类型(值类型)和引用类型
查看>>
linux xargs 命令详解
查看>>
解决调整透明度后文字也透明的问题。
查看>>
SCIP 练习集
查看>>
在.NET Core控制台应用程序中使用强类型配置
查看>>
Matlab JPEG详细介绍
查看>>
NPOI导入excel
查看>>
Yarn资源调度管理
查看>>
JSON数据解析
查看>>
渗透资源大全
查看>>
jQuery简介
查看>>
作业3
查看>>
如鹏网 静态Web开发 第五章:JQuery
查看>>