H5+ Webview窗口对象

article/2025/11/4 16:07:24

一、简介
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">// 等待设备就绪plusReadymui.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-购物车