最近总是碰到针对页面的一些操作,以下是针对webview的一些简单方法以及个人理解。
更多详尽的内容请参考标准文档:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getLaunchWebview
Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
方法
all:获取所有webview页面
close:关闭Webview窗口
creat:创建新的Webview窗口
currentWebview: 获取当前窗口的WebviewObject对象
getWebviewById: 查找指定标识的WebviewObject窗口
getLaunchWebview: 获取应用首页WebviewObject窗口对象
getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象
hide: 隐藏Webview窗口
open: 创建并打开Webview窗口
show: 显示Webview窗口
defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速
用法
plus.webview.all()
获取所有webview页面并放到一个数组里面,且数组的第一个元素就是加载应用的入口页。
plus.webview.close(id_wvobj, aniClose, duration, extras)
plus.webview.hide(id_wvobj, aniHide, duration, extras)

id_wvobj: ( String | WebviewObject) 必选 要关闭Webview窗口id或窗口对象

若操作窗口对象已经关闭,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。

aniClose/aniHide: ( AnimationTypeClose ) 可选 关闭/隐藏Webview窗口的动画效果

如果没有指定关闭/隐藏窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭/隐藏动画。

duration: ( Number ) 可选 关闭Webview窗口动画的持续时间

单位为ms,如果没有设置则使用显示窗口动画时间。

extras: ( WebviewExtraOptions) 可选 关闭Webview窗口扩展参数 可用于指定Webview窗口动画是否使用图片加速。

plus.webview.create( url, id, styles, extras )

url: ( String ) 可选 新窗口加载的HTML页面地址,可支持本地地址和网络地址。
    id: ( String ) 可选 新窗口的标识

窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。

styles: ( WebviewStyles) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
    extras: ( JSON ) 可选 创建Webview窗口的额外扩展参数

值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如:
var w=plus.webview.create('url.html','id',{},{preload:"preload webview"});
// 可直接通过以下方法获取preload值
console.log(w.preload); // 输出值为“preload webview”
plus.webview.currentWebview(); --经常用到,很重要!!!
plus.webview.getWebviewById(string); --经常用到,很重要!!!
如果id为空,则返回值为空
plus.webview.getLaunchWebview();
应用首页WebviewObject窗口对象
plus.webview.getTopWebview();
获取应用显示栈顶的WebviewObject窗口对象
plus.webview.open(url, id, styles, aniShow, duration, showedCB )

url: ( String ) 可选 打开窗口加载的HTML页面地址,可支持本地地址和网络地址。
    id: ( String ) 可选 打开窗口的标识

窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。

styles: ( WebviewStyles) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
    aniShow: ( AnimationTypeShow ) 可选 显示Webview窗口的动画效果

如果没有指定窗口动画,则使用默认无动画效果“none”。

duration: ( Number ) 可选 显示Webview窗口动画的持续时间

单位为ms,如果没有设置则使用默认窗口动画时间600ms。

showedCB: ( SuccessCallback ) 可选 Webview窗口显示完成的回调函数

当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。

plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

id_wvobj: ( String | WebviewObject ) 必选 要显示Webview窗口id或窗口对象

若操作Webview窗口对象显示,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先创建的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。

aniShow: ( AnimationTypeShow ) 可选 显示Webview窗口的动画效果

如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。

duration: ( Number ) 可选 显示Webview窗口动画的持续时间

单位为ms,如果没有设置则使用默认窗口动画时间600ms。

showedCB: ( SuccessCallback ) 可选 Webview窗口显示完成的回调函数

当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。

extras: ( WebviewExtraOptions ) 可选 显示Webview窗口扩展参数

可用于指定Webview窗口动画是否使用图片加速。
Boolean plus.webview.defaultHardwareAccelerated();
Webview窗口默认开启硬件加速则返回true,否则返回false。

1.利用create()方法创建需要用show()方法显示出来。
2.open()方法类似于同时执行create()和show()。
3.close、hide、open、show
我每次使用这几类方法是
先获取页面:var detailPage=plus.webview.getWebviewById('main');
然后对页面进行操作:detailPage.close();
如果是隐藏当前页面,直接plus.webview.currentWebview().hide();
4.因为用到了mui,所以结合mui页面操作描述一下
mui里与webview相关的部分,只是对plus.webview的常用操作做了一些封装,让常用的操作调用更简单。更多更全面的api,都在plus.webview里。
mui详细页面操作参考:http://dev.dcloud.net.cn/mui/window/#pageinit
mui.init(); // 页面初始化
mui.init({
preloadPages:[ //在初始化中预加载页面 { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ],
})
mui.preload(); //预加载页面
mui.init({ subpages:[{//创建子页面 url:'list.html', id:'list.html', styles:{ top:'45px',//mui标题栏默认高度为45px; bottom:'0px'//默认为0px,可不定义; } }] });
mui.openWindow();//打开新页面
每次都用mui.openWindow而不close页面会造成内存消耗过大。这是因为使用mui.openWindow跳转页面会用到plus.webview.show方法,如果不close页面会新开很多重复的webview,这样就造成多个页面同时在消耗内存。
另外不close所有不用的webview,webview被close后还会露出其他没有被close的webview。
关闭页面封装到mui.back()方法中,如果需要关闭可以参考close方法
---------------------
作者:育秦
来源:CSDN
原文:https://blog.csdn.net/xuepan1994/article/details/51891923
版权声明:本文为博主原创文章,转载请附上博文链接!

HTML5+和MUI页面操作的更多相关文章

  1. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  2. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  3. 【Egret】实现web页面操作PC端本地文件操作

    Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...

  4. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  5. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  6. 基于html5 plus + Mui 移动App开发(一)

    使用Html5 plus + Mui 进行移动App开发,有一段时间了,这几日得空,做个资讯App分享给大家. 今天主要分享主页实现,首先看下效果: 此界面主要分为:标题.内容分类列表.搜索及设置按钮 ...

  7. mui 页面传值

    点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面 现在提供两种实现方式 注意:需要在手机运行才可以,用电脑浏览器可能不支持. 第一种方式  页面已创建,通过自定义事件传值 fir ...

  8. mui webview操作

    HBuilder的webview操作 webviewAPI文档:http://www.html5plus.org/doc/zh_cn/webview.html 创建新的webview窗口: Webvi ...

  9. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

随机推荐

  1. 视觉AI风口一触即发,虹软AI沙龙点金深圳

    7月26日,虹软AI沙龙在深圳湾科技生态园空间举办.AI沙龙是基于虹软视觉开放平台的开发者交流沙龙,旨在通过分享最新的实战案例,帮助开发者解决技术及落地难题,让技术更贴近实用场景. 本次活动中,深圳市 ...

  2. mysql的左连接问题

    之前写过一个mysql语句,功能是将一个表ds的一个字段值同步更新到另一个表bk的字段,不过不是全部,只更新表bk中有的数据,如果表bk中有而表ds中没有,表B对应的这个字段值就为空 UPDATE b ...

  3. 【mysql】centos7下mysql的安装以及基本操作

    centos7使用的MariaDB,替代了早期版本默认的MySQL.MariaDB是MySQL的一个分支,由开源社区维护,采用GPL授权许可,且MariaDB完全贱人MySQL. 检查centos7下 ...

  4. WinServer-文件共享端口

    When turning on Firewall, please assure that “File and Printer Sharing” on current network profile i ...

  5. (多核DSP快速入门)SYS/BIOS入门

    (多核DSP快速入门)SYS/BIOS入门   原创文章 转载请注册来源http://blog.csdn.net/tostq 系列教程目录:http://blog.csdn.net/tostq/art ...

  6. python的time模块和datetime模块

    1. 将当前时间转成字符串 strftime 方法,并输出 import datetime # 获取当前时间 datetime.datetime.now() print(datetime.dateti ...

  7. 使用Cloudera Manager搭建YARN集群及YARN HA

    使用Cloudera Manager搭建YARN集群及YARN HA 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用Cloudera Manager搭建YARN集群 1& ...

  8. shell脚本——正则表达式

    什么是正则表达式 正则表达式分为基础正则和扩展正则,都是为了匹配符合预期要求的字符串 正则表达式与通配符的区别 只需要记住,对文件内容或是展示文本的操作都是正则,而对目录或文件名的操作则都是通配符(例 ...

  9. php 实现密码错误三次锁定账号10分钟

    /** * 登录 * 1.接收数据 * 2.正则判断接收到的数据是否合理 * 3.根据用户名获取用户数据 * 获取到数据 -> 继续执行 * 没有获取到数据 -> 提示:用户名密码错误 * ...

  10. Dynamics 365 on-premises 安装

    安装Dynamics 365环境配置要求: 系统版本:Windows Server 2016 SQL 版本: Microsoft SQL Server 2016 SP2 Dynamics 365 版本 ...