宜信同城网交流论坛技术专版技术专区nativeObj管理系统原生对象nativeObj管理系统原生对象。对象： AnimationOptions: 原生动画参数AnimationViewStyles: 原生动画窗 ...

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

nativeObj管理系统原生对象

<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">
 nativeObj管理系统原生对象。
<h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.AnimationOptions">AnimationOptions</a>: 原生动画参数</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.AnimationViewStyles">AnimationViewStyles</a>: 原生动画窗口样式</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap">Bitmap</a>: 原生图片对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveOptions">BitmapSaveOptions</a>: JSON对象，保存图片的参数</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSlider">ImageSlider</a>: 原生图片轮播控件对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSliderStyles">ImageSliderStyles</a>: 图片轮播控件样式</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSliderImageStyles">ImageSliderImageStyles</a>: 图片轮播控件中图片项配置参数</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.InputStyles">InputStyles</a>: 输入框样式</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect">Rect</a>: 区域信息对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.RectStyles">RectStyles</a>: 绘制区域样式对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.RichTextStyles">RichTextStyles</a>: 富文本样式</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Position">Position</a>: 区域信息对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.TextStyles">TextStyles</a>: 绘制文本样式对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.View">View</a>: 原生控件对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewAnimationOptions">ViewAnimationOptions</a>: View控件动画参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles">ViewDrawTagStyles</a>: View控件绘制元素参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewEvents">ViewEvents</a>: View控件事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ViewStatusbarStyles">ViewStatusbarStyles</a>: JSON对象，View控件的系统状态栏区域样式</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewStyles">ViewStyles</a>: View控件样式</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.BitmapSaveSuccessCallback">BitmapSaveSuccessCallback</a>: 图片保存操作成功回调接口</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.InputCompleteCallback">InputCompleteCallback</a>: 输入框完成输入回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.InputEventCallback">InputEventCallback</a>: 输入框事件回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.RichTextClickedCallback">RichTextClickedCallback</a>: 富文本区域点击事件回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.TouchEventCallback">TouchEventCallback</a>: 触屏事件的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjSuccessCallback">NativeObjSuccessCallback</a>: 操作成功回调函数接口</li><li><ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjErrorCallback">NativeObjErrorCallback</a>: 操作错误回调函数接口</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
5+功能模块（permissions）
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"NativeObj": {
"description": "原生对象"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">AnimationOptions</h1>
原生动画参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface AnimationOptions {
attribute String type;
attribute Number duration;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
指定动画的类型、持续时间等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>type: (String 类型 )动画类型 可取值： "pop-in" - 从右侧平移入栈动画效果（副窗口从右侧向左平移滑出显示，主窗口从当前屏幕区域向左侧平移滑出被遮盖），如果仅传入一个View控件对象则自动降级为slide-in-right动画； "pop-out" - 从右侧平移出栈动画效果（副窗口从当前屏幕区域向右侧平移出可视区域，主窗口从左侧向右平移滑出显示），如果仅出入一个View控件对象则自动降级为slide-out-right动画； "slide-in-right" - 从右侧横向滑动效果（主窗口从当前屏幕右侧外向内横向滑动显示）； "slide-out-right - 横向向右侧滑出屏幕动画（主窗口从屏幕中横向向右侧滑动到屏幕外）。 </li><li>duration: (Number 类型 )动画持续时间 单位为毫秒，默认值为200ms。 </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>NativeObj Example</title>
<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
bitmap1 = new plus.nativeObj.Bitmap('bmp1');
bitmap1.load('bmp1.png',function(){
console.log('bmp1.png load success!');
},function(e){
console.log('bmp1.png load failed! '+JSON.stringify(e));
});
bitmap2 = new plus.nativeObj.Bitmap('bmp2');
bitmap2.load('bmp2.png',function(){
console.log('bmp2.png load success!');
},function(e){
console.log('bmp2.png load failed! '+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
// 开始动画
var options = {type:'pop-out',duration:1000};
plus.nativeObj.View.startAnimation(options,{bitmap:bitmap1},{bitmap:bitmap2},function(){
console.log('plus.nativeObj.View.startAnimation动画结束');
// 关闭原生动画
plus.nativeObj.View.clearAnimation();
});
}
</script>
</head>
<body>
<button onclick="nativeAnimation()">原生窗口动画</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">AnimationViewStyles</h1>
原生动画窗口样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface AnimationViewStyles {
attribute Bitmap bitmap;
attribute String text;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
指定动画窗口的样式，如背景图片，绘制的文字等。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>bitmap: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap">Bitmap</a> 类型 )动画窗口上绘制的背景图片 图片可以通过Webview对象的draw方法截图，也可以通过Bitmap的API从本地文件中加载。 </li><li>text: (String 类型 )动画窗口上绘制的文本内容</li><li>textStyles: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.TextStyles">TextStyles</a> 类型 )动画窗口上绘制的文本样式</li><li>textRect: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect">Rect</a> 类型 )动画窗口上绘制的文本区域 默认值为{top:'0px',left:'0px',width:'100%',height:'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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
bitmap1 = new plus.nativeObj.Bitmap('bmp1');
bitmap1.load('bmp1.png',function(){
console.log('bmp1.png load success!');
},function(e){
console.log('bmp1.png load failed! '+JSON.stringify(e));
});
bitmap2 = new plus.nativeObj.Bitmap('bmp2');
bitmap2.load('bmp2.png',function(){
console.log('bmp2.png load success!');
},function(e){
console.log('bmp2.png load failed! '+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 原生动画
function nativeAnimation(){
// 开始动画
var view = {bitmap:bitmap1,text:'主窗口',textStyles:{size:'28px',color:'#FF0000'},textRect:{top:'0px',left:'0px',width:'100%',height:'100px'}};
var other = {bitmap:bitmap1,text:'副窗口',textStyles:{size:'22px',color:'#00FF00'},textRect:{top:'0px',left:'0px',width:'100%',height:'44px'}};
plus.nativeObj.View.startAnimation( {type:'pop-in'},view,other,function(){
console.log('plus.nativeObj.View.startAnimation动画结束');
// 关闭原生动画
plus.nativeObj.View.clearAnimation();
});
}
</script>
</head>
<body>
<button onclick="nativeAnimation()">原生窗口动画</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">Bitmap</h1>
原生图片对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface Bitmap {
readonly attribute String id;

static function Array[Bitmap] getItems();
static function Bitmap getBitmapById( id );

function void clear();
function void load( path, successCallback, errorCallback );
function void loadBase64Data( data, successCallback, errorCallback );
function void save( path, options, successCallback, errorCallback );
function String toBase64Data();
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
原生图片对象会占用较大的内存资源，在使用时需谨慎管理，当图片不再使用时应该及时调用clear方法进行销毁。
<h2 style="margin-left:.8em;">构造：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.Bitmap%28id,%20path%29">Bitmap(id, path)</a>: 创建Bitmap对象</li></ul>
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.id">id</a>: Bitmap对象的标识</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.getItems">getItems</a>: 静态方法，获取所有Bitmap图片对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.getBitmapById">getBitmapById</a>: 静态方法，获取指定标识的Bitmap图片对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.clear">clear</a>: 销毁Bitmap图片</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.load">load</a>: 加载Bitmap图片</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.loadBase64Data">loadBase64Data</a>: 加载Base64编码格式图片到Bitmap对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.recycle">recycle</a>: 回收Bitmap图片内存</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.save">save</a>: 保存图片</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Bitmap.toBase64Data">toBase64Data</a>: 获取图片的Base64编码数据</li></ul>
<h1 style="margin-left:0;">Bitmap(id, path)</h1>
创建Bitmap对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var bitmap = new plus.nativeObj.Bitmap(id, path);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
创建后为空Bitmap对象，需要调用Webview对象的draw方法更新，或者调用load/loadBase64Data方法加载图片。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 可选 Bitmap图片对象的id 给图片对象指定id后，可以通过plus.nativeObj.Bitmap.getBitmapById()获取。如果不设置id则创建匿名图片对象，仅可通过plus.nativeObj.Bitmap.getItems()获取。可创建多个相同id的图片，此时plus.nativeObj.Bitmap.getBitmapById()获取第一个创建的id图片对象。 </li><li>path: ( String ) 可选 Bitmap对象自动加载图片的地址 当图片对象未加载到内存或内存被回收（调用recycle方法），此时使用图片对象时自动加载图片的地址。适用于低内存环境下使用，仅在图片实际使用时才自动加载到内存中，使用后调用recycle方法回收释放内存。注意：调用load/save方法会更新此地址。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
Bitmap : Bitmap图片对象
<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>NativeObj Example</title>
<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
wc = plus.webview.currentWebview();
bitmap = new plus.nativeObj.Bitmap("test");
// 将webview内容绘制到Bitmap对象中
wc.draw(bitmap,function(){
console.log('绘制图片成功');
},function(e){
console.log('绘制图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
创建Bitmap对象 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">id</h1>
Bitmap对象的标识
<h2 style="margin-left:.8em;">说明：</h2>
String 类型只读属性
在创建Bitmap对象时设置，如果没有设置标识，此属性值为null。
<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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var bitmap = new plus.nativeObj.Bitmap("test");
// ...
console.log( bitmap.id ); // 输出"test"
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
Bitmap对象的标识 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getItems</h1>
静态方法，获取所有Bitmap图片对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

Array[Bitmap] plus.nativeObj.Bitmap.getItems();

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
获取应用运行期创建的所有Bitmap图片对象，包含所有空Bitmap对象，不包含已经销毁的Bitmap对象。返回的Bitmap对象在数组中按创建的属性排列，及数组中第一个是最先创建的Bitmap对象。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap">Bitmap</a>] : 应用中创建的所有Bitmap图片对象数组。
<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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
// 获取所有Bitmap对象
var bitmaps=plus.nativeObj.Bitmap.getItems();
for(var i=0;i<bitmaps.length;i++){
console.log("Bitmap"+i+": "+bitmaps[i].id);
}
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
获取所有Bitmap图片对象 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getBitmapById</h1>
静态方法，获取指定标识的Bitmap图片对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Bitmap plus.nativeObj.Bitmap.getBitmapById( id );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
在应用中已创建的图片对象中查找指定标识的Bitmap对象并返回。若存在多个相同标识的Bitmap图片，则返回第一个创建的Bitmap图片。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 要查找的Bitmap图片标识 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap">Bitmap</a> : Bitmap图片对象，若没有查找到指定标识的图片对象则返回null。
<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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
wc = plus.webview.currentWebview();
bitmap = new plus.nativeObj.Bitmap("test");
// 将webview内容绘制到Bitmap对象中
wc.draw(bitmap,function(){
console.log('绘制图片成功');
},function(e){
console.log('绘制图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 查找Bitmap对象
function findBitmap(){
var bitmap = plus.nativeObj.Bitmap.getBitmapById("test");
if(bitmap){
console.log("Success: "+bitmap.id);
}else{
console.log("Can't find bitmap");
}
}
</script>
</head>
<body>
获取指定标识的Bitmap图片对象 
<button onclick="findBitmap()">Find</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">clear</h1>
销毁Bitmap图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

void bitmap.clear();

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
释放Bitmap图片占用的内存资源，销毁后图片对象将不可使用，其id属性值为undefined，调用其所有方法操作都会失败。
<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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
wc = plus.webview.currentWebview();
bitmap = new plus.nativeObj.Bitmap("test");
// 将webview内容绘制到Bitmap对象中
wc.draw(bitmap,function(){
console.log('绘制图片成功');
},function(e){
console.log('绘制图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 销毁Bitmap图片
function clearBitmap(){
bitmap.clear();
}
</script>
</head>
<body>
销毁Bitmap图片 
<button onclick="clearBitmap()">Clear</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">load</h1>
加载Bitmap图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

void bitmap.load( path, successCallback, errorCallback );

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从指定的路径（仅支持本地文件系统）中加载图片，此操作将覆盖之前的图片内容， 如果加载图片失败则保留之前的图片内容。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>path: ( String ) 必选 要加载的图片路径 支持以下图片路径： 相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/sdcard/logo.png"，此类路径通常通过其它5+ API获取的； 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。 </li><li>successCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjSuccessCallback">NativeObjSuccessCallback</a> ) 必选 加载图片操作成功回调 加载图片操作成功时调用。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjErrorCallback">NativeObjErrorCallback</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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var bitmap = new plus.nativeObj.Bitmap("test");
// 从本地加载Bitmap图片
bitmap.load('icon.png',function(){
console.log('加载图片成功');
},function(e){
console.log('加载图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
加载Bitmap图片 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">loadBase64Data</h1>
加载Base64编码格式图片到Bitmap对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

void bitmap.loadBase64Data( data, successCallback, errorCallback );

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从Base64编码格式图片数据中加载图片，此操作将覆盖之前的图片内容， 如果加载图片失败则保留之前的图片内容。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>data: ( String ) 必选 要加载图片的Base64编码格式数据 如果数据格式不正确或者不是有效的图片数据则返回失败。 </li><li>successCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjSuccessCallback">NativeObjSuccessCallback</a> ) 必选 加载图片操作成功回调 加载图片操作成功时调用。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.NativeObjErrorCallback">NativeObjErrorCallback</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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var bitmap=null;
// H5 plus事件处理
function plusReady(){
bitmap = new plus.nativeObj.Bitmap("test");
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
加载Base64编码格式图片到Bitmap对象 
<button onclick="loadDataImage()">LoadBase64Data</button> 
<canvas id="cimg"></canvas> 
</body>
<script type="text/javascript">
// 获取图片的base64格式数据
var data = null;
var img = new Image();
img.onload = function(){
var cx = cimg.getContext('2d');
cimg.width = img.width;
cimg.height = img.height;
cx.drawImage( img, 0, 0 );
data = cimg.toDataURL();
}
img.src = 'logo.png';
// 加载Base64编码格式图片到Bitmap对象
function loadDataImage(){
bitmap.loadBase64Data( data, function(){
console.log("加载Base64图片数据成功");
}, function(){
console.log('加载Base64图片数据失败：'+JSON.stringify(e));
} );
}
</script>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">recycle</h1>
回收Bitmap图片内存
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

void bitmap.recycle();

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
释放Bitmap图片占用的内存资源，但不销毁图片对象，依然可以继续使用图片对象。当图片对象再次被使用时会自动从设置的路径（构造函数或load/save方法设置）加载到内存中。
<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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
wc = plus.webview.currentWebview();
bitmap = new plus.nativeObj.Bitmap("test","_www/bimap/capture.png");
// 将webview内容绘制到Bitmap对象中
wc.draw(bitmap,function(){
console.log('绘制图片成功');
bitmap.save("_www/bimap/capture.png");
},function(e){
console.log('绘制图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 回收Bitmap图片
function recycleBitmap(){
bitmap.recycle();
}
</script>
</head>
<body>
销毁Bitmap图片 
<button onclick="clearBitmap()">Recycle</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">save</h1>
保存图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

void bitmap.save( path, options, successCallback, errorCallback );

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
将图片保存到指定的路径（仅支持本地文件系统），如果图片为空或者指定的路径文件已经存在则返回失败。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>path: ( String ) 必选 要保存的图片路径 支持以下图片路径： 绝对路径 - 系统绝对路径，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png"； 相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。如果指定的路径无效，或者不可访问则返回失败。 </li><li>options: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.BitmapSaveOptions">BitmapSaveOptions</a> ) 必选 保存图片的属性 可设置保存图片的格式，压缩质量等参数。 </li><li>successCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.BitmapSaveSuccessCallback">BitmapSaveSuccessCallback</a> ) 必选 保存图片操作成功回调 加载图片操作成功时调用。 </li><li>errorCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.NativeObjErrorCallback">NativeObjErrorCallback</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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var wc=null,bitmap=null;
// H5 plus事件处理
function plusReady(){
wc = plus.webview.currentWebview();
bitmap = new plus.nativeObj.Bitmap("test");
// 将webview内容绘制到Bitmap对象中
wc.draw(bitmap,function(){
console.log('绘制图片成功');
},function(e){
console.log('绘制图片失败：'+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 保存图片
function saveBitmap(){
bitmap.save( "_doc/a.jpg"
,{}
,function(i){
console.log('保存图片成功：'+JSON.stringify(i));
}
,function(e){
console.log('保存图片失败：'+JSON.stringify(e));
});
}
</script>
</head>
<body>
保存图片 
<button onclick="saveBitmap()">Save</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">toBase64Data</h1>
获取图片的Base64编码数据
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>

String bitmap.toBase64Data();

</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
读取图片的数据内容，并转换为Base64编码格式字符串。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
String : 图片的Base64编码数据，如果图片为空则返回null。
<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>NativeObj Example</title>
<script type="text/javascript">
var bitmap = null,wi=null;
// H5 plus事件处理
function plusReady(){
// 获取首页Webview窗口
wi = plus.webview.getLaunchWebview();
// 创建Bitmap对象
bitmap = new plus.nativeObj.Bitmap("test");
// 将首页Webview窗口截图保存到Bitmap中
wi.draw( bitmap, function(){
console.log("截图成功");
}, function(e){
console.log("截图失败："+JSON.stringify(e));
} );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 获取图片的Base64编码数据
function base64Image(){
var img=document.getElementById("img");
img.src = bitmap.toBase64Data();
}
</script>
</head>
<body>
获取图片的Base64编码数据 
<button onclick="base64Image()">Base64Data</button> 
<img id="img"></img>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">BitmapSaveOptions</h1>
JSON对象，保存图片的参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface BitmapSaveOptions {
attribute Boolean overwrite;
attribute String format;
attribute Number quality;
attribute Rect clip;
} </code></code></pre>
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>overwrite: (Boolean 类型 )覆盖保存图片文件 仅在保存的图片路径文件存在时有效： true表示覆盖存在的文件； false表示不覆盖，如果文件存在，则返回失败。默认值为false。 </li><li>format: (String 类型 )保存图片的格式 支持"jpg"、"png"，如果未指定则默认使用指定的保存路径后缀对应的文件格式，如果后缀文件格式无效则使用jpg格式。 </li><li>quality: (Number 类型 )保存图片的质量 取值范围为1-100，1表示使用最低的图片质量（保存后的图片文件最小）、100表示使用最高的图片质量（保存后的图片文件最大）； 默认值为50。 </li><li>clip: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.Rect">Rect</a> 类型 )指定裁剪区域保存图片 相对于图片的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。 </li></ul>
<h1 style="margin-left:0;">ImageSlider</h1>
原生图片轮播控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface ImageSlider extends View {
function void addImages(images);
function Number currentImageIndex();
function void setImages(images);
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
原生图片轮播控件对象从原生View控件（plus.nativeObj.View）继承而来，用于绘制图片轮播内容。
<h2 style="margin-left:.8em;">构造：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSlider.ImageSlider%28id,%20styles,%20tags%29">ImageSlider(id, styles, tags)</a>: 创建图片轮播控件对象</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSlider.addImages">addImages</a>: 添加图片轮播控件的图片</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSlider.currentImageIndex">currentImageIndex</a>: 获取当前图片轮播控件显示的图片索引值</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSlider.setImages">setImages</a>: 设置图片轮播控件的图片</li></ul>
<h1 style="margin-left:0;">ImageSlider(id, styles, tags)</h1>
创建图片轮播控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var view = new plus.nativeObj.ImageSlider(id, styles, tags);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
与原生View控件一样，创建后需要调用show方法显示，或者添加到Webview中显示。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 图片轮播控件对象的id 与原生View控件的id作用一样。 </li><li>styles: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSliderStyles">ImageSliderStyles</a> ) 可选 图片轮播控件的样式 设置控件的位置、大小及显示的图片等信息。 </li><li>tags: ( Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles">ViewDrawTagStyles</a>] ) 可选 图片轮播控件上需要额外绘制的内容 与原生View控件一样，额外绘制自定义内容。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSlider">ImageSlider</a> : 原生图片轮播控件
<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>NativeObj Example</title>
<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
view = new plus.nativeObj.ImageSlider('test',
{top:'100px',left:'0px',height:'200px',width:'100%',position:'absolute',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
plus.webview.currentWebview().append(view);
}
</script>
</head>
<body>
创建图片轮播控件，添加到Webview窗口显示 
<button onclick="createView()">创建图片轮播控件</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">addImages</h1>
添加图片轮播控件的图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void slider.addImages(images);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
动态添加图片轮播控件显示的图片。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>images: ( Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSliderImageStyles">ImageSliderImageStyles</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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
function createView(){
view = new plus.nativeObj.ImageSlider('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
// 直接显示
view.show();
}
// 添加原生图片轮播控件上显示的图片
function updateView(){
view.addImages([{src:'4.png'},{src:'5.png'}]);
}
</script>
</head>
<body>
<button onclick="createView()">创建图片轮播对象</button> 
<button onclick="updateView()">添加图片</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">currentImageIndex</h1>
获取当前图片轮播控件显示的图片索引值
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Number slider.currentImageIndex();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
索引值从0开始，即0表示图片轮播控件当前显示第一张图片。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Number : 当前图片轮播控件显示的图片索引值
<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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
var images=[{src:'1.png'},{src:'2.png'},{src:'3.png'}];
function createView(){
view = new plus.nativeObj.ImageSlider('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:images});
// 直接显示
view.show();
}
// 获取当前显示的图片
function currentImage(){
var index = view.currentImageIndex();
var currentImage = images[index];
console.log('Current image: '+currentImage.src);
}
</script>
</head>
<body>
<button onclick="createView()">创建图片轮播对象</button> 
<button onclick="currentImage()">获取当前显示的图片</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setImages</h1>
设置图片轮播控件的图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void slider.setImages(images);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
动态更新图片轮播控件显示的图片。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>images: ( Array[<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ImageSliderImageStyles">ImageSliderImageStyles</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"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 创建原生图片轮播控件
var view=null;
function createView(){
view = new plus.nativeObj.ImageSlider('test',{top:'200px',left:'0px',height:'50%',width:'100%',images:[{src:'1.png'},{src:'2.png'},{src:'3.png'}]});
// 直接显示
view.show();
}
// 更新原生图片轮播控件
function updateView(){
view.setImages([{src:'4.png'},{src:'5.png'}]);
}
</script>
</head>
<body>
<button onclick="createView()">创建图片轮播对象</button> 
<button onclick="updateView()">更新图片轮播对象</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">ImageSliderStyles</h1>
图片轮播控件样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface ImageSliderStyles extends ViewStyles {
attribute Boolean autoplay;
attribute Array<ImageSliderImageStyles> images;
attribute Boolean loop;
attribute Boolean fullscreen;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从ViewStyles继承而来，扩展支持轮播图片等配置。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>autoplay: (Boolean 类型 )是否自动播放 可取值： "true" - 自动播放； "false" - 不自动播放。默认值为"false"。 </li><li>fullscreen: (Boolean 类型 )是否可全屏显示 可取值： "true" - 表示可全屏显示，用户点击轮播图片时全屏显示； "false" - 表示不可全屏显示，用户点击轮播图片时无响应。默认值为"true"。 </li><li>loop: (Boolean 类型 )是否可循环轮播 可取值： "true" - 支持循环轮播； "false" - 不支持循环轮播。默认值为"false"。 </li><li>images: (Array[<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.ImageSliderImageStyles">ImageSliderImageStyles</a>] 类型 )轮播的图片 至少必须设置一张图片的地址信息，否则可能导致图片轮播控件显示不正常。 </li><li>interval: (Number 类型 )自动播放切换时间 当autoplay属性值为true时生效，单位为毫秒。默认值为3000（3秒）。 </li></ul>
<h1 style="margin-left:0;">ImageSliderImageStyles</h1>
图片轮播控件中图片项配置参数
<h2 style="margin-left:.8em;">说明：</h2>
用于指定图片地址等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>src: (String 类型 )图片地址 支持本地地址（相对地址、绝对路径、RelativeURL、本地路径URL）； 也支持网络地址（http://或https://）。 </li><li>align: (String 类型 )图片水平对齐方式 仅在图片显示的宽度与图片轮播控件宽度不一致时有效，可取值： "left" - 图片在轮播控件中水平居左对齐； "center" - 图片在轮播控件中水平居中对齐； "right" - 图片在轮播控件中水平居右对齐。默认值为"center"。 </li><li>height: (String 类型 )图片显示的高度 可取值： 像素值，如"100px"； 百分比，如"10%"，现对于图片轮播控件的高度； 自动计算"auto"，如果指定图片宽度（width），则按图片实际大小等比缩放图片高度值，如果没有指定宽度（width值为"auto"）则自动缩放图片至可完整显示。 </li><li>width: (String 类型 )图片显示的宽度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于图片轮播控件的宽度； 自动计算"auto"，如果指定图片高度（height），则按图片实际大小等比缩放图片宽度值，如果没有指定高度（height值为"auto"）则自动缩放图片至可完整显示。默认值为"auto"。 </li><li>verticalAlign: (String 类型 )图片垂直对齐方式 仅在图片显示的高度与图片轮播控件宽度不一致时有效，可取值： "top" - 图片在轮播控件中垂直居顶对齐； "middle" - 图片在轮播控件中垂直居中对齐； "bottom" - 图片在轮播控件中垂直居底对齐。默认值为"middle"。 </li></ul>
<h1 style="margin-left:0;">InputStyles</h1>
输入框样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface InputStyles{
attribute String type;
attribute String placeholder;
attribute String fontSize;
attribute String borderWidth;
attribute String borderColor;
attribute String borderRadius;
attribute function onComplete;
attribute function onFocus;
attribute function onBlur;
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于定义输入框的显示样式，如字体大小，提示内容等信息。输入文本内容在指定区域水平居左，垂直居中显示。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>type: (String 类型 )输入框类型 可取值： "email" - 邮箱地址输入框； "number" - 数字输入框； "search" - 搜索文本输入框； "tel" - 电话号码输入框； "text" - 普通文本输入框； "url" - URL地址输入框。默认为text（即普通文本输入框）。 </li><li>placeholder: (String 类型 )输入框的提示文本 当用户未输入内容时显示在编辑框中（灰色文字）。 </li><li>fontSize: (String 类型 )输入框的字体大小 可取值：字体高度像素值，数字加"px"格式字符串，如"12px"。默认值为"16px"。 </li><li>borderColor: (String 类型 )输入框的边框颜色 可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色边框。默认值为"#000000"（黑色）。 </li><li>borderRadius: (String 类型 )输入框边框圆角半径 可取值：圆角半径像素值，数字加"px"格式字符串，如"6px"。默认值为"0px"（边框无圆角）。 </li><li>borderWidth: (String 类型 )输入框的边框宽度 可取值：像素值，数字加"px"格式字符串，如"2px"。默认值为"1px"。 </li><li>onComplete: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.InputCompleteCallback">InputCompleteCallback</a> 类型 )输入框完成输入事件 弹出软键盘完成输入后，点击软键盘上的“完成”、“前往”按钮时触发。 </li><li>onFocus: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.InputEventCallback">InputEventCallback</a> 类型 )输入框获取焦点事件 当编辑框获取焦点时触发。 </li><li>onBlur: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.InputEventCallback">InputEventCallback</a> 类型 )输入框失去焦点事件 当编辑框失去焦点时触发。 </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>NativeObj Example</title>
<script type="text/javascript">
var view=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// 创建带编辑框的原生View控件
function createView(){
view = new plus.nativeObj.View('test',
{top:'0px',left:'0px',height:'44px',width:'100%'});
view.draw([
{tag:'input',id:'input',inputStyles:{fonstSize:'16px'},position:{top:'0px',left:'0px',width:'100%',height:'20px'}},
{tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}
]);
view.show();
}
</script>
</head>
<body>
<button onclick="createView()">创建带编辑框的原生View控件</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">Rect</h1>
区域信息对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface Rect {
attribute String top;
attribute String left;
attribute String width;
attribute String height;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
包括位置、大小等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>top: (String 类型 )区域左上角的垂直偏移量 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于作用对象的高度； 自动计算，如"auto",根据height值自动计算，相对于作用对象垂直居中。 </li><li>left: (String 类型 )区域左上角的水平偏移量 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于作用对象的宽度； 自动计算，如"auto",根据width值自动计算，相对于作用对象水平居中。 </li><li>width: (String 类型 )区域的宽度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于作用对象的宽度。 </li><li>height: (String 类型 )区域的高度 可取值： 像素值，如"100px"； 百分比，如"10%"，相对于作用对象的高度。内容自适应，如"wrap_content"，根据内容计算高度（如调用drawText绘制文本时支持）。 </li></ul>
<h1 style="margin-left:0;">RectStyles</h1>
绘制区域样式对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface RectStyles {
attribute String color;
attribute String radius;
attribute String borderColor;
attribute String borderWidth;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于定义矩形区域的显示样式，如空心/实心样式、圆角等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><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)"，表示红色半透明。默认值为"#FFFFFF"（白色）。 </li><li>radius: (String 类型 )矩形区域的圆角半径 可取值：圆角半径像素值，数字加"px"格式字符串，如"6px"。默认值为"0px"（矩形无圆角）。 </li><li>borderColor: (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属性值）。 </li><li>borderWidth: (String 类型 )矩形边框宽度 可取值：像素值，数字加"px"格式字符串，如"2px"。默认值为"0px"（无边框）。 </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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
var view = new plus.nativeObj.View('test', {top:'200px',left:'0px',height:'44px',width:'100%'});
// 绘制空心圆角矩形
view.drawRect({color:'rgba(0,0,0,0)',borderWidth:'2px',radius:'5px'},
{top:'0px',left:'0px',width:'100%',height:'100%'});
view.show();
}
</script>
</head>
<body>
<button onclick="createView()">创建View对象</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">RichTextStyles</h1>
富文本样式
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface RichTextStyles{
attribute String align;
attribute String family;
attribute String fontSrc;
attribute Function onClick;
}
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于定义富文本使用的默认使用的字体名称、字体文件路径等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>align: (String 类型 )富文本内容的水平对齐方式 对整体内容有效，无法单独控制每行的内容。可取值： "left"-字体在指定的区域中水平居左对齐； "center"-字体在指定的区域中水平居中对齐； "right"-字体在指定的区域中水平居右对齐。默认值为"left"。 </li><li>family: (String 类型 )富文本默认使用的字体名称 例如"Times New Roman"， 如果指定名称的字体不存在，则使用系统默认字体。 </li><li>fontSrc: (String 类型 )富文本默认使用的字体文件路径 加载字体文件路径，必须为本地路径，如果指定的文件路径无效，则使用系统默认字体。 </li><li>onClick: (<ahref="https://blog.csdn.net/qq_40575646/article/details/122824973#plus.nativeObj.RichTextClickedCallback">RichTextClickedCallback</a> 类型 )点击事件回调函数 如果设置此属性，则表示拦截所有RichText上的点击事件（不透传事件）。如果没有设置此属性，则仅拦截操作包含onclick属性的a/img标签的点击事件。 </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>NativeObj Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// 创建原生View控件
function createView(){
var view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
var richtext = '文本 <a onclick="console.log(\'clicked a\')" style="font-size:12px;">链接</a> <img src="./t.png" width="20px" height="20px"></img>';
// 绘制文本
view.drawRichText(richtext, {top:'0px',left:'0px',width:'100%',height:'wrap_content'}, {family:'Times New Roman',fontSrc:'_www/font.ttf'});
view.show();
}
</script>
</head>
<body>
<button onclick="createView()">创建View对象</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">Position</h1>
区域信息对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
interface Position {
attribute String top;
attribute String left;
attribute String width;
attribute String height;
attribute String bottom;
attribute String right;
} </code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
包括位置、大小等信息。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>top: (String 类型 )区域顶部相对于作用对象（或容器）向下的偏移量 可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象（或容器）的高度； 自动计算，如"auto",根据height值自动计算，相对于作用对象（或容器）垂直居中。 </li><li>left: (String 类型 )区域左侧相对于作用对象（或容器）向右的偏移量 可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象（或容器）的宽度； 自动计算，如"auto",根据width值自动计算，相对于作用对象（或容器）水平居中。 </li><li>width: (String 类型 )区域的宽度 可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的宽度。 </li><li>height: (String 类型 )区域的高度 可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的高度。 </li><li>bottom: (String 类型 )区域底部相对于作用对象（或容器）向上的偏移量 可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的高度。当设置了top和height值时，忽略此属性值； 当未设置top值时，可通过bottom属性值来确定区域的垂直位置； 当未设置height值时，可通过top和bottom属性值来确定区域的高度。 </li><li>right: (String 类型 )区域右侧相对于作用对象（或容器）向左的偏移量 可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的宽度。当设置了left和width值时，忽略此属性值； 当未设置left值时，可通过right属性值来确定区域的水平位置； 当未设置width值时，可通过left和right属性值来确定区域的宽度。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>NativeObj Example</title>
<script type="text/javascript">
var wc=null;
var bitmap=null; // 返回图标
// H5 plus事件处理
function plusReady(){
wc=plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function(){
nv&&!bChild?(nv.close(),nv=null):plus.runtime.quit();
}, false);

var bdata = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAACcklEQVR4nO3a0XESURiG4TeO99iBWoGZ+RvADtKBpAPtwBLsANJBrEAs4MyYDmIHSQXkgk0mMLK7ILt8/+F778ici394OGfDsher1Qqn05tTD+A2M4hYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYb089wNCVUq6Ay+blfUQsTjhOZxc1P9tbSlkAX7b+/C0ifpxgnF5Ve2TtwAD4OvIoe1UlSAsGwPsRR9m76kA6MAD+jjTKQVUF0gMD4HaEUQ6umot6T4ybiJgNP83hVbFDasGACnZIT4yfEXE1wjj/Xeod0hPjDpgNPsyRSguyB8Y0Ih6Gn+g4pQSpFQMSgtSMAclAaseARCDngAFJQM4FAxKAnBMGiH8xLKVMgV89ln6MiPthpxkn6R0SEUvgusfSZSnlsnuZftI75LlSygyYdyx7ZH1s/Rl+ouFKAQIvx9ctMGlZlh4lDQhAcywtqRhF+hqyXfMmT1m/6buasL6mzMaY6dilAoENlLuWZRNgnhEl1ZH1ulLKO9bH16eOpdfqz2K9Lt0Oea75EjilfadAsp2SFgQ2UH53LJ2XUr4PPtARSntkbVfL7+rVgEBvlM/NHQDJUh9Z2zWf/puOZbPhJzm8qkDgBaXt/teHcSY5rOpAAJp/c/vclJSrShDYifKI+NPvVV3U/1VzU3LavFyo/25SPUi2qj2ysmYQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsQwilkHEMohYBhHLIGIZRCyDiGUQsZ4Ak9fPFwUy/HsAAAAASUVORK5CYII=';
bitmap = new plus.nativeObj.Bitmap('back');
bitmap.loadBase64Data(bdata, function(){
bitmap.isLoadSuccess = true;
console.log('Back bitmap load success');
}, function(e){
console.log('Back bitmap load failed: '+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}
var nv=null;
// 创建原生View控件
function creatView(){
nv=nv||new plus.nativeObj.View('test', {top:'100px',bottom:'0px'}, [
{id:'background', tag:'rect', position:{}, color:'#FFFFFF'},
{id:'rect1', tag:'rect', position:{left:'0px',right:'100px',height:'100px'}, color:'#FF0000'},
{id:'back1', tag:'img', src:bitmap, position:{right:'0px',width:'50px',height:'44px'}},
{id:'font1', tag:'font', position:{left:'0px',right:'100px',height:'100px'}, text:'初始文字', textStyles:{color:'#00FF00',size:'50px'}}
]);

// 绘制底部区域
nv.drawRect('#FF0000', {left:'100px',right:'100px',bottom:'0px',height:'100px'}, 'rect2');
nv.drawBitmap(bitmap, {}, {bottom:'0px',width:'50px',height:'44px'}, 'back2');
nv.drawText('底部文本内容', {bottom:'0px',height:'100px'}, {color:'#00FF00'}, 'font2');

nv.show();
}
</script>
</head>
<body style="background:#0000FF;">
使用bottom属性定位绘制内容 
<button onclick="creatView()">显示</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;"></h1>
<h1 style="margin-left:0;"></h1>
<h1 style="margin-left:0;"></h1>
<h1 style="margin-left:0;"></h1>
<h1 style="margin-left:0;"></h1>

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

页: [1]

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

nativeObj管理系统原生对象