H5+ Webview窗口对象

Posted 2022-04-11 时光-ing

一、简介
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的页面（显示窗口对象，这里不再赘述）。