宜信同城网交流论坛技术专版技术专区Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下） ...WebviewTransform 一组用于定义页面或控件变形的属性 WebviewTransition 一组用于定义页面或控件转换 ...

admin 发表于 2023-2-16 18:54:40

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下） ...

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <div id="content" style="margin-left:auto;">
<h1 style="margin-left:0;">WebviewTransform</h1>
一组用于定义页面或控件变形的属性
<h1 style="margin-left:0;">WebviewTransition</h1>
一组用于定义页面或控件转换效果的属性
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>property: (String 类型 )产生变换效果的属性 默认值为"all"，暂不支持其它值。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (支持)</li></ul></li><li>duration: (String 类型 )变换持续的时间 默认值为0，即无动画效果。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (支持)</li></ul></li><li>timingfunction: (String 类型 )窗口变换效果 可取值： "linear"：匀速变化，匀速动画效果； "ease-in"：匀加速变化，逐渐变快的动画效果； "ease-out"：匀减速变化，逐渐变慢的动画效果； "ease-in-out"：先加速后减速变化，先变快后变慢的动画效果。默认值为"ease-in-out"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (支持)</li></ul></li></ul>
<h1 style="margin-left:0;">WebviewOverrideResourceOptions</h1>
拦截Webview窗口资源请求的参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>match: (String 类型 )区配需要拦截请求资源的URL地址 支持正则表达式，默认值为空字符串（即不拦截）。 </li><li>redirect: (String 类型 )拦截重定向的资源地址 仅支持本地资源地址，如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径。 </li><li>mime: (String 类型 )重定向的资源数据类型 RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型。如普通文本（text/plain）、PNG图像(image/png)、GIF图形(image/gif)、JPEG图形(image/jpeg)。如果未指定mime类型，则根据重定向资源路径自动区配。 </li><li>encoding: (String 类型 )重定向的资源数据编码 如未设置，则使用默认值"UTF-8"。 </li><li>header: (JSON 类型 )设置重定向资源数据的http头数据 可设置标注http头数据（如Content-type）,也可设置自定义数据。通常可通过此属性来设置拦截资源的缓存策略（如Cache-control）。 </li></ul>
<h1 style="margin-left:0;">WebviewOverrideUrlOptions</h1>
拦截Webview窗口URL请求的属性
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>effect: (String 类型 )拦截URL请求生效时机 可取值： "instant" - 表示立即生效，即调用overrideUrlLoading方法后立即生效； "touchstart" - 表示用户操作Webview窗口（触发touchstart事件）后生效，如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。默认值为"instant"。 </li><li>mode: (String 类型 )拦截模式 可取值： "allow"表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调； "reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。默认值为"reject"。 </li><li>match: (String 类型 )区配是否需要处理的URL请求 支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。 </li><li>exclude: (String 类型 )排除拦截处理请求类型 不拦截处理指定类型的URL请求，直接使用系统默认处理逻辑。可取值： "none"表示不排除任何URL请求（即拦截处理所有URL请求）； "redirect"表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）。默认值为"none"。 </li></ul>
<h1 style="margin-left:0;">WebviewListenResourceOptions</h1>
监听Webview窗口资源加载的属性
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>match: (String 类型 )区配是否需要处理的URL资源 支持正则表达式，默认值为对所有URL资源请求生效（相当于正则表达式“.*”）。如果Webview加载的资源区配条件，则触发回调事件。 </li></ul>
<h1 style="margin-left:0;">BounceEventCallback</h1>
Webview窗口回弹事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onEvent( Event event ){
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 Webview窗口回弹事件触发时事件数据 Event对象包含以下属性： status - 表示回弹位置状态，设置顶部下拉回弹changeoffset属性后可取值："beforeChangeOffset"表示可继续拖拽，此时松开拖拽窗口会回弹到其初始位置； "afterChangeOffset"表示回弹可停靠，此时松开拖拽窗口会回弹到停靠位置； "dragEndAfterChangeOffset"表示已进松开拖拽，并且窗口回弹到停靠位置。设置左右侧侧滑slideoffset属性后可取值："beforeSlide"表示未侧滑状态；"afterSlide"表示已侧滑状态。 offset - 表示回弹方向，可取值："left"表示左侧滑动，"right"表示右侧滑动，"top"表示上侧下拉滑动。 target - 保存触发回弹此事件的Webview窗口对象。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
ws.addEventListener('dragBounce', onPullStateChange, false);
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 下拉状态改变
function onPullStateChange(e){
switch(e.status){
case 'beforeChangeOffset':
console.log('顶部回弹：可继续往下拖拽');
break;
case 'afterChangeOffset':
console.log('顶部回弹：松开会重置回弹位置');
break;
case 'dragEndAfterChangeOffset':
console.log('顶部回弹：松开停靠回弹');
break;
default:
break;
}
}
// 重置窗口回弹位置
function resetBounce(){
ws.resetBounce();
}
</script>
</head>
<body style="text-align:center;">
 
设置Webview窗口的回弹效果 
回弹后显示停靠到44px的位置 
<button onclick="resetBounce()">重置回弹位置</button>
 
*暂仅支持顶部的回弹效果*
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">EventCallback</h1>
Webview窗口事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onEvent(Event event){
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Object ) 可选 Webview窗口事件触发时事件数据 回调参数包含以下属性： target：保存触发此事件的Webview窗口对象； progress：保存窗口页面加载进度，仅"progressChanged"事件时有此属性。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口页面加载完成事件
function eventTest() {
// 打开新窗口
nw=plus.webview.create('', '', {top:'46px',bottom:'0px');
nw.addEventListener('loaded', function(e){
console.log('Loaded: '+e.target.getURL());
}, false);
nw.show(); // 显示窗口
}
</script>
</head>
<body>
Webview窗口页面加载完成事件
<button onclick="eventTest()">start</button>
<button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loaded</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">PopGestureCallback</h1>
Webview窗口侧滑事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onEvent( PopGestureEvent event ){
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.PopGestureEvent">PopGestureEvent</a> ) 必选 Webview窗口事件触发时事件数据 PopGestureEvent对象包含以下属性： target：保存侧滑操作的Webview窗口对象。 type：保存侧滑事件类型，"start"表示开始侧滑返回，用户按下滑动时触发； “end”表示结束侧滑返回，用户松手时触发； “move"表示侧滑返回动作结束，用户移动侧滑时触发。 result：保存操作结果，仅在e.type为end时有效，boolean类型， true表示侧滑返回执行，false表示侧滑返回取消；否则为undefined。 progress：保存侧滑位置，Number类型，可带小数点，范围为0-100。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
createWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听侧滑返回事件
function createWebview(){
// 打开新窗口
nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'100px',bottom:'0px',popGesture:'hide'});
nw.addEventListener('popGesture', function(e){
poplog.innerText='popGesture: '+e.type+','+e.result+','+e.progress;
}, false);
}
// 显示Webview窗口
function showWebview(){
nw.show('slide-in-right');
}
// 隐藏Webview窗口
function hideWebview(){
nw.hide();
}
// 关闭窗口
function closeWebview(){
nw.close();
plus.webview.currentWebview().close();
}
</script>
</head>
<body>
Webview窗口侧滑返回事件
<button onclick="closeWebview()">Close</button>
<button onclick="showWebview()">Show</button>
<button onclick="hideWebview()">Hide</button>
<div id="poplog"></div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">HistoryQueryCallback</h1>
历史记录查询的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onHistoryQuery( Event event ) {
// Event handled code.
var canBack = event.canBack;
var canForward = event.canForward;
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 查询Webview窗口历史记录操作事件数据 可通过event的canBack属性获取Webview窗口是否可后退，通过event的canForward属性获取Webview窗口是否可前进。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">ListenResourceLoadingCallback</h1>
Webview窗口加载资源事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onLoadingResource( Event event ) {
// Event handled code.
var url = event.url;
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 Webview窗口加载资源事件数据 可通过event的url属性获取要加载的资源URL地址。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">OverrideUrlLoadingCallback</h1>
Webview窗口拦截URL链接跳转的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onOverride( Event event ) {
// Event handled code.
var url = event.url;
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 Webview窗口拦截URL跳转事件数据 可通过event的url属性获取拦截的URL地址。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">TitleUpdateCallback</h1>
Webview窗口加载页面标题更新的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onQuery( Event event ) {
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 Webview窗口加载页面标题更新事件数据 可通过event的title属性获取Webview窗口的标题。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">WebviewAnimationCallback</h1>
Webview窗口组合动画回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onAnimationFinished( Event event ) {
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 Webview窗口动画完成事件数据 可通过event的id属性获取对应Webview窗口的标识，如果操作的窗口未设置id，则返回空字符串； 可通过event的target属性获取对应Webview窗口对象。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script 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%',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));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 窗口组合动画
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));
});
}
</script>
</head>
<body>
 
<button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
 
在新窗口中可以右滑返回（新窗口移动到屏幕外）
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewDragCallback</h1>
Webview窗口滑屏操作事件回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onDrag( Event event ) {
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
在窗口开始滑动、滑动过程、滑动结束时触发，其中滑动过程中会触发多次，滑动过程中触发次数由WebviewDragOptions对象的callbackStep决定。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragEvent">WebviewDragEvent</a> ) 必选 Webview窗口滑动操作事件数据 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webview Example</title>
<script 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);
}
</script>
</head>
<body>
左滑可打开新页面
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewCustomButtonCallback</h1>
Webview窗口标题栏上自定义按钮点击事件回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onClicked(Event event){
// Event handled code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用户点击自定义按钮时触发。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( Event ) 必选 点击事件触发时的数据 Event对象包含以下属性： target：触发此事件的WebviewBackButtonStyles对象。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">SuccessCallback</h1>
Webview窗口操作成功回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onSuccess(){
// Success code.
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Webview窗口业务操作成功后触发回调函数。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">ErrorCallback</h1>
Webview窗口操作失败回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onError(error){
// Handle the error
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>error: ( Exception ) 可选 Webview窗口操作错误信息 可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<div style="margin-left:0;"></div>
</div>
<div style="margin-left:auto;">

</div>
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下） ...