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。

  • "slide-in-left": (String 类型 )从左侧横向滑动效果

    页面从屏幕左侧向右横向滑动显示。 对应关闭动画"slide-out-left"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "slide-in-top": (String 类型 )从上侧竖向滑动效果

    页面从屏幕上侧向下竖向滑动显示。 对应关闭动画"slide-out-top"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "slide-in-bottom": (String 类型 )从下侧竖向滑动效果

    页面从屏幕下侧向上竖向滑动显示。 对应关闭动画"slide-out-bottom"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "fade-in": (String 类型 )从透明到不透明逐渐显示效果

    页面从完全透明到不透明逐渐显示。 对应关闭动画"fade-out"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "zoom-out": (String 类型 )从小到大逐渐放大显示效果

    页面在屏幕中间从小到大逐渐放大显示。 对应关闭动画"zoom-in"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为100ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为100ms。

  • "zoom-fade-out": (String 类型 )从小到大逐渐放大并且从透明到不透明逐渐显示效果

    页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。 对应关闭动画"zoom-fade-in"。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为100ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为100ms。

  • "pop-in": (String 类型 )从右侧平移入栈动画效果

    页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。 对应关闭动画"pop-out"。

    平台支持

    • Android - 2.2+ (支持) :

      动画时间为300ms,不支持设置动画持续时间,Android6+系统上一个页面有半透明效果。 此动画是新开窗口侧滑挤压当前屏幕窗口特效,必须是两个Webview窗口的组合动画, 如果当前屏幕已显示多个Webview窗口,则显示新窗口不支持此动画类型,自动转成“slide-in-right”。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

AnimationTypeClose

一组用于定义页面或控件关闭的动画效果

常量:

  • "auto": (String 类型 )自动选择动画效果

    自动选择显示窗口相对于的动画效果。

  • "none": (String 类型 )无动画

    立即关闭页面,无任何动画效果。 此效果忽略动画时间参数,立即关闭。

  • "slide-out-right": (String 类型 )横向向右侧滑出屏幕动画

    页面从屏幕中横向向右侧滑动到屏幕外关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "slide-out-left": (String 类型 )横向向左侧滑出屏幕动画

    页面从屏幕中横向向左侧滑动到屏幕外关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "slide-out-top": (String 类型 )竖向向上侧滑出屏幕动画

    页面从屏幕中竖向向上侧滑动到屏幕外关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "slide-out-bottom": (String 类型 )竖向向下侧滑出屏幕动画

    页面从屏幕中竖向向下侧滑动到屏幕外关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "fade-out": (String 类型 )从不透明到透明逐渐隐藏动画

    页面从不透明到透明逐渐隐藏关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为200ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

  • "zoom-in": (String 类型 )从大逐渐缩小关闭动画

    页面逐渐向页面中心缩小关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为100ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为100ms。

  • "zoom-fade-in": (String 类型 )从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画

    页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。

    平台支持

    • Android - 2.2+ (支持) :

      默认动画时间为100ms。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为100ms。

  • "pop-out": (String 类型 )从右侧平移出栈动画效果

    页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。

    平台支持

    • Android - 2.2+ (支持) :

      动画时间为300ms,不支持设置动画持续时间,Android6+系统上一个页面有半透明效果。

    • iOS - 5.1.1+ (支持) :

      默认动画时间为300ms。

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"/></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"/></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"></strong></span><span>Webview Example</span><span><strong> 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"/></strong></span><span>Webview Example</span><span><strong> 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注意事项


    本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

    相关文章