前端UNIAPP端webview嵌入H5使用阐明文档

tsx81428  金牌会员 | 2024-10-21 14:02:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 846|帖子 846|积分 2540

一、关闭webView窗口

  1. plus.webview.close( id_wvobj, aniClose, duration, extras );
复制代码


  • 功能阐明
关闭已经打开的Webview窗口，需先获取窗口对象或窗口id，并可指定关闭窗口的动画及动画持续时间。


  • 参数阐明
参数是否必须参数范例/固定值阐明id_wvobj是String 要关闭Webview窗口id或窗口对象，若操作窗口对象已经关闭，则无任何效果。 使用窗口id时，则查找对应id的窗口，假如有多个相同id的窗口则操作最先打开的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。aniClose否     

  • auto （默认值）：自动选择关闭动画效果。
  • none：无动画效果，直接关闭。
  • slide-out-right：从右向左滑出关闭动画。
  • slide-out-left：从左向右滑出关闭动画。
关闭Webview窗口的动画效果，假如没有指定关闭窗口动画，则使用默认值“auto”，纵然用显示时设置的窗口动画相对应的关闭动画。duration否Number 关闭Webview窗口动画的持续时间，单元为ms，假如没有设置则使用显示窗口动画时间。extras否任意范例关闭Webview窗口扩展参数，可用于指定Webview窗口动画是否使用图片加快。

  • 使用示例
  1. function closeWebview(){
  2.         var ws=plus.webview.currentWebview();
  3.         plus.webview.close(ws);
  4. }
复制代码
二、创建新的webView窗口

  1. plus.webview.create( url, id, styles, extras );
复制代码


  • 功能阐明
创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。


  • 参数阐明
参数是否必须参数范例/示例阐明url否String 新窗口加载的HTML页面地址，新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。id否String 新窗口的标识，窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该制止使用相同的标识来创建多个Webview窗口。 假如传入无效的字符串则使用url参数作为WebviewObject窗口的id值。styles否 JSON 
创建Webview窗口的样式（如窗口宽、高、位置等信息）WebviewStylesextras否Object 创建Webview窗口的额外扩展参数，值为JSON范例，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，
如： var w=plus.webview.create('url.html','id',{},{preload:'preload webview'});
// 可直接通过以下方法获取preload值 console.log(w.preload);
// 输出值为“preload webview”

  • 使用示例
  1. function create(){
  2.         var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
  3.         w.show(); // 显示窗口
  4. }
复制代码
三、获取当前窗口的WebviewObject对象

  1. plus.webview.currentWebview();
复制代码


  • 功能阐明
获取当前页面所属的Webview窗口对象。


  • 使用示例
  1. var ws=plus.webview.currentWebview();
  2. console.log( "当前Webview窗口："+ws.getURL() );
复制代码
四、隐藏Webview窗口

  1. plus.webview.hide( id_wvobj, aniHide, duration, extras );
复制代码


  • 功能阐明
根据指定的WebviewObject对象或id隐藏Webview窗口，使得窗口不可见。


  • 参数阐明
参数是否必须参数范例/固定值阐明id_wvobj是String 要隐藏的Webview窗口id或窗口对象，使用窗口对象时，若窗口对象已经隐藏，则无任何效果。 使用窗口id时，则查找对应id的窗口，假如有多个相同id的窗口则操作最先打开的，若没有查找到对应id的WebviewObject对象，则无任何效果。aniHide否     

  • auto （默认值）：自动选择关闭动画效果。
  • none：无动画效果，直接关闭。
  • slide-out-right：从右向左滑出关闭动画。
  • slide-out-left：从左向右滑出关闭动画。
···
隐藏Webview窗口的动画效果，假如没有指定窗口动画，则使用默认动画效果“none”。duration否Number 隐藏Webview窗口动画的持续时间，单元为ms，假如没有设置则使用默认窗口动画时间。extras否JSON对象隐藏Webview窗口扩展参数，可用于指定Webview窗口动画是否使用图片加快。

  • 使用示例
  1. function hideWebview(){
  2.         plus.webview.hide(plus.webview.currentWebview());
  3. }
复制代码
五、显示Webview窗口

  1. plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
复制代码


  • 功能阐明
显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。


  • 参数阐明
参数是否必须参数范例/固定值阐明id_wvobj是 String
要显示Webview窗口id或窗口对象，若操作Webview窗口对象显示，则无任何效果。 使用窗口id时，则查找对应id的窗口，假如有多个相同id的窗口则操作最先创建的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。aniShow否      

  • auto （默认值）：自动选择显示动画效果。
  • none：无动画效果，直接显示。
  • slide-in-right：从右向左滑出显示动画。
  • slide-in-left：从左向右滑出显示动画。
···
显示Webview窗口的动画效果，假如没有指定窗口动画范例，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，假如之前没有显示过，则使用“none”动画效果。AnimationTypeShowduration否Number 显示Webview窗口动画的持续时间,单元为ms，单元为ms，假如没有设置则使用默认窗口动画时间600ms。showedCB否
onSuccess(){ // Success code. }

onError(error){
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
Webview窗口显示完成的回调函数,当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。

  • 使用示例
  1. function create(){
  2.         var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
  3.         plus.webview.show(w); // 显示窗口
  4. }
复制代码
六、创建并打开Webview窗口

  1. plus.webview.open( url, id, styles, aniShow, duration, showedCB );
复制代码


  • 功能阐明
创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。


  • 参数阐明
参数是否必须参数范例/固定值阐明url否String 打开窗口加载的HTML页面地址，新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。id否 String
打开窗口的标识，窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该制止使用相同的标识来创建多个Webview窗口。 假如传入无效的字符串则使用url参数作为WebviewObject窗口的id值。styles否 JSON 
创建Webview窗口的样式（如窗口宽、高、位置等信息）WebviewStylesaniShow否      

  • auto （默认值）：自动选择关闭动画效果。
  • none：无动画效果，直接关闭。
  • slide-in-right：从右向左滑出关闭动画。
  • slide-in-left：从左向右滑出关闭动画。
···
显示Webview窗口的动画效果，假如没有指定窗口动画，则使用默认无动画效果“none”。AnimationTypeShowduration否Number 显示Webview窗口动画的持续时间,单元为ms，默认值为200ms（毫秒）。showedCB否 onSuccess(){ // Success code. }
onError(error){
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
Webview窗口显示完成的回调函数,当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。

  • 使用示例
  1. function openWebview(){
  2.         var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
  3. }
复制代码
七、预载网络页面

  1. plus.webview.prefetchURL(url);
复制代码


  • 功能阐明
预载网络页面会向服务器发起http/https请求获取html页面内容， 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速率)。 注意：预载网络页面仅在运行期生效，为了节流内存仅保留最后5个预载页面数据。


  • 参数阐明
参数是否必须参数范例/固定值阐明url是String 需要预载的页面地址，必须是网络地址（http/https）,本地页面地址无需预载。

  • 使用示例
  1. var url = 'http://m.weibo.cn/u/3196963860';
  3. // 预载网络页面
  4. function prefetchWebview(){
  5.         plus.webview.prefetchURL(url);
  6. }
  8. // 显示预载页面
  9. function showWebview(){
  10.         // 预创建新窗口（显示在可视区域外）
  11.         wn=plus.webview.create(url, 'test',{render:'always'});
  12.         wn.show('none');
  13. }
复制代码
八、Webview的一些常用方法

1. addEventListener: 添加事件监听器


  • 参数阐明

    •      参数是否必须可选参数阐明event是 "close": (String 范例 )Webview窗口关闭事件
      "error": (String 范例 )Webview窗口加载错误事件
      "hide": (String 范例 )Webview窗口隐藏事件
      "loading": (String 范例 )Webview窗口页面开始加载事件
      "loaded": (String 范例 )Webview窗口页面加载完成事件
      "maskClick": (String 范例 )Webview窗口显示遮罩层时点击事件
      "touchstart": (String 范例 )Webview窗口接收到触屏事件
      "popGesture": (String 范例 )Webview窗口侧滑返回事件
      更多事件
      Webview窗口事件范例listener是 void onEvent(Event event){ // Event handled code. }
      监听事件发生时执行的回调函数capture否 Boolean捕获事件流顺序，暂无效果
    • 示例代码

  1. plus.nativeUI.showWaiting()
  2. var ws = null,
  3.         embed = null;
  4. ws = this.$scope.$getAppWebview(); //plus.webview.currentWebview();在uni-app里vue页面直接使用无效，非v3编译模式使用this.$mp.page.$getAppWebview()
  5. embed = plus.webview.create(this.url, '', {
  6.         top: getApp().globalData.bh + 35 + "px",
  7.         bottom: '0px'
  8. });
  9. ws.append(embed);
  11. //监听webview窗口事件
  12. embed.addEventListener('loaded', function() {
  13.         if (embed.isVisible()) {
  14.                 plus.nativeUI.closeWaiting()
  15.                 // 页面加载完成且可见时的操作
  16.         }
  17. });
复制代码
2. append: 在Webview窗口中添加子窗口


  • 阐明
将另一个Webview窗口作为子窗口添加到当前Webview窗口中，添加后其所有权归父Webview窗口，当父窗口关闭时子窗口自动关闭。
被添加的Webview窗口需通过plus.webview.create方法创建，并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示，父窗口隐藏时子窗口也会自动隐藏。 被添加的View控件需通过new plus.nativeObj.View()创建，添加到Webview窗口后所有权一起转移（即Webview关闭后View控件也自动关闭）。


  • 示例代码

  1. var ws = null,
  2.         embed = null;
  3. ws = this.$scope.$getAppWebview(); //plus.webview.currentWebview();在uni-app里vue页面直接使用无效，非v3编译模式使用this.$mp.page.$getAppWebview()
  4. embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});
  5. ws.append(embed);
复制代码
3. appendJsFile: 添加Webview窗口预加载js文件


  • 阐明
对于一些网络HTML页面，在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行，添加多个js文件将按照添加的先后顺序执行。


  • 示例代码
  1. // 添加Webview窗口预加载js文件
  2. function appendJs2Webviewe(){
  3.         var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
  4.         nw.appendJsFile('_www/preload.js');
  5.         nw.show();
  6. }
复制代码
4. checkRenderedContent: 检测Webview窗口是否渲染完成


  • 阐明
检测方式为判断的Webview窗口内容是否为白屏，假如非白屏则以为渲染完成，否则以为渲染未完成。 通过successCallback回调函数返回结果，假如检测过程中发生错误则触发errorCallback回调函数。
successCallback: ( Function ) 必选 检测Webview窗口渲染结果回调函数
获取渲染检测结果后触发，函数原型为void function(e){}； e.rendered：表示检测渲染完成结果，Boolean范例，true表示渲染完成，false表示渲染未完成。
errorCallback: ( ErrorCallback ) 可选 检测Webview窗口渲染结果失败回调函数
检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数
此方法不支持iOS


  • 示例代码
  1. // 创建Webview窗口
  2. function createWebview(){
  3.         // 打开新窗口
  4.         nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
  5.         nw.show();
  6. }
  7. function checkWebview(){
  8.         nw.checkRenderedContent({}, function(e){
  9.                 console.log('checkRenderedContent success: '+JSON.stringify(e));
  10.         }, function(e){
  11.                 console.log('checkRenderedContent error: '+JSON.stringify(e));
  12.         });
  13. }
复制代码
5. interceptTouchEvent: 是否拦截Webview窗口的触屏事件


  • 阐明
拦截后触屏事件不再传递，否则传递给View控件下的其它窗口处理。 Webview窗口默认拦截所有触屏事件。
intercept: ( Boolean ) 可选 是否拦截触屏事件
true表示拦截触屏事件，false表示不拦截触屏事件（透传事件给其它窗口处理）。 默认值为true。
Android - 3.0+ (支持)
iOS - ALL (不支持)


  • 示例代码
  1. var wv=null;
  2. wv = plus.webview.currentWebview();
  3. // 拦截触屏事件
  4. function interceptEvent(){
  5.         wv.interceptTouchEvent(true);
  6. }
  7. // 不拦截触屏事件
  8. function uninterceptEvent(){
  9.         wv.interceptTouchEvent(false);
  10. }
复制代码
6. isVisible: 查询Webview窗口是否可见


  • 阐明
若Webview窗口已经显示（调用过show方法，纵然被其它窗口挡住了也以为已显示）则返回true，若Webview窗口被隐藏则返回false。


  • 示例代码
  1. ws=plus.webview.currentWebview();
  2. embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
  3. embed.show();
  5. // 查询Webview窗口是否可见
  6. function visibleWebview() {
  7.         alert('是否可见：'+embed.isVisible());
  8. }
  9. // 隐藏Webview窗口
  10. function hideWebview() {
  11.         embed.hide();
  12. }
复制代码
7. overrideResourceRequest: 拦截Webview窗口的资源加载


  • 阐明
根据区配规则拦截Webview窗口加载资源的URL地址，重定向到其它资源地址（暂仅支持本地地址）。 注意：多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。


  • 示例代码
  1. var ws=null,nw=null;
  2. ws=plus.webview.currentWebview();
  3. // 拦截Webview窗口的资源请求
  4. nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
  6. nw.overrideResourceRequest([{match:'http://tva3.sinaimg.cn/crop.121.80.980.980.180/be8dcc14gw1e7lz65y6g3j20uo0uoq4r.jpg',redirect:'_www/logo.png'}]);
  8. nw.show();
复制代码
8. overrideUrlLoading: 拦截Webview窗口的URL请求


  • 阐明
拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。 此方法只能拦截窗口的网络超链接跳转（包罗调用loadURL方法触发的跳转），不可拦截页面请求资源请求（如加载css/js/png等资源的请求）。 注意：多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。


  • Options属性
属性范例取值阐明作用effectString 可取值： "instant" - 表示立刻生效，即调用overrideUrlLoading方法后立刻生效；
"touchstart" - 表示用户操作Webview窗口（触发touchstart事件）后生效，假如用户没有操作Webview窗口则不对URL请求操作进行拦截处理。 默认值为"instant"。
拦截URL请求生效机遇modeString 可取值： "allow"表示满意match属性定义的条件时不拦截url继承加载，不满意match属性定义的条件时拦截url跳转并触发callback回调；
"reject"表示满意match属性定义的提交时拦截url跳转并触发callback回调，不满意match属性定义的条件时不拦截url继承加载。
默认值为"reject"。
拦截模式matchString 支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。
假如mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。
匹配是否需要处理的URL请求excludeString 不拦截处理指定范例的URL请求，直接使用系统默认处理逻辑。
可取值： "none"表示不清除任何URL请求（即拦截处理所有URL请求）；
"redirect"表示清除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求大概会误判断为302跳转）。
默认值为"none"。
      

  • 清除拦截处理请求范例


  • 示例代码
  1. ws=plus.webview.currentWebview();
  2. nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
  3. nw.show();
  5. var regex = "^https://brain.*";
  6. nw.overrideUrlLoading({
  7.         mode:'allow',
  8.         match: regex,
  9. }, function(e){
  10.     console.log('reject url: '+e.url);
  11. });
复制代码
九、参考文档

参考文档地址



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81428

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表