宜信同城网交流论坛技术专版技术专区Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中1） ...setRenderedEventOptions 设置Webview窗口rendered事件参数 void wobj.setRenderedEventOptions(options); ...

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

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

<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">
 <h1 style="margin-left:0;">setRenderedEventOptions</h1>
设置Webview窗口rendered事件参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setRenderedEventOptions(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
可设置页面渲染完成的判断标准，如判断页面顶部区域、中间区域、或底部区域。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewRenderedEventOptions">WebviewRenderedEventOptions</a> ) 必选 Webview窗口rendered事件参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</li></ul>
<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窗口监听rendering事件
function createWebview(){
// 打开新窗口
nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
nw.addEventListener('rendered', function(e){
console.log('Webview rendered');
}, false);
nw.setRenderedEventOptions({type:'bottom',interval:100});// 检查底部区域是否渲染完成，每隔100毫秒检查一次
nw.show();
}
</script>
</head>
<body>
Webview窗口渲染完成事件
<button onclick="createWebview()">Show</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setSoftinputTemporary</h1>
临时设置弹出系统软键盘样式
<h2 style="margin-left:.8em;">说明：</h2>
仅生效一次，设置后第一次弹出软键盘时生效。
<h2 style="margin-left:.8em;">参数：</h2>

<ul><li>mode: ( String ) 可选 软键盘模式 </li><li>position: ( Object ) 可选 触发弹出软键盘的编辑框位置信息 支持设置以下属性： top - 编辑框距离窗口顶部的距离； height - 编辑框的高度。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setStyle</h1>
设置Webview窗口的样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setStyle( styles );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
更新Webview窗口的样式，如窗口位置、大小、背景色等。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles">WebviewStyles</a> ) 必选 要设置的窗口样式 </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,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窗口的样式
function updateStyle(){
embed.setStyle({top:'92px'});
}
</script>
</head>
<body>
设置Webview窗口的样式
<button onclick="updateStyle()">setStyle</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setShareOptions</h1>
设置Webview窗口的分享参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setShareOptions(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在流应用环境（流应用/5+浏览器）中有效：用户点击流应用环境的分享按钮时使用的参数，如设置分享的标题、链接地址等。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewShareOptions">WebviewShareOptions</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;
// 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);
}
</script>
</head>
<body style="text-align:center;">
设置Webview窗口的分享参数
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setTitleNViewButtonBadge</h1>
设置标题栏上按钮的角标
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setTitleNViewButtonBadge(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
options参数为json类型，包含以下属性：
<ul><li>index: ( Number ) 必选 按钮的索引值 此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。 </li><li>text: ( String ) 必选 角标文本内容 最多显示3个字符，超过则显示...。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setTitleNViewButtonStyle</h1>
设置标题栏上按钮的样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setTitleNViewButtonStyle(index, styles);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>index: ( Number ) 必选 按钮的索引值 此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。 </li><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewButtonStyles">WebviewTitleNViewButtonStyles</a> ) 必选 要设置的按钮样式 仅更新新设置的属性值，之前设置的属性保持不变。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setTitleNViewSearchInputFocus</h1>
设置标题栏上输入框是否获取输入焦点
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setTitleNViewSearchInputFocus(focus);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>focus: ( Boolean ) 必选 是否获取输入焦点 true表示获取输入焦点（打开软键盘），false表示失去输入焦点（关闭软键盘）。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setTitleNViewSearchInputText</h1>
设置标题栏上输入框的内容
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setTitleNViewSearchInputText(text);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
如果要清空用户输入的内容，可以设置为空字符串。仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>text: ( String ) 必选 要设置的文本内容 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">setVisible</h1>
设置Webview窗口是否可见
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setVisible( visible );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
修改窗口是否可见并不影响窗口的显示栈顺序，窗口显示与隐藏也不会有动画效果。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>visible: ( Boolean ) 必选 设置Webview窗口是否可见，true表示可见，false表示不可见 </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,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窗口是否可见
function setVisible(v) {
embed.setVisible(v);
}
</script>
</head>
<body>
设置Webview窗口是否可见 
<button onclick="setVisible(true)">可见</button> 
<button onclick="setVisible(false)">不可见</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">show</h1>
显示Webview窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.show( aniShow, duration, showedCB, extras );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
当调用plus.webview.create方法创建Webview窗口后，需要调用其show方法才能显示，并可设置窗口显示动画及动画时间。 Webview窗口被隐藏后也可调用此方法来重新显示。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>aniShow: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeShow">AnimationTypeShow</a> ) 可选 Webview窗口显示动画类型 如果没有指定窗口动画类型，则使用默认值“none”，即无动画。 </li><li>duration: ( Number ) 可选 Webview窗口显示动画持续时间 单位为ms，默认使用动画类型相对应的默认时间。 </li><li>showedCB: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.SuccessCallback">SuccessCallback</a> ) 可选 Webview窗口显示完成的回调函数 当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。 </li><li>extras: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewExtraOptions">WebviewExtraOptions</a> ) 可选 显示Webview窗口扩展参数 可用于指定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,embed=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 创建并显示Webview窗口
function showWebview(){
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.show('slide-in-right', 300);
}
</script>
</head>
<body>
显示Webview窗口
<button onclick="showWebview()">show</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">showBehind</h1>
在指定Webview窗口后显示
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.showBehind( webview );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
当调用plus.webview.create方法创建Webview窗口后，可调用其showBehind方法显示在指定Webview窗口之后。这种显示方式不会出现动画效果，当指定的Webview窗口关闭后，则自身窗口自动显示出来。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>webview: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a> ) 可选 指定的Webview窗口对象 如果没有指定Webview窗口对象或指定的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,embed=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 创建并显示在当前Webview窗口之后
function showWebview(){
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.showBehind(ws); // 在当前窗口之后显示
}
</script>
</head>
<body>
在指定Webview窗口后显示
<button onclick="showWebview()">show</button> 
<button onclick="ws.close()">Close</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">showTitleNViewButtonRedDot</h1>
设置标题栏上按钮的红点
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.showTitleNViewButtonRedDot(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。注意：设置显示按钮的角标后红点不显示。
<h2 style="margin-left:.8em;">参数：</h2>
options参数为json类型，包含以下属性：
<ul><li>index: ( Number ) 必选 按钮的索引值 此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">stop</h1>
停止加载HTML页面内容
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.stop();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
触发Webview窗口停止加载页面内容，如果已经加载部分内容则显示部分内容，如果加载完成则显示全部内容。
<h2 style="margin-left:.8em;">参数：</h2>
无
<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,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);
}
// 停止加载HTML页面内容
function stopWebview(){
embed.stop();
}
</script>
</head>
<body>
停止加载HTML页面内容
<button onclick="stopWebview()">stop</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">updateSubNViews</h1>
更新Webview窗口的原生子View控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.updateSubNViews(Array[WebviewSubNViewStyles] styles);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
通过WebviewSubNViewStyles中的id属性值匹配子View控件更新绘制内容，如果没有查找到对应id的子View控件则忽略。此操作仅更新子View控件上绘制的内容，不会添加或删除原生子View控件对象。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>styles: ( Array[<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewSubNViewStyles">WebviewSubNViewStyles</a>] ) 必选 要更新的子View控件样式 不包括不需要更新的子View控件样式。 </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">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Webview Example</title>
<script 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;
// 创建带原生子View控件的Webview窗口 
function createWebview(){
var styles = {
top:'100px',
bottom:'0px',
popGesture:'hide',
subNViews:[{
id:'subnview1',
styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
tags:[{tag:'font',id:'font',text:'原生子View控件',textStyles:{size:'18px'}}]
}]
};
nw||(nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles),
nw.addEventListener('close', function(){
nw=null;
}, false));
nw.show('pop-in');
}
// 更新原生子View控件
function updateSubNViews(){
nw.updateSubNViews([{
id:'subnview1',
tags:[{tag:'font',id:'font',text:'更新后的原生子View控件',textStyles:{size:'18px'}}]
}]);
}
</script>
</head>
<body>
Webview窗口的子View控件 
<button onclick="createWebview()">Create</button>
<button onclick="updateSubNViews()">Update</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onclose</h1>
Webview窗口关闭事件
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.EventCallback">EventCallback</a> 类型
当Webview窗口关闭时触发此事件，类型为EventCallback。
<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,embed=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.onclose=embedClose;
ws.append(embed);
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 页面关闭事件回调函数
function embedClose(e){
alert( "Closed!" );
}
</script>
</head>
<body>
Webview窗口关闭事件
<button onclick="embed.close()">onclose</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onerror</h1>
Webview窗口错误事件
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.EventCallback">EventCallback</a> 类型
当Webview窗口加载错误时触发此事件，类型为EventCallback。
<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,embed=null;
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.onerror=embedError;
ws.append(embed);
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 页面错误事件回调函数
function embedError(e){
alert('Error!');
}
</script>
</head>
<body>
Webview窗口错误事件
<button onclick="embed.loadData('<xml>Not html</xml>')">onerror</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onloaded</h1>
Webview窗口页面加载完成事件
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.EventCallback">EventCallback</a> 类型
当Webview窗口页面加载完成时触发此事件，类型为EventCallback。
<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 embed=null;
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.onloaded=embedLoaded;
embed.show();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 页面加载完成事件回调函数
function embedLoaded(e){
plus.nativeUI.alert('Loaded!');
}
</script>
</head>
<body>
Webview窗口页面加载完成事件
<button onclick="embed.loadURL('http://m.weibo.cn')">onloaded</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">onloading</h1>
Webview窗口页面开始加载事件
<h2 style="margin-left:.8em;">说明：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.EventCallback">EventCallback</a> 类型
当Webview窗口开始加载新页面时触发此事件，类型为EventCallback。
<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 embed=null;
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.onloading=embedLoading;
embed.show();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 页面开始加载事件回调函数
function embedLoading(e){
plus.nativeUI.alert('Loading!');
}
</script>
</head>
<body>
Webview窗口页面开始加载事件
<button onclick="embed.loadURL('http://m.weibo.cn')">onloading</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewAnimationOptions</h1>
Webview窗口动画参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface WebviewAnimationOptions {
attribute WebviewObject view;
attribute WebviewAnimationStyles styles;
attribute String action;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于指定动画目标窗口，起始位置、目标位置等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>view: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a> | String | <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a> 类型 )执行动画的窗口对象 可取值Webview窗口对象、Webview窗口的id（String类型）、原生View窗口对象（plus.nativeObj.View）。 </li><li>styles: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewAnimationStyles">WebviewAnimationStyles</a> 类型 )动画样式 用于指定动画窗口的起始位置，目标位置等。 </li><li>action: (String 类型 )窗口动画完成后的行为 可取值： "none" - 动画完成后不做任何操作； "hide" - 动画完成后隐藏窗口； "close" - 动画完成后关闭窗口。默认值为"none"。 </li></ul>
<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;">WebviewAnimationStyles</h1>
Webview窗口动画样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface WebviewAnimationStyles {
attribute String fromLeft;
attribute String toLeft;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于指定动画窗口的起始位置、目标位置等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>fromLeft: (String 类型 )画窗口的起始左侧位置 支持百分比、像素值，默认值为当前窗口的位置。 </li><li>toLeft: (String 类型 )画窗口的目标左侧位置 持百分比、像素值。注意：如果设置的位置与起始位置一直，则无动画效果。 </li></ul>
<h1 style="margin-left:0;">WebviewBounceStyle</h1>
Webview窗口回弹样式
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>position: (JSON 类型 )Webview窗口支持回弹效果的方向 可通过此参数设置开启Webview哪个方向支持回弹效果。支持以下属性： top：表示窗口顶部支持回弹效果； left：表示窗口左侧支持回弹效果； right：表示窗口右侧支持回弹效果； bottom：表示窗口底部支持回弹效果。 **目前仅支持top属性** 属性值：用于指定可拖拽的范围，可取百分比，如"10%"；像素值，如"100px"；自动计算值，如"auto"；无回弹效果值，如"none"； </li><li>changeoffset: (JSON 类型 )Webview窗口回弹时停靠的位置 开启窗口回弹效果后，当窗口中展现的内容滚动到头（顶部或底部）时，再拖拽时窗口整体内容将跟随移动，拖拽过程中将触发"dragBounce"事件，松开后自动回弹到停靠位置。支持以下属性： top：表示窗口顶部回弹时停靠的位置。属性值：用于指定窗口回弹的位置，可取百分比，如"5%"；像素值，如"100px"；自动计算值，如"auto"，默认为可拖拽的范围值的一半； </li><li>slideoffset: (JSON 类型 )Webview窗口侧滑时停靠的位置 开启窗口回弹效果后，当窗口中展现的内容滚动到头（左侧或右侧）时，在拖拽时窗口整体内容将跟随移动，松开后自动停靠的侧滑位置，并触发"slideBounce"事件。支持以下属性： left：表示窗口左侧侧滑的位置； right：表示窗口右侧侧滑的位置。属性值：用于指定滑动后停靠的距离，可取百分比（left/right相对于窗口的宽度，top/bottom相对于窗口的高度），如"30%"；像素值，如"100px"；自动计算值，为可拖拽范围，如"auto"。 </li><li>offset: (JSON 类型 )Webview窗口拖拽偏移的位置 开启窗口回弹效果后，可以通过此属性值来主动设置拖拽的偏移位置，与手动操作拖拽至此偏移位置松开后的逻辑一致。支持以下属性： top：表示窗口顶部偏移的位置； left：表示窗口左侧偏移的位置； right：表示窗口右侧偏移的位置； bottom：表示窗口底部偏移的位置。属性值：用于指定偏移的位置，可取百分比，如"5%"；像素值，如"100px"；有效值范围为0到position属性定义的位置。 </li><li>preventTouchEvent: (Boolean 类型 )Webview窗口是否阻止touch事件传递给DOM元素 设置为true表示阻止touch事件，设置为false表示不阻止touch事件。当开启侧滑功能（左侧滑和右侧滑）时默认值为true，否则为false。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.3+ (支持) : 由于Touch事件存在冲突，如果Webview使用侧滑功能，需要将Webview设置为阻止touch事件传递才能触发。当html页面内容需要处理横向滚动时并且也需要侧滑效果时，需初始化时设置不阻止touch事件传递：webview.setBounce({position:{left:'100px'},solideoffset:{left:'auto'},preventTouchEvent:false});。当操作非横向滚动元素时及时动态设置阻止touch事件传递以触发侧滑效果：webview.setBounce({preventTouchEvent:true});。 </li><li>iOS - 5.1+ (不支持) : Touch事件不存在冲突，不支持此功能。 </li></ul></li></ul>
<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'}});
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 重置窗口回弹位置
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;">WebviewContentAnimationOptions</h1>
Webview窗口内容动画参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface WebviewAnimationOptions {
attribute String type;
attribute Number duration;
attribute Number frames;
attribute Rect region;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
指定动画的类型、持续时间等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>type: (String 类型 )动画类型 可取值："shrink" - 从上到下分块收缩清除窗口动画。 </li><li>duration: (Number 类型 )动画持续时间 单位为毫秒，默认值为200ms。 </li><li>frames: (Number 类型 )动画帧数 必须为大于0的整数，默认值为12。 </li><li>region: (json 类型 )动画作用区域 支持以下属性： top - 区域距离控件顶部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'； bottom - 区域距离控件底部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'； left - 区域距离控件左侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'； right - 区域距离控件右侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'。如“{top:'44px',bottom:'48px'}”。 </li></ul>
<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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Webview Example</title>
<script type="text/javascript">
var wv=null;
// H5 plus事件处理
function plusReady(){
wv = plus.webview.currentWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// Webview窗口动画 
function animateWebview(){
wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
wv.restore(); // 内容动画结束后可调用此动画恢复显示内容
});
}
</script>
</head>
<body>
Webview窗口内容动画 
<button onclick="animateWebview()">内容动画</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewDock</h1>
原生控件在窗口中停靠的方式
<h2 style="margin-left:.8em;">常量：</h2>
<ul><li>"top": (String 类型 )控件停靠则页面顶部</li><li>"bottom": (String 类型 )控件停靠在页面底部</li><li>"right": (String 类型 )控件停靠在页面右侧</li><li>"left": (String 类型 )控件停靠在页面左侧</li></ul>
<h1 style="margin-left:0;">WebviewDragEvent</h1>
Webview窗口滑动事件数据
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>direction: (String 类型 )手势类型 可取值： "rtl" - 从右向左滑动手势； "left" - 向左滑动手势，与rtl一致； "ltr" - 从左向右滑动手势； "right" - 向右滑动手势，与ltr一致。 </li><li>type: (String 类型 )窗口滑动类型 可取值： "start" - 表示开始滑动操作； "move" - 表示正在滑动； "end" - 表示滑动操作结束。 </li><li>result: (String 类型 )窗口滑动结果 可取值： "true" - 表示滑动操作成功； "false" - 表示滑动操作失败（恢复到滑动前的状态）； "undefined" - 无状态值（当type值为"end"时返回此值）。 </li><li>id: (String 类型 )当前操作窗口标识 当type值为"start"/"move"时，保存当前操作窗口（或View控件）的标识； 当type值为"end"时保存滑动操作后显示窗口（或View控件）的标识（即result值为"true"则认为关联窗口显示，result值为false则认为主窗口显示）。 </li><li>otherId: (String 类型 )关联窗口标识 滑动操作关联窗口（或View控件）的标识。 </li><li>targetId: (String 类型 )主窗口标识 滑动操作主窗口（或View控件）的标识。 </li><li>progress: (Number 类型 )滑动进度 滑动进度位置信息，取值范围为0-100，如20表示滑动了总距离的20%： 当type值为"start"时progress值为0； 当type值为"end"时如果result为true则progress值为0，如果result为false则progress值为100； 当type值为"move"时，保存当前滑动的进度信息（注：多次触发move事件）。 </li></ul>
<h1 style="margin-left:0;">WebviewDragOptions</h1>
窗口手势操作参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>callbackStep: (Number 类型 )滑屏操作回调事件触发步长 用于设置滑屏回调事件触发频率，取值范围为1-100，值越小触发频率越高，值越大触发频率越小，默认值为20。如设置值为20，则表示滑屏操作移动距离超过可移动范围的20%则触发一次回调事件，可通过回调函数参数（WebviewDragEvent）的progress属性获取。注意：触发频率过大会影响效率，开发者需谨慎设置此值。 </li><li>direction: (String 类型 )设置的手势类型 可取值： 可取值： "rtl" - 从右向左滑动手势； "left" - 向左滑动手势，与rtl一致； "ltr" - 从左向右滑动手势； "right" - 向右滑动手势，与ltr一致。 </li><li>moveMode: (String 类型 )滑动手势模式 可取值： "followFinger" - 当前Webview窗口跟随手指滑动； "silent" - 当前Webview窗口不跟随手指滑动； "bounce" - 当前Webview窗口自动回弹（松手后窗口恢复到拖动前的位置）,通常可通过设置此模式来实现Tab项无法继续滑动切换自动回弹效果。 </li></ul>
<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;">WebviewDragOtherViewOptions</h1>
手势操作关联对象参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>view: (String | <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.Webview">Webview</a> | <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a> 类型 )手势关联对象 可取值Webview窗口的id（String类型）、Webview窗口对象、原生View窗口对象（plus.nativeObj.View）。 </li><li>moveMode: (String 类型 )滑动模式 可取值： "follow" - 同步跟随主Webview窗口滑动； "silent" - 不跟随主Webview窗口滑动。 </li></ul>
<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;">WebviewDrawOptions</h1>
截屏绘制操作参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>bit: (String 类型 )截屏图片的位深 可取值： "RGB565" - RGB565彩色模式,一个像素占两个字节； "ARGB" - ARGB彩色模式,保存透明度信息。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 默认使用"RGB565"模式。注意："ARGB"模式在Android4.4之前一个像素占用两个字节，在Android4.4之后一个像素占用4个字节。由于占用内存较大，开发者需谨慎使用。 </li><li>iOS - ALL (不支持) : 忽略此属性，使用"ARGB"模式（一个像素占用4个字节）。 </li></ul></li><li>check: (Boolean 类型 )是否检测截屏图片是否为空白 可取值： true - 表示检测到截屏到空白图片时认为操作失败（触发错误回调函数）； false - 表示不检测，即使为空白图片仍然返回成功。默认值为false。 </li><li>clip: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect">plus.nativeObj.Rect</a> 类型 )设置截屏区域 相对于Webview窗口的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。 </li><li>checkKeyboard: (Boolean 类型 )是否检测当前是否弹出软键盘 可取值： true - 表示检测到弹出软键盘是认为截屏操作失败（触发错误回调函数）； false - 表示不检测软键盘状态，直接截屏。默认值为false。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 当弹出软键盘时，Webview窗口大小会调整（保证编辑区域可视）。此时截屏获取的图片为调整后的窗口大小。 </li><li>iOS - ALL (不支持) : 忽略此属性，软键盘弹出时Webview窗口大小不会调整，仍然截屏全屏。 </li></ul></li></ul>
<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();
}
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));
},{check:true, // 设置为检测白屏
clip:{top:'50%',left:'0px',height:'50%',width:'100%'} // 设置截屏区域
});
}
</script>
</head>
<body>
截屏绘制Webview窗口 
<button onclick="captureWebview()">Draw</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewFavoriteOptions</h1>
窗口收藏参数
<h2 style="margin-left:.8em;">说明：</h2>
在流应用环境中调用收藏功能时使用的参数。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>icon: (String 类型 )收藏时显示的图标 在收藏列表中显示的图标，默认使用应用图标。 </li><li>title: (String 类型 )收藏时显示的标题 在收藏列表中显示的标题字符串。 </li><li>href: (String 类型 )收藏的页面地址 必须是网络地址。 </li></ul>
<h1 style="margin-left:0;">WebviewLoadDataOptions</h1>
创建加载HTML数据参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>baseURL: (String 类型 )页面的Base URL</li><li>mimeType: (String 类型 )HTML数据的数据类型 默认值为"text/html"。 </li><li>encoding: (String 类型 )HTML数据的编码类型 默认值为"utf-8"。 </li></ul>
<h1 style="margin-left:0;">WebviewShareOptions</h1>
窗口的分享参数
<h2 style="margin-left:.8em;">说明：</h2>
在流应用环境中调用分享功能时使用的参数。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>icon: (String 类型 )分享时使用的图标 默认使用应用图标。 </li><li>title: (String 类型 )分享时使用的标题</li><li>href: (String 类型 )分享时使用的链接地址 必须是网络地址。 </li></ul>
<h1 style="margin-left:0;">WebviewSubNViewStyles</h1>
窗口原生子View控件样式
<h2 style="margin-left:.8em;">说明：</h2>
可设置原生控件的标识、大小、位置以及绘制的内容等。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>id: (String 类型 )原生子View控件的标识 可通过plus.nativeObj.View.getViewById(id)方法传入此标识来获取子View控件对象。 </li><li>type: (String 类型 )原生子View控件类型 可取值： "NView" - 原生子View控件（plus.nativeObj.NView）； "ImageSlider" - 原生图片轮播控件（plus.nativeObj.ImageSlider）。默认值为"NView"。 </li><li>styles: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewStyles">plus.nativeObj.ViewStyles</a> | <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSliderStyles">plus.nativeObj.ImageSliderStyles</a> 类型 )原生子View控件的样式 可设置原生控件的位置、大小等信息。 </li><li>tags: (Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles">plus.nativeObj.ViewDrawTagStyles</a>] 类型 )原生子View控件初始绘制内容 可设置绘制图片、矩形区域、文本等内容。 </li></ul>
<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">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Webview Example</title>
<script 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;
// 创建带原生子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'}}]
}]});
nw.addEventListener('close', function(){
nw=null;
}, false);
nw.show('pop-in');
}
</script>
</head>
<body>
Webview窗口的子View控件 
<button onclick="createWebview()">Create</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewTitleNViewStyles</h1>
窗口标题栏控件样式
<h2 style="margin-left:.8em;">说明：</h2>
标题栏控件固定高度为44px,可通过Webview窗口对象的getTitleNView方法获取标题栏原生控件对象<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a>，调用其方法绘制自定义内容。可以通过WebviewObject对象的setStyle方法传入titleNView属性更新样式，如wobj.setStyle({titleNView:{titleColor:'#FF0000'}})。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>autoBackButton: (Boolean 类型 )标题栏控件是否显示左侧返回按钮 可取值： "true" - 显示返回按钮； "false" - 不显示返回按钮。默认值为"false"。返回按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。点击返回按钮的逻辑与按下系统返回键逻辑一致。 </li><li>backButton: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewTitleNViewBackButtonStyles">WebviewTitleNViewBackButtonStyles</a> 类型 )标题栏控件的返回按钮的样式 当autoBackButton设置为true时生效。通过此属性可自定义返回按钮样式，如图标大小、红点、角标、标题等。 注意：HBuilderX2.6.3+版本支持。 </li><li>backgroundColor: (String 类型 )标题栏控件的背景颜色 颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景； "rgba(R,G,B,A)"，如rgba(255,0,0,0.5)表示半透明红色背景。默认值为"#F7F7F7"。 </li><li>backgroundImage: (String 类型 )设置标题栏的背景图 支持以下类型： 背景图片路径 - 如"./img/t.png"，仅支持本地文件路径， 相对路径，相对于当前页面的host位置，根据实际标题栏宽高拉伸绘制； 渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”， 其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变， “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角。默认无渐变效果，设置错误格式数据也无渐变效果。 注意：HBuilderX2.6.3+版本支持。 </li><li>backgroundRepeat: (String 类型 )设置标题栏的背景图平铺方式 仅在backgroundImage设置为图片路径时有效。可取值：
<ul style="margin-left:2em;"><li>"repeat" - 背景图片在垂直方向和水平方向平铺</li><li>"repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸</li><li>"repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸</li><li>"no-repeat" - 背景图片在垂直方向和水平方向都拉伸</li></ul> 默认值为"no-repeat"。 注意：HBuilderX2.6.3+版本支持。 </li><li>blurEffect: (String 类型 )模糊（毛玻璃）效果 此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。可取值：
<ul style="margin-left:2em;"><li>"dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果</li><li>"extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果</li><li>"light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果</li><li>"none" - 无模糊效果</li></ul> HBuilderX2.4.3+版本支持，默认值为"none"。 注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持) : 忽略此属性。 </li><li>iOS - 8.0+ (支持)</li></ul></li><li>buttons: (Array[<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewTitleNViewButtonStyles">WebviewTitleNViewButtonStyles</a>] 类型 )标题栏上的自定义按钮 创建的自定义按钮数目不限制，实际应用中建议最多设置4个按钮（包括左侧返回按钮）。注意：此属性不支持动态修改，仅在创建titleNView时设置有效。 </li><li>coverage: (String 类型 )标题栏控件变化作用范围 仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。当页面滚动到指定偏移量时标题栏背景变为完全不透明。支持百分比、像素值，默认为'132px'。 </li><li>homeButton: (Boolean 类型 )标题栏控件是否显示Home按钮 可取值： "true" - 显示Home按钮； "false" - 不显示Home按钮。默认值为"false"。 Home按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。点击Home按钮的逻辑为关闭所有非首页窗口，显示首页窗口。 </li><li>padding: (String 类型 )内边距 标题栏左右的内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"。 </li><li>padding-right: (String 类型 )右内边距 标题栏右侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"，优先级padding-right > padding。 </li><li>padding-left: (String 类型 )左内边距 标题栏左侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"，优先级padding-left > padding。 </li><li>progress: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewProgressStyles">WebviewProgressStyles</a> 类型 )标题栏控件的进度条样式 设置此属性则在标题栏控件的底部显示进度条，可配置进度条颜色值即高度。设置此属性值为undefined或null则隐藏进度条。默认不显示底部进度条。注意：此属性将废弃，推荐使用WebviewStyles的progress。 </li><li>redDotColor: (String 类型 )标题栏控件上按钮的红点颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为红色。 </li><li>searchInput: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewTitleNViewSearchInputStyles">WebviewTitleNViewSearchInputStyles</a> 类型 )标题栏上的搜索框样式</li><li>splitLine: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122841157#plus.webview.WebviewSplitLineStyles">WebviewSplitLineStyles</a> 类型 )标题栏的底部分割线 设置此属性则在标题栏控件的底部显示分割线，可配置颜色值及高度。设置此属性值为undefined或null则隐藏分割线。默认不显示底部分割线。 注意：HBuilderX2.6.6+版本支持。 </li><li>subtitleColor: (String 类型 )副标题文字颜色 颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。默认值与主标题文字颜色一致。 注意：HBuilderX2.6.6+版本支持。 </li><li>subtitleSize: (String 类型 )副标题文字字体大小 字体大小单位为像素，如"14px"表示字体大小为14像素，默认值为12像素。 注意：HBuilderX2.6.6+版本支持。 </li><li>subtitleOverflow: (String 类型 )标题文字超出显示区域时处理方式 可取值：
<ul style="margin-left:2em;"><li>"clip" - 超出显示区域时内容裁剪</li><li>"ellipsis" - 超出显示区域时尾部显示省略标记（...）</li></ul> 默认值为"ellipsis"。 注意：HBuilderX2.6.6+版本支持。 </li><li>subtitleText: (String 类型 )副标题文字内容 设置副标后将显示两行标题，副标显示在主标题（titleText）下方。 注意：HBuilderX2.6.6+版本支持。 </li><li>tags: (Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles">plus.nativeObj.ViewDrawTagStyles</a>] 类型 )标题栏上初始自定义绘制内容 可用于设置自定义绘制图片、矩形区域、文本等内容。注意：此属性不支持动态修改，仅在创建titleNView时设置有效，如果需要更新绘制内容可根据tags的id调用draw方法操作。 </li><li>titleAlign: (String 类型 )标题对齐方式 可取值：
<ul style="margin-left:2em;"><li>"center"-居中对齐</li><li>"left"-居左对齐</li><li>"auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐）</li></ul> 注意：HBuilderX2.6.3+版本支持。 </li><li>titleColor: (String 类型 )标题文字颜色 颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。 type=transparent时默认值为"#FFFFFF"，其它情况默认值为"#000000"。 </li><li>titleIcon: (String 类型 )标题图标 图标路径如"./img/t.png"，相对路径，相对于当前页面的host位置，默认宽高为逻辑像素值"34px"。 HBuilderX2.6.9+版本支持网络路径（http/https开头的url链接）； HBuilderX2.6.12+版本支持base64图片。 注意：要求图片的宽高相同。 </li><li>titleIconRadius: (String 类型 )标题图标圆角 取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。默认值为无圆角。 </li><li>titleIconWidth: (String 类型 )标题图标宽度 取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示图标宽度为10像素，图标高度会自动与图标宽度保持一致，默认值为"34px"。 HBuilderX2.7.6+版本支持设置图标宽度。 注意：图标在标题栏垂直居中。 </li><li>titleOverflow: (String 类型 )标题文字超出显示区域时处理方式 可取值： "clip" - 超出显示区域时内容裁剪； "ellipsis" - 超出显示区域时尾部显示省略标记（...）。默认值为"ellipsis"。 </li><li>titleSize: (String 类型 )标题文字字体大小 字体大小单位为像素，如"20px"表示字体大小为20像素，默认值为17像素。 </li><li>titleText: (String 类型 )标题文字内容 在标题栏控件居中（水平和垂直）显示，左右边距为88px，如果文本过长则尾部裁剪（加三个点"..."）显示。当不设置titleText属性或属性值为undefined/null时，使用当前Webview窗口加载页面的标题，并自动同步更新页面的标题。 </li><li>type: (String 类型 )标题栏控件样式 可取值：
<ul style="margin-left:2em;"><li>"default" - 默认样式，顶部停靠显示，挤压Webview页面内容显示区域</li><li>"transparent" - 透明样式，顶部沉浸式显示覆盖Webview页面内容，标题栏上内容（除按钮外）全部透明，当页面滚动时透明度逐渐变化，直到不透明显示</li><li>"float" - 悬浮样式，顶部悬浮显示，标题栏覆盖在Webview上，此时应该设置标题栏背景颜色（backgroundColor）为半透明才能透视到覆盖Webview的内容</li></ul> 默认值为"default"。 注意：此属性不支持动态更新。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 带标题栏控件的Webview窗口
var webview = null;
function titleNViewWebview() {
webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {
titleNView: {
backgroundColor: '#D74B28',
titleText: '标题栏文字',
titleColor: '#CCCCCC',
autoBackButton: true
}
});
webview.addEventListener('close', function(){
webview=null;
});
webview.addEventListener('titleUpdate', function(){
webview.show();
});
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewTitleNViewBackButtonStyles</h1>
窗口标题栏自定义返回按钮样式
<h2 style="margin-left:.8em;">说明：</h2>
返回按钮由返回图标（字体图标）和标题组成。默认只显示返回图标。 注意：HBuilderX2.6.3+版本支持。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>background: (String 类型 )按钮的背景颜色 仅在标题栏type=transparent时生效，当标题栏透明时按钮显示的背景颜色。可取值#RRGGBB和rgba格式颜色字符串，默认值为灰色半透明。 </li><li>badgeBackground: (String 类型 )按钮上显示的角标背景颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； 默认值为红色。 </li><li>badgeColor: (String 类型 )按钮上显示的角标文本颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； 默认值为白色。 </li><li>badgeSize: (String 类型 )按钮上显示的角标字体大小 可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。默认值为"16px"。 </li><li>badgeText: (String 类型 )按钮上显示的角标文本 最多显示3个字符，超过则显示为...。注意：角标显示在返回图标之后，覆盖在返回按钮的标题之上。 </li><li>color: (String 类型 )按钮上返回图标和标题颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为窗口标题栏控件的标题文字颜色。 </li><li>colorPressed: (String 类型 )按下状态按钮文字颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为color属性值自动调整透明度为0.3。 </li><li>fontWeight: (String 类型 )按钮上返回图标的粗细 可取值： "normal" - 标准字体； "bold" - 加粗字体。默认值为"normal"。注意：iOS平台的字体图标不支持加粗。 </li><li>fontSize: (String 类型 )按钮上返回图标文字大小 可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"； 窗口标题栏为默认样式（type="default"）时，默认值为"27px"。 </li><li>redDot: (Boolean 类型 )按钮上是否显示红点 设置为true则显示红点，false则不显示红点。默认值为false。注意：当设置了角标文本时红点不显示。 </li><li>title: (String 类型 )返回按钮上的标题 显示在返回图标（字体图标）后，默认为空字符串。 </li><li>titleWeight: (String 类型 )返回按钮上标题的粗细 可取值： "normal" - 标准字体； "bold" - 加粗字体。默认值为"normal"。 </li><li>titleSize: (String 类型 )返回按钮上标题的字体大小 可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。默认值为"16px"。 </li></ul>
<h1 style="margin-left:0;">WebviewTitleNViewButtonStyles</h1>
窗口标题栏自定义按钮样式
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>type: (String 类型 )按钮样式 运行环境中内置按钮样式直接使用，内置样式忽略fontSrc和text属性。可取值： "forward" - 前进按钮； "back" - 后退按钮； "share" - 分享按钮； "favorite" - 收藏按钮； "home" - 主页按钮； "menu" - 菜单按钮； "close" - 关闭按钮； "none" - 无样式。默认值为无样式（"none"），需通过text属性设置按钮上显示的内容、通过fontSrc属性设置使用的字体库。 </li><li>background: (String 类型 )按钮的背景颜色 仅在标题栏type=transparent时生效，当标题栏透明时按钮显示的背景颜色。可取值#RRGGBB和rgba格式颜色字符串，默认值为灰色半透明。 </li><li>badgeText: (String 类型 )按钮上显示的角标文本 最多显示3个字符，超过则显示为...。 </li><li>color: (String 类型 )按钮上文字颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为窗口标题栏控件的标题文字颜色。 </li><li>colorPressed: (String 类型 )按下状态按钮文字颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色； "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为color属性值自动调整透明度为0.3。 </li><li>float: (String 类型 )按钮在标题栏上的显示位置 可取值： "right" - 在标题栏中靠右排列显示； "left" - 在标题栏中靠左侧排列显示（在返回键后）。默认值为"right"。注意：float值不支持动态修改，只能在窗口创建时设置。 </li><li>fontWeight: (String 类型 )按钮上文字的粗细 可取值： "normal" - 标准字体； "bold" - 加粗字体。默认值为"normal"。注意：iOS平台的字体图标不支持加粗。 </li><li>fontSize: (String 类型 )按钮上文字大小 可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"； 窗口标题栏为默认样式（type="default"）时，默认值为"27px"。 </li><li>fontSrc: (String 类型 )按钮上文字使用的字体文件路径 字体文件路径支持以下类型： 相对路径 - 相对于当前页面的host位置，如"a.ttf"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/sdcard/a.ttf"，此类路径通常通过其它5+ API获取的； 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.ttf"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。 </li><li>onclick: (WebviewCustomButtonCallback 类型 )按钮点击后触发的回调函数 回调函数中将返回此JSON对象。 </li><li>redDot: (Boolean 类型 )按钮上是否显示红点 设置为true则显示红点，false则不显示红点。默认值为false。注意：当设置了角标文本时红点不显示。 </li><li>select: (Boolean 类型 )是否显示选择指示图标 设置为true则显示选择指示图标（向下箭头），颜色与文字颜色一致； false则不显示。默认值为false。 </li><li>text: (String 类型 )按钮上显示的文字 推荐使用一个字符，超过一个字符可能无法正常显示，使用字体图标时unicode字符表示必须'\u'开头，如"\ue123"（注意不能写成"\e123"）。 </li><li>width: (String 类型 )按钮的宽度 可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度。默认值为"44px"（适合字体图标）。 </li></ul>
<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();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 点击自定义按钮回调函数
function clickButton(){
plus.nativeUI.alert('clicked!');
}
// 标题栏控件显示自定义按钮
var webview = null;
function titleNViewWebview() {
webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test',
{'titleNView':{style:'transparent',backgroundColor':'#D74B28','titleText':'标题栏文字','titleColor':'#CCCCCC',autoBackButton:true,
buttons:[{text:'...',float:'right',onclick:clickButton}]
}});
webview.addEventListener('close', function(){
webview=null;
});
webview.addEventListener('titleUpdate', function(){
webview.show();
});
}
</script>
</head>
<body>
Webview窗口标题栏显示自定义按钮 
<button onclick="titleNViewWebview()">打开</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;"></h1>

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

页: [1]

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

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