H5+ Webview窗口对象

一、简介
Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。在MUI中所有的窗口处理过程中都是在借助于H5+中的webview对象来实现的。
对于HTML页面而言,在app中,这个webview是原生APP中浏览网页的组件,即通过这个webview对象来进行页面的控制。
为了控制页面来满足APP中显示的相应特性。
参考网站:https://www.html5plus.org/doc/zh_cn/webview.html

二、创建新的窗口
WebviewObject plus.webview.create(url,id,styles,extras);后面俩参数不是必须的。
【url:新窗口加载的HTML页面地址,可支持本地地址和网络地址】
【id:新窗口的标识,窗口标识可用于在其他界面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口,若传入无效的字符串,则使用url参数作为WebviewObject窗口的id值】
【styles:创建Webview窗口的样式(如窗口宽、高、位置等信息)】
【extras:创建Webview窗口的额外扩展参数,值为JSON类型】
创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。
其实本质就是通过这样一个方法的定义,配置该页面的一些信息参数。最终让页面以特定具备APP特性的形式呈现。

三、获取窗口对象
WebviewObject plus.webview.currentWebview(); 获取当前窗口对象
WebviewObject plus.webview.getWebviewById(); 获取特定窗口对象
在已创建的窗口列表中查找指定标识的Webview窗口并返回。若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。

四、显示窗口
void plus.webview.show(id wvobj,aniShow,duration,showedCB,extras);
显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。

五、隐藏窗口
plus.webview.hide(id wvobj,aniShow,duration,showedCB,extras);
根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。

六、案例演示

<script type="text/javascript" charset="UTF-8">
	// 等待设备就绪plusReady
	mui.plusReady(function () {
		// 案例说明:当前页面为index.html,新建页面为list.html

		// 方法一
	    // 创建List页面的一个Webview对象
		var webviewList = plus.webview.create('list.html');
		console.log(webviewList);
		// 得到当前页面的Webview对象
		var currentWebview = plus.webview.currentWebview();
		// 通过getURL得到当前页面的地址
		console.log(currentWebview.getURL());
		alert(currentWebview.getURL());
		
		// 方法二
		// 创建List页面的一个Webview对象
		var webviewList = plus.webview.create('list.html','list.html');
		var list = plus.webview.getWebviewById("list.html");
		console.log(list.getURL());
		alert(list.getURL());
		// 显示窗口对象
		plus.webview.show('list.html')
	})
</script>

这里,我在HBuilderX中使用了真机测试,
①console.log(list.getURL());的结果如下:file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/list.html
②alert(list.getURL());的结果展示,之后会跳转出list.html的页面(显示窗口对象,这里不再赘述)。
在这里插入图片描述
相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值(打开新的子页面)
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包,一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郁慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值