Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作(上)
属性:
- isRecovery: 当前Webview窗口是否由于内核崩溃自动恢复
方法:
- all: 获取所有Webview窗口
- close: 关闭Webview窗口
- create: 创建新的Webview窗口
- currentWebview: 获取当前窗口的WebviewObject对象
- getDisplayWebview: 获取屏幕所有可视的Webview窗口
- getWebviewById: 查找指定标识的WebviewObject窗口
- getLaunchWebview: 获取应用首页WebviewObject窗口对象
- getSecondWebview: 获取应用第二个首页WebviewObject窗口对象
- getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象
- hide: 隐藏Webview窗口
- open: 创建并打开Webview窗口
- prefetchURL: 预载网络页面
- prefetchURLs: 预载网络页面(多个地址)
- show: 显示Webview窗口
- startAnimation: Webview窗口组合动画
- defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速
对象:
- AnimationTypeShow: 一组用于定义页面或控件显示动画效果
- AnimationTypeClose: 一组用于定义页面或控件关闭的动画效果
- WebviewObject: Webview窗口对象,用于操作加载HTML页面的窗口
- WebviewAnimationOptions: Webview窗口动画参数
- WebviewAnimationStyles: Webview窗口动画样式
- WebviewBounceStyle: Webview窗口回弹样式
- WebviewContentAnimationOptions: Webview窗口内容动画参数
- WebviewDock: 原生控件在窗口中停靠的方式
- WebviewDragEvent: Webview窗口滑动事件数据
- WebviewDragOptions: 窗口手势操作参数
- WebviewDragOtherViewOptions: 手势操作关联对象参数
- WebviewDrawOptions: 截屏绘制操作参数
- WebviewFavoriteOptions: 窗口收藏参数
- WebviewLoadDataOptions: 创建加载HTML数据参数
- WebviewShareOptions: 窗口的分享参数
- WebviewSubNViewStyles: 窗口原生子View控件样式
- WebviewTitleNViewStyles: 窗口标题栏控件样式
- WebviewTitleNViewBackButtonStyles: 窗口标题栏自定义返回按钮样式
- WebviewTitleNViewButtonStyles: 窗口标题栏自定义按钮样式
- WebviewTitleNViewSearchInputStyles: 窗口标题栏搜索框样式
- WebviewProgressStyles: 标题栏控件的进度条样式
- WebviewSplitLineStyles: 窗口标题栏控件的分割线样式
- WebviewEvent: Webview窗口事件
- WebviewExtraOptions: JSON对象,原生窗口扩展参数
- WebviewPosition: 原生控件在窗口中显示的位置
- WebviewPullToRefreshStyles: Webview窗口下拉刷新样式
- WebviewRenderedEventOptions: Webview窗口rendered事件参数
- WebviewReplaceWebApiOptions: 替换H5标准API配置信息
- WebviewStatusbarStyles: JSON对象,Webview窗口的系统状态栏区域样式
- WebviewStyles: JSON对象,Webview窗口对象的样式
- WebviewTransform: 一组用于定义页面或控件变形的属性
- WebviewTransition: 一组用于定义页面或控件转换效果的属性
- WebviewOverrideResourceOptions: 拦截Webview窗口资源请求的参数
- WebviewOverrideUrlOptions: 拦截Webview窗口URL请求的属性
- WebviewListenResourceOptions: 监听Webview窗口资源加载的属性
回调方法:
- BounceEventCallback: Webview窗口回弹事件的回调函数
- EventCallback: Webview窗口事件的回调函数
- PopGestureCallback: Webview窗口侧滑事件的回调函数
- HistoryQueryCallback: 历史记录查询的回调函数
- ListenResourceLoadingCallback: Webview窗口加载资源事件的回调函数
- OverrideUrlLoadingCallback: Webview窗口拦截URL链接跳转的回调函数
- TitleUpdateCallback: Webview窗口加载页面标题更新的回调函数
- WebviewAnimationCallback: Webview窗口组合动画回调函数
- WebviewDragCallback: Webview窗口滑屏操作事件回调函数
- WebviewCustomButtonCallback: Webview窗口标题栏上自定义按钮点击事件回调函数
- SuccessCallback: Webview窗口操作成功回调函数
- ErrorCallback: Webview窗口操作失败回调函数
权限:
5+功能模块(permissions)
{
// ...
"permissions":{// ..."Webview": {"description": "窗口管理"}
}
}
isRecovery
当前Webview窗口是否由于内核崩溃自动恢复
plus.webview.isRecovery;
说明:
Boolean 类型 只读属性
如果当前窗口是由于内核(WKWebview)崩溃恢复则返回true,否则返回false。 注意:仅iOS平台使用WKWebview内核时生效。
平台支持:
- Android - ALL (不支持)
- iOS - 8.0+ (支持)
all
获取所有Webview窗口
Array[WebviewObject] plus.webview.all();
说明:
获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象在数组中按创建的先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。
参数:
无
返回值:
Array[WebviewObject] : 应用中创建的所有Webview窗口对象数组。
示例:
// 获取所有Webview窗口var wvs=plus.webview.all();for(var i=0;i<wvs.length;i++){console.log('webview'+i+': '+wvs[i].getURL());}
uni-app使用plus注意事项
close
关闭Webview窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );
说明:
关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。
参数:
- id_wvobj: ( String | WebviewObject ) 必选 要关闭Webview窗口id或窗口对象
若操作窗口对象已经关闭,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
- aniClose: ( AnimationTypeClose ) 可选 关闭Webview窗口的动画效果
如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
- duration: ( Number ) 可选 关闭Webview窗口动画的持续时间
单位为ms,如果没有设置则使用显示窗口动画时间。
- extras: ( WebviewExtraOptions ) 可选 关闭Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
返回值:
void : 无
示例:
// 关闭Webview窗口
function closeWebview(){var ws=plus.webview.currentWebview();plus.webview.close(ws);
}
uni-app使用plus注意事项
create
创建新的Webview窗口
WebviewObject 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: ( WebviewStyles ) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
- extras: ( Object ) 可选 创建Webview窗口的额外扩展参数
值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如: var w=plus.webview.create('url.html','id',{},{preload:'preload webview'}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”
返回值:
WebviewObject : Webview窗口对象
示例:
// 创建并显示新窗口
function create(){var w = plus.webview.create('http://m.weibo.cn/u/3196963860');w.show(); // 显示窗口
}
uni-app使用plus注意事项
currentWebview
获取当前窗口的WebviewObject对象
WebviewObject plus.webview.currentWebview();
说明:
获取当前页面所属的Webview窗口对象。
参数:
无
返回值:
WebviewObject : Webview窗口对象
示例:
// 获取当前Webview窗口对象var ws=plus.webview.currentWebview();console.log( "当前Webview窗口:"+ws.getURL() );
uni-app使用plus注意事项
getDisplayWebview
获取屏幕所有可视的Webview窗口
Array[WebviewObject] plus.webview.getDisplayWebview();
说明:
仅在屏幕区域显示的Webview窗口,如果Webview窗口显示了但被其它Webview窗口盖住则认为不可视。
参数:
无
返回值:
Array[WebviewObject] : 屏幕中可视的Webview窗口对象数组。
示例:
// 获取所有可视的Webview窗口var wvs=plus.webview.getDisplayWebview();for(var i=0;i<wvs.length;i++){console.log('Display webview '+i+': '+wvs[i].getURL());}
uni-app使用plus注意事项
getWebviewById
查找指定标识的WebviewObject窗口
WebviewObject plus.webview.getWebviewById( id );
说明:
在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。
参数:
- id: ( String ) 必选 要查找的Webview窗口标识
返回值:
WebviewObject : WebviewObject窗口对象
示例:
// 查找应用首页窗口对象var h=plus.webview.getWebviewById( plus.runtime.appid );console.log( "应用首页Webview窗口:"+h.getURL() );
uni-app使用plus注意事项
getLaunchWebview
获取应用首页WebviewObject窗口对象
WebviewObject plus.webview.getLaunchWebview();
参数:
无
返回值:
WebviewObject : WebviewObject窗口对象
示例:
// 获取应用首页窗口对象var h=plus.webview.getLaunchWebview();console.log('应用首页Webview窗口:'+h.getURL());
uni-app使用plus注意事项
getSecondWebview
获取应用第二个首页WebviewObject窗口对象
WebviewObject plus.webview.getSecondWebview();
说明:
在双首页模式下(在manifest.json的plus->secondwebview节点下配置),应用会自动创建两个首页Webview,通过getLaunchWebview()可获取第一个首页窗口对象,通过getSecondWebview()可获取第二个首页窗口对象。
参数:
无
返回值:
WebviewObject : WebviewObject窗口对象,在非双首页模式下则返回undefined。
示例:
// 获取应用第二个首页窗口对象var h=plus.webview.getSecondWebview();if(h){console.log('应用第二个首页Webview窗口:'+h.getURL());}else{console.log('应用不存在第二个首页Webview窗口');}
uni-app使用plus注意事项
getTopWebview
获取应用显示栈顶的WebviewObject窗口对象
WebviewObject plus.webview.getTopWebview();
参数:
无
返回值:
WebviewObject : WebviewObject窗口对象
示例:
// 获取应用首页窗口对象var h=plus.webview.getTopWebview();console.log('应用显示栈顶的Webview窗口:'+h.getURL());
uni-app使用plus注意事项
hide
隐藏Webview窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
说明:
根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。
参数:
- id_wvobj: ( String | WebviewObject ) 必选 要隐藏的Webview窗口id或窗口对象
使用窗口对象时,若窗口对象已经隐藏,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的,若没有查找到对应id的WebviewObject对象,则无任何效果。
- aniHide: ( AnimationTypeClose ) 可选 隐藏Webview窗口的动画效果
如果没有指定窗口动画,则使用默认动画效果“none”。
- duration: ( Number ) 可选 隐藏Webview窗口动画的持续时间
单位为ms,如果没有设置则使用默认窗口动画时间。
- extras: ( WebviewExtraOptions ) 可选 隐藏Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
返回值:
void : 无
示例:
// 隐藏当前Webview窗口
function hideWebview(){plus.webview.hide(plus.webview.currentWebview());
}
uni-app使用plus注意事项
open
创建并打开Webview窗口
WebviewObject 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: ( WebviewStyles ) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
- aniShow: ( AnimationTypeShow ) 可选 显示Webview窗口的动画效果
如果没有指定窗口动画,则使用默认无动画效果“none”。
- duration: ( Number ) 可选 显示Webview窗口动画的持续时间
单位为ms,默认值为200ms(毫秒)。
- showedCB: ( SuccessCallback ) 可选 Webview窗口显示完成的回调函数
当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。
返回值:
WebviewObject : WebviewObject窗口对象
示例:
// 创建并显示新窗口
function openWebview(){var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
}
uni-app使用plus注意事项
prefetchURL
预载网络页面
void plus.webview.prefetchURL(url);
说明:
预载网络页面会向服务器发起http/https请求获取html页面内容, 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。 注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。
参数:
- url: ( String ) 必选 需要预载的页面地址
必须是网络地址(http/https),本地页面地址无需预载。
返回值:
void : 无
示例:
var url = 'http://m.weibo.cn/u/3196963860';// 预载网络页面
function prefetchWebview(){plus.webview.prefetchURL(url);
}// 显示预载页面
function showWebview(){// 预创建新窗口(显示在可视区域外)wn=plus.webview.create(url, 'test',{render:'always'});wn.show('none');
}
uni-app使用plus注意事项
prefetchURLs
预载网络页面(多个地址)
void plus.webview.prefetchURLs(urls);
说明:
预载网络页面会向服务器发起http/https请求获取html页面内容, 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。 注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。
参数:
- urls: ( Array[String] ) 必选 需要预载的页面地址数组
数组项必须是网络地址(http/https),本地页面地址无需预载。
返回值:
void : 无
示例:
var urls = ['http://m.weibo.cn/u/3196963860','http://m3w.cn/'];// 预载网络页面
function prefetchWebview(){plus.webview.prefetchURLs(urls);
}// 显示预载页面
function showWebview(){// 创建并显示新窗口wn=plus.webview.create(urls[0], 'test', {render:'always'});wn.show('none');
}
function showWebview1(){// 创建并显示新窗口wn=plus.webview.create(urls[1], 'test1', {render:'always'});wn.show('none');
}
uni-app使用plus注意事项
show
显示Webview窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
说明:
显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。
参数:
- 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窗口动画是否使用图片加速。
返回值:
WebviewObject : Webview窗口对象
示例:
// 创建并显示新窗口
function create(){var w = plus.webview.create('http://m.weibo.cn/u/3196963860');plus.webview.show(w); // 显示窗口
}
uni-app使用plus注意事项
startAnimation
Webview窗口组合动画
void plus.webview.startAnimation(options, otherOptions, callback);
说明:
同步组合两个Webview窗口动画,动画完成后窗口的位置会发生变化,一次需要在动画属性参数中设置动画起始位置、结束位置等。 注意:此动画操作会改变窗口位置(如left值等),再次调用show方法时需要确保其位置是否在可视区域,如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。
参数:
- options: ( WebviewAnimationOptions ) 必选 主窗口动画属性
设置动画的主窗口及其起始位置,结束位置等信息。
- otherOptions: ( WebviewAnimationOptions ) 可选 关联窗口动画属性
设置关联的窗口及其起始位置,结束位置等信息。
- callback: ( WebviewAnimationCallback ) 可选 Webview窗口组合动画完成回调
每个窗口动画完成时触发一次回调,可通过回调参数的id属性获取窗口的标识。
返回值:
void : 无
示例:
// 预创建新窗口
function createWebview(){ws=plus.webview.currentWebview();// 创建新窗口(显示在可视区域外)wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%',render:'always'});wn.show('none');// 右滑隐藏新窗口wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){console.log('Right drag event: '+JSON.stringify(e));});
}// 窗口组合动画
function webviewAnimation(){plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},{view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},function(e){console.log('Animation finished: '+JSON.stringify(e));});
}
uni-app使用plus注意事项
defaultHardwareAccelerated
获取Webview默认是否开启硬件加速
Boolean plus.webview.defaultHardwareAccelerated();
说明:
由于不同设备对硬件加速的支持情况存在差异,开启硬件加速能加速HTML页面的渲染,但也会消耗更多的系统资源,从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题, 因此5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速。 关闭硬件加速则可能会导致Webview页面无法支持Video标签播放视频等问题,如果在特定情况下需要调整修改默认开启硬件加速的行为,则可通过plus.webview.defaultHardwareAccelerated()方法获取当前设备默认是否开启硬件加速状态,从而决定是否需要显式开启或关闭指定Webview的硬件加速功能(通过WebviewStyles的hardwareAccelerated属性设置)。
参数:
无
返回值:
Boolean : Webview窗口默认开启硬件加速则返回true,否则返回false。
平台支持:
- Android - 2.3+ (支持) :
返回当前设备默认是否开启硬件加速。
- iOS - 5.1+ (不支持) :
返回固定值true。
示例:
// 创建新窗口并设置开启硬件加速
function create(){var styles={};// 在Android5以上设备,如果默认没有开启硬件加速,则强制设置开启if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){styles.hardwareAccelerated=true;}var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);plus.webview.show(w); // 显示窗口
}
uni-app使用plus注意事项
AnimationTypeShow
一组用于定义页面或控件显示动画效果
常量:
- "auto": (String 类型 )自动选择动画效果
自动选择动画效果,使用上次显示窗口设置的动画效果,如果是第一次显示则默认动画效果“none”。
- "none": (String 类型 )无动画效果
立即显示页面,无任何动画效果,页面显示默认的动画效果。 此效果忽略动画时间参数,立即显示。 对应关闭动画"none"。
- "slide-in-right": (String 类型 )从右侧横向滑动效果
页面从屏幕右侧外向内横向滑动显示。 对应关闭动画"slide-out-right"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-in-left": (String 类型 )从左侧横向滑动效果
页面从屏幕左侧向右横向滑动显示。 对应关闭动画"slide-out-left"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-in-top": (String 类型 )从上侧竖向滑动效果
页面从屏幕上侧向下竖向滑动显示。 对应关闭动画"slide-out-top"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-in-bottom": (String 类型 )从下侧竖向滑动效果
页面从屏幕下侧向上竖向滑动显示。 对应关闭动画"slide-out-bottom"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "fade-in": (String 类型 )从透明到不透明逐渐显示效果
页面从完全透明到不透明逐渐显示。 对应关闭动画"fade-out"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "zoom-out": (String 类型 )从小到大逐渐放大显示效果
页面在屏幕中间从小到大逐渐放大显示。 对应关闭动画"zoom-in"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为100ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为100ms。
- Android - 2.2+ (支持) :
- "zoom-fade-out": (String 类型 )从小到大逐渐放大并且从透明到不透明逐渐显示效果
页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。 对应关闭动画"zoom-fade-in"。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为100ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为100ms。
- Android - 2.2+ (支持) :
- "pop-in": (String 类型 )从右侧平移入栈动画效果
页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。 对应关闭动画"pop-out"。
平台支持
- Android - 2.2+ (支持) :
动画时间为300ms,不支持设置动画持续时间,Android6+系统上一个页面有半透明效果。 此动画是新开窗口侧滑挤压当前屏幕窗口特效,必须是两个Webview窗口的组合动画, 如果当前屏幕已显示多个Webview窗口,则显示新窗口不支持此动画类型,自动转成“slide-in-right”。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
AnimationTypeClose
一组用于定义页面或控件关闭的动画效果
常量:
- "auto": (String 类型 )自动选择动画效果
自动选择显示窗口相对于的动画效果。
- "none": (String 类型 )无动画
立即关闭页面,无任何动画效果。 此效果忽略动画时间参数,立即关闭。
- "slide-out-right": (String 类型 )横向向右侧滑出屏幕动画
页面从屏幕中横向向右侧滑动到屏幕外关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-out-left": (String 类型 )横向向左侧滑出屏幕动画
页面从屏幕中横向向左侧滑动到屏幕外关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-out-top": (String 类型 )竖向向上侧滑出屏幕动画
页面从屏幕中竖向向上侧滑动到屏幕外关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "slide-out-bottom": (String 类型 )竖向向下侧滑出屏幕动画
页面从屏幕中竖向向下侧滑动到屏幕外关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "fade-out": (String 类型 )从不透明到透明逐渐隐藏动画
页面从不透明到透明逐渐隐藏关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为200ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
- "zoom-in": (String 类型 )从大逐渐缩小关闭动画
页面逐渐向页面中心缩小关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为100ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为100ms。
- Android - 2.2+ (支持) :
- "zoom-fade-in": (String 类型 )从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。
平台支持
- Android - 2.2+ (支持) :
默认动画时间为100ms。
- iOS - 5.1.1+ (支持) :
默认动画时间为100ms。
- Android - 2.2+ (支持) :
- "pop-out": (String 类型 )从右侧平移出栈动画效果
页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。
平台支持
- Android - 2.2+ (支持) :
动画时间为300ms,不支持设置动画持续时间,Android6+系统上一个页面有半透明效果。
- iOS - 5.1.1+ (支持) :
默认动画时间为300ms。
- Android - 2.2+ (支持) :
WebviewObject
Webview窗口对象,用于操作加载HTML页面的窗口
属性:
- id: Webview窗口的标识
方法:
- addEventListener: 添加事件监听器
- append: 在Webview窗口中添加子窗口
- appendJsFile: 添加Webview窗口预加载js文件
- animate: Webview窗口内容动画
- back: 后退到上次加载的页面
- beginPullToRefresh: 开始Webview窗口的下拉刷新
- canBack: 查询Webview窗口是否可后退
- canForward: 查询Webview窗口是否可前进
- checkRenderedContent: 检测Webview窗口是否渲染完成
- children: 获取Webview窗口的所有子Webview窗口
- clear: 清空原生Webview窗口加载的内容
- close: 关闭Webview窗口
- drag: 设置Webview窗口的滑屏操作手势
- draw: 截屏绘制
- endPullToRefresh: 结束Webview窗口的下拉刷新
- evalJS: 在Webview窗口中执行JS脚本
- forward: 前进到上次加载的页面
- getFavoriteOptions: 获取Webview窗口的收藏参数
- getSafeAreaInsets: 获取页面的安全区域
- getShareOptions: 获取Webview窗口的分享参数
- getStyle: 获取Webview窗口的样式
- getSubNViews: 获取Webview窗口的原生子View控件对象
- getTitle: 获取Webview窗口加载HTML页面的标题
- getTitleNView: 获取Webview窗口的标题栏控件对象
- getTitleNViewSearchInputText: 获取标题栏上输入框的内容
- getURL: 获取Webview窗口加载HTML页面的地址
- hide: 隐藏Webview窗口
- hideTitleNViewButtonRedDot: 隐藏标题栏上按钮的红点
- interceptTouchEvent: 是否拦截Webview窗口的触屏事件
- isHardwareAccelerated: 查询Webview窗口是否开启硬件加速
- isPause: 查询Webview窗口是否暂停
- isVisible: 查询Webview窗口是否可见
- listenResourceLoading: 监听页面开始加载资源
- loadData: 加载新HTML数据
- loadURL: 加载新URL页面
- nativeInstanceObject: 获取Webview窗口对象的原生(Native.JS)实例对象
- opened: 获取在当前Webview窗口中创建的所有窗口
- opener: 获取当前Webview窗口的创建者
- overrideResourceRequest: 拦截Webview窗口的资源加载
- overrideUrlLoading: 拦截Webview窗口的URL请求
- parent: 获取当前Webview窗口的父窗口
- pause: 暂停当前Webview窗口
- reload: 重新加载Webview窗口显示的HTML页面
- resetBounce: 重置Webview窗口的回弹位置
- restore: 恢复Webview控件显示内容
- remove: 移除子Webview窗口
- removeEventListener: 移除Webview窗口事件监听器
- removeFromParent: 从父窗口中移除
- removeTitleNViewButtonBadge: 移除标题栏上按钮的角标
- resume: 恢复当前Webview窗口
- setBounce: 设置Webview窗口的回弹效果
- setBlockNetworkImage: 设置Webview窗口是否阻塞加载页面中使用的网络图片
- setContentVisible: 设置HTML内容是否可见
- setCssFile: 设置预加载的CSS文件
- setCssText: 设置预加载的CSS内容
- setFavoriteOptions: 设置Webview窗口的收藏参数
- setFixBottom: 设置Webview窗口底部修复区域高度
- setJsFile: 设置预加载的JS文件
- setPullToRefresh: 设置Webview窗口的下拉刷新效果
- setRenderedEventOptions: 设置Webview窗口rendered事件参数
- setSoftinputTemporary: 临时设置弹出系统软键盘样式
- setStyle: 设置Webview窗口的样式
- setShareOptions: 设置Webview窗口的分享参数
- setTitleNViewButtonBadge: 设置标题栏上按钮的角标
- setTitleNViewButtonStyle: 设置标题栏上按钮的样式
- setTitleNViewSearchInputFocus: 设置标题栏上输入框是否获取输入焦点
- setTitleNViewSearchInputText: 设置标题栏上输入框的内容
- setVisible: 设置Webview窗口是否可见
- show: 显示Webview窗口
- showBehind: 在指定Webview窗口后显示
- showTitleNViewButtonRedDot: 设置标题栏上按钮的红点
- stop: 停止加载HTML页面内容
- updateSubNViews: 更新Webview窗口的原生子View控件对象
事件:
- onclose: Webview窗口关闭事件
- onerror: Webview窗口错误事件
- onloaded: Webview窗口页面加载完成事件
- onloading: Webview窗口页面开始加载事件
id
Webview窗口的标识
说明:
String 类型 只读属性
调用plus.webview.create或plus.webview.open新建窗口时传入的id参数值,如果没有设置id参数,此属性值为undefined。 注意:窗口标识只能在创建时设置,不支持动态修改,不要对此属性进行赋值操作。
示例:
// 获取自身webview窗口var ws=plus.webview.currentWebview();console.log('窗口标识: '+ws.id);
uni-app使用plus注意事项
addEventListener
添加事件监听器
wobj.addEventListener( event, listener, capture );
说明:
向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。
参数:
- event: ( WebviewEvent ) 必选 Webview窗口事件类型
- listener: ( EventCallback ) 必选 监听事件发生时执行的回调函数
- capture: ( Boolean ) 可选 捕获事件流顺序,暂无效果
返回值:
void : 无
示例:
var nw=null;
// 监听Webview窗口事件
function listenWebviewEvent() {if(nw){return;}var w=plus.nativeUI.showWaiting()// 打开新窗口nw=plus.webview.create('http://m.weibo.cn/u/3196963860');nw.addEventListener('loaded', function(){console.log('New Window loaded!');nw.show(); // 显示窗口w.close();w=null;}, false);
}
uni-app使用plus注意事项
append
在Webview窗口中添加子窗口
void wobj.append( webview );
说明:
将另一个Webview窗口作为子窗口添加到当前Webview窗口中,添加后其所有权归父Webview窗口,当父窗口关闭时子窗口自动关闭。
参数:
- webview: ( plus.nativeObj.View | WebviewObject ) 必选 被添加的子Webview窗口或View控件对象
被添加的Webview窗口需通过plus.webview.create方法创建,并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示,父窗口隐藏时子窗口也会自动隐藏。 被添加的View控件需通过new plus.nativeObj.View()创建,添加到Webview窗口后所有权一起转移(即Webview关闭后View控件也自动关闭)。
返回值:
void : 无
示例:
//在Webview窗口中添加子窗口embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});plus.webview.currentWebview().append(embed);
uni-app使用plus注意事项
appendJsFile
添加Webview窗口预加载js文件
void wobj.appendJsFile( file );
说明:
对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。
参数:
- file: ( String ) 必选 窗口预加载的js文件地址
js文件路径只支持本地文件,应该使用扩展相对路径类型的文件,如"_www/preload.js"。
返回值:
void : 无
示例:
// 添加Webview窗口预加载js文件
function appendJs2Webviewe(){var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');nw.appendJsFile('_www/preload.js');nw.show();
}
uni-app使用plus注意事项
animate
Webview窗口内容动画
void wobj.animate(options, callback);
说明:
动画后可能会导致Webview窗口显示内容改变,可通过调用restore方法恢复。 当Webview窗口内容动画引起内容不可见(透明),将显示此窗口后面的内容。
参数:
- options: ( WebviewContentAnimationOptions ) 可选 Webview窗口内容动画参数
- callback: ( SuccessCallback ) 可选 Webview窗口内容动画结束回调函数
Webview窗口内容动画效果结束时触发。 注意:动画结束时仍然会显示Webview窗口,需要调用其hide/close方法隐藏/关闭。
返回值:
void : 无
示例:
// Webview窗口动画
function animateWebview(){wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){wv.restore(); // 内容动画结束后可调用此动画恢复显示内容});
}
uni-app使用plus注意事项
back
后退到上次加载的页面
void wobj.back();
说明:
Webview窗口历史记录操作,后退到窗口上次加载的HTML页面。 如果窗口历史记录中没有可后退的页面则不触发任何操作。
参数:
无
返回值:
void : 无
示例:
var embed=null;
// 创建子窗口
function createWebview(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append(embed);
}// 后退到上次加载的页面
function goForward() {embed.forward();
}
uni-app使用plus注意事项
beginPullToRefresh
开始Webview窗口的下拉刷新
void wobj.beginPullToRefresh();
说明:
开始触发下拉刷新效果,与用户操作下拉刷新行为一致(有动画效果)。 触发setPullTorefresh方法设置的下拉刷新事件回调。
参数:
无
返回值:
void : 无
示例:
charset="utf-8"/> name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> name="HandheldFriendly" content="true"/> name="MobileOptimized" content="320"/> Webview Example type="text/javascript" charset="utf-8">
var ws=null;
var list=null;
// 扩展API加载完毕,现在可以正常调用扩展API
function plusReady(){ws=plus.webview.currentWebview();ws.setPullToRefresh({support:true,style:'circle',offset:'45px'}, onRefresh);// 第一次打开页面即开始刷新列表setTimeout(function(){console.log('Initializ refresh');ws.beginPullToRefresh();},200);
}
// 判断扩展API是否准备,否则监听'plusready'事件
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){list=document.getElementById('list');
})
// 刷新页面
function onRefresh(){setTimeout(function(){if(list){var item=document.createElement('li');item.innerHTML='New Item '+(new Date())+'';list.insertBefore(item,list.firstChild);}ws.endPullToRefresh();},1000);
} type="text/css">
li {padding: 1em;border-bottom: 1px solid #eaeaea;
}
li:active {background: #f4f4f4;
}
id="list" style="list-style:none;margin:0;padding:0;"> Initializ List Item 1 Initializ List Item 2 Initializ List Item 3 Initializ List Item 4 Initializ List Item 5 Initializ List Item 6 Initializ List Item 7 Initializ List Item 8 Initializ List Item 9 Initializ List Item 10
uni-app使用plus注意事项
canBack
查询Webview窗口是否可后退
void wobj.canBack( queryCallback );
说明:
Webview窗口历史记录查询操作,获取Webview是否可后退到历史加载的页面,结果通过queryCallback回调方法返回。
参数:
- queryCallback: ( HistoryQueryCallback ) 必选 查询历史记录操作回调函数
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append(embed);
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 是否可后退
function canBack() {embed.canBack( function(e){console.log('是否可返回:'+e.canBack);});
}查询Webview窗口是否可后退 onclick="canBack()">canBack
uni-app使用plus注意事项
canForward
查询Webview窗口是否可前进
void wobj.canForward( queryCallback );
说明:
Webview窗口历史记录查询操作,获取Webview是否可前进到历史加载的页面,结果通过queryCallback回调方法返回。
参数:
- queryCallback: ( HistoryQueryCallback ) 必选 查询历史记录操作回调函数
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append(embed);
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 是否可前进
function canForward() {embed.canForward( function(e){console.log( "是否可前进:"+e.canForward );});
}查询Webview窗口是否可前进 onclick="canForward()">canForward
uni-app使用plus注意事项
checkRenderedContent
检测Webview窗口是否渲染完成
void wobj.checkRenderedContent(options, successCallback, errorCallback);
说明:
检测方式为判断的Webview窗口内容是否为白屏,如果非白屏则认为渲染完成,否则认为渲染未完成。 通过successCallback回调函数返回结果,如果检测过程中发生错误则触发errorCallback回调函数。
参数:
- options: ( WebviewRenderedEventOptions ) 可选 Webview窗口rendered事件参数
- successCallback: ( Function ) 必选 检测Webview窗口渲染结果回调函数
获取渲染检测结果后触发,函数原型为void function(e){}; e.rendered:表示检测渲染完成结果,Boolean类型,true表示渲染完成,false表示渲染未完成。
- errorCallback: ( ErrorCallback ) 可选 检测Webview窗口渲染结果失败回调函数
检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数。
返回值:
void : 无
平台支持:
- Android - 2.2+ (支持)
- iOS - ALL (不支持)
示例:
charset="utf-8"> Webview Example type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}// 创建Webview窗口
function createWebview(){// 打开新窗口nw=plus.webview.create('http://m.weibo.cn/u/3196963860');nw.show();
}
function checkWebview(){nw.checkRenderedContent({}, function(e){console.log('checkRenderedContent success: '+JSON.stringify(e));}, function(e){console.log('checkRenderedContent error: '+JSON.stringify(e));});
}检测Webview窗口是否渲染完成
onclick="createWebview()">Show
onclick="checkWebview()">Check
uni-app使用plus注意事项
children
获取Webview窗口的所有子Webview窗口
Array[WebviewObject] wobj.children();
说明:
获取添加到Webview窗口中的所有子Webview窗口,如果没有子Webview窗口则返回空数组。
参数:
无
返回值:
Array[WebviewObject] : 包含的子Webview窗口对象数组,没有则返回空数组。
示例:
charset="utf-8"> Webview Example type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append( embed );
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 获取子Webview窗口
function listChildren() {var list=plus.webview.currentWebview().children();for(var i=0;i<list.length;i++){console.log('Children['+i+']: '+list[i].getURL());}
}获取Webview窗口的所有子Webview窗口 onclick="listChildren()">Children
uni-app使用plus注意事项
clear
清空原生Webview窗口加载的内容
void wobj.clear();
说明:
清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。
参数:
无
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append(embed);
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 清空Webview窗口
function webviewClear() {embed.clear();
}清空原生Webview窗口加载的内容 onclick="webviewClear()">Clear
uni-app使用plus注意事项
close
关闭Webview窗口
void wobj.close( aniClose, duration, extras );
说明:
关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。
参数:
- aniClose: ( AnimationTypeClose ) 可选 关闭Webview窗口动画效果
如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
- duration: ( Number ) 可选 关闭Webview窗口的动画持续时间
单位为ms,默认为窗口show方法设定的动画时间。
- extras: ( WebviewExtraOptions ) 可选 关闭Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 关闭窗口
function closeMe() {ws.close();
}关闭Webview窗口 onclick="closeMe()">Close
uni-app使用plus注意事项
drag
设置Webview窗口的滑屏操作手势
void wobj.drag(options, otherView, callback);
说明:
将Webview窗口的左右滑动手势关联到其它Webview窗口,可实现滑动切换显示Webview的动画效果(如Tab页面切换效果)。 注意:滑屏操作会改变窗口位置(如left值等),如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。
参数:
- options: ( WebviewDragOptions ) 必选 当前Webview窗口操作手势配置参数
- otherView: ( WebviewDragOtherViewOptions ) 可选 操作手势关联的窗口配置参数
- callback: ( WebviewDragCallback ) 可选 滑屏操作回调函数
在滑屏手势操作过程中触发,一次滑屏操作至少会触发3次回调事件(开始、滑屏移动、结束)。
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();// 预创建新窗口(显示在可视区域外)wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%'});wn.show('none');// 左滑显示新窗口ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){console.log('Left drag event: '+JSON.stringify(e));});// 右滑隐藏新窗口wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){console.log('Right drag event: '+JSON.stringify(e));});
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}左滑可打开新页面
uni-app使用plus注意事项
draw
截屏绘制
void wobj.draw( bitmap, successCallback, errorCallback, options );
说明:
将Webview窗口的可视区域截屏并绘制到Bitmap图片对象中。
参数:
- bitmap: ( plus.nativeObj.Bitmap ) 可选 要绘制的图片对象
如果图片中已经存在内容则覆盖,如果截屏绘制失败则保留之前的图片内容。
- successCallback: ( SuccessCallback ) 可选 截屏绘制操作成功回调
截屏绘制操作成功时调用。
- errorCallback: ( ErrorCallback ) 可选 截屏绘制操作失败回调
截屏绘制操作失败时调用,并返回失败信息。
- options: ( WebviewDrawOptions ) 可选 截屏绘制操作参数
设置控制截屏绘制区域、是否检测白屏等。
返回值:
void : 无
平台支持:
- Android - ALL (支持) :
不支持截取Canvas标签中的内容,也不支持截取Barcode、Map、LivePusher、VideoPlayer等原生控件的内容。
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 截屏绘制
var bitmap=null;
function captureWebview() {bitmap = new plus.nativeObj.Bitmap('test');// 将webview内容绘制到Bitmap对象中ws.draw(bitmap,function(){console.log('截屏绘制图片成功');},function(e){console.log('截屏绘制图片失败:'+JSON.stringify(e));});
}截屏绘制Webview窗口
onclick="captureWebview()">Draw
uni-app使用plus注意事项
endPullToRefresh
结束Webview窗口的下拉刷新
void wobj.endPullToRefresh();
说明:
关闭下拉刷新效果,恢复到开始下拉刷新之前的效果。
参数:
无
返回值:
void : 无
示例:
charset="utf-8"/> name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> name="HandheldFriendly" content="true"/> name="MobileOptimized" content="320"/> Webview Example type="text/javascript" charset="utf-8">
var ws=null;
var list=null;
// 扩展API加载完毕,现在可以正常调用扩展API
function plusReady(){ws=plus.webview.currentWebview();ws.setPullToRefresh({support:true,height:'50px',range:'200px',contentdown:{caption:'下拉可以刷新'},contentover:{caption:'释放立即刷新'},contentrefresh:{caption:'正在刷新...'}},onRefresh);plus.nativeUI.toast('下拉可以刷新');
}
// 判断扩展API是否准备,否则监听'plusready'事件
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){list=document.getElementById('list');
})
// 刷新页面
function onRefresh(){setTimeout(function(){if(list){var item=document.createElement('li');item.innerHTML='New Item '+(new Date())+'';list.insertBefore(item,list.firstChild);}ws.endPullToRefresh();},2000);
} type="text/css">
li {padding: 1em;border-bottom: 1px solid #eaeaea;
}
li:active {background: #f4f4f4;
}
id="list" style="list-style:none;margin:0;padding:0;"> Initializ List Item 1 Initializ List Item 2 Initializ List Item 3 Initializ List Item 4 Initializ List Item 5 Initializ List Item 6 Initializ List Item 7 Initializ List Item 8 Initializ List Item 9 Initializ List Item 10
uni-app使用plus注意事项
evalJS
在Webview窗口中执行JS脚本
void wobj.evalJS( js );
说明:
将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。
参数:
- js: ( String ) 必选 要在窗口中运行的脚本字符串
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});ws.append( embed );
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 在Webview窗口中执行JS脚本
function evalJS() {embed.evalJS('alert("evalJS: "+location.href);');
}在Webview窗口中执行JS脚本 onclick="evalJS()">evalJS
uni-app使用plus注意事项
forward
前进到上次加载的页面
void wobj.forward();
说明:
Webview窗口历史记录操作,前进到窗口上次加载的HTML页面。 如果窗口历史记录中没有可前进的页面则不触发任何操作。
参数:
无
返回值:
void : 无
示例:
charset="utf-8"> Webview Example type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});plus.webview.currentWebview().append( embed );
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 返回上次页面
function goBack() {embed.back();
}
// 前进到上次页面
function goForward() {embed.forward();
}前进到上次加载的页面 onclick="goBack()">Back onclick="goForward()">Forward
uni-app使用plus注意事项
getFavoriteOptions
获取Webview窗口的收藏参数
WebviewFavoriteOptions wobj.getFavoriteOptions();
说明:
获取Webview窗口的收藏参数,如收藏页面的标题、图标、地址等。
参数:
无
返回值:
WebviewFavoriteOptions : 获取Webview窗口的收藏参数,如果未设置则返回null。
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();ws.setFavoriteOptions({title:'收藏页标题',href:'http://www.dcloud.io/'});
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 获取窗口的分享参数
function getFavoriteOptions(){var t = ws.getFavoriteOptions();alert(t?"未设置":JSON.stringify(t));
} style="text-align:center;">获取Webview窗口的收藏参数
onclick="getFavoriteOptions()">获取收藏参数
uni-app使用plus注意事项
getSafeAreaInsets
获取页面的安全区域
SafeAreaInsets wobj.getSafeAreaInsets();
说明:
Webview窗口内容区域的安全区域位置信息。 如页面底部与底部安全区域重叠10px, 则返回的bottom值为10,否则返回0。
参数:
无
返回值:
plus.navigator.SafeAreaInsets : 页面的安全区域信息
getShareOptions
获取Webview窗口的分享参数
WebviewShareOptions wobj.getShareOptions();
说明:
获取Webview窗口的分享参数,如分享的标题、图标、链接地址等。
参数:
无
返回值:
WebviewShareOptions : 获取Webview窗口的分享参数
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 获取窗口的分享参数
function getShareOptions(){var t = ws.getShareOptions();alert(t?"未设置":JSON.stringify(t));
} style="text-align:center;">获取Webview窗口的分享参数
onclick="getShareOptions()">获取分享参数
uni-app使用plus注意事项
getStyle
获取Webview窗口的样式
WebviewStyles wobj.getStyle();
说明:
获取Webview窗口的样式属性,如窗口位置、大小等信息。
参数:
无
返回值:
WebviewStyles : WebviewStyles对象
示例:
charset="utf-8"> Webview Example type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){ws=plus.webview.currentWebview();
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
// 获取Webview窗口的样式
function getStyle() {var style=ws.getStyle();alert( JSON.stringify(style) );
}获取Webview窗口的样式 onclick="getStyle()">getStyle
uni-app使用plus注意事项
getSubNViews
获取Webview窗口的原生子View控件对象
Array<plus.nativeObj.View> wobj.getSubNViews();
说明:
创建Webview窗口的所有原生子View控件。 可以在创建窗口时设置其subNViews属性自动创建(应用首页可通过manfest.json中的plus->launchwebview->subNNViews节点配置创建); 也可以通过Webview窗口的append方法将已经创建的原生View控件添加为其子。
参数:
无
返回值:
Array[plus.nativeObj.View] : 原生View控件对象数组,如果没有原生子View控件则返回空数组
示例:
charset="utf-8"> name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> Webview Example type="text/javascript">
// H5 plus事件处理
function plusReady(){plus.key.addEventListener('backbutton', function(){nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();}, false);
}
if(window.plus){plusReady();
}else{document.addEventListener('plusready', plusReady, false);
}
var nw=null;
var subNViews=null;
// 创建带原生子View控件的Webview窗口
function createWebview(){nw=nw||plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',subNViews:[{id:'subnview1',styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},tags:[{tag:'font',id:'font',text:'顶部原生子View控件',textStyles:{size:'18px'}}]},{id:'subnview2',styles:{bottom:'0px',height:'100px',backgroundColor:'#00FF00'},tags:[{tag:'font',id:'font',text:'底部原生子View控件',textStyles:{size:'18px'}}]}]});nw.addEventListener('close', function(){nw=null;}, false);subNViews = nw.getSubNViews();nw.show('pop-in');
}
// 更新顶部View控件
function updateTopView(){var tv = subNViews[0];tv.drawText('更新顶部子View控件内容',{},{},'font');
}
// 更新底部View控件
function updateBottomView(){var bv = subNViews[0];bv.drawText('更新底部子View控件内容',{},{},'font');
}Webview窗口的子View控件
onclick="createWebview()">Create
onclick="updateTopView()">更新顶部View控件 onclick="updateBottomView()">更新底部View控件
uni-app使用plus注意事项
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
