nativeObj
- 对象：
- 回调方法：
- 权限：
AnimationOptions
- 说明：
- 属性：
- 示例：
AnimationViewStyles
- 说明：
- 属性：
- 示例：
Bitmap
- 说明：
- 构造：
- 属性：
- 方法：
Bitmap(id, path)
- 说明：
- 参数：
- 返回值：
- 示例：
id
- 说明：
- 示例：
getItems
- 说明：
- 参数：
- 返回值：
- 示例：
getBitmapById
- 说明：
- 参数：
- 返回值：
- 示例：
clear
- 说明：
- 参数：
- 返回值：
- 示例：
load
- 说明：
- 参数：
- 返回值：
- 示例：
loadBase64Data
- 说明：
- 参数：
- 返回值：
- 示例：
recycle
- 说明：
- 参数：
- 返回值：
- 示例：
save
- 说明：
- 参数：
- 返回值：
- 示例：
toBase64Data
- 说明：
- 参数：
- 返回值：
- 示例：
BitmapSaveOptions
- 属性：
ImageSlider
- 说明：
- 构造：
- 方法：
ImageSlider(id, styles, tags)
- 说明：
- 参数：
- 返回值：
- 示例：
addImages
- 说明：
- 参数：
- 返回值：
- 示例：
currentImageIndex
- 说明：
- 参数：
- 返回值：
- 示例：
setImages
- 说明：
- 参数：
- 返回值：
- 示例：
ImageSliderStyles
- 说明：
- 属性：
ImageSliderImageStyles
- 说明：
- 属性：
InputStyles
- 说明：
- 属性：
- 示例：
Rect
- 说明：
- 属性：
RectStyles
- 说明：
- 属性：
- 示例：
RichTextStyles
- 说明：
- 属性：
- 示例：
Position
- 说明：
- 属性：
- 示例：
TextStyles
- 说明：
- 属性：
View
- 说明：
- 构造：
- 属性：
- 方法：
View(id, styles, tags)
- 说明：
- 参数：
- 返回值：
- 示例：
id
- 说明：
- 示例：
startAnimation
- 说明：
- 参数：
- 返回值：
- 示例：
clearAnimation
- 说明：
- 参数：
- 返回值：
- 示例：
getViewById
- 说明：
- 参数：
- 返回值：
- 示例：
addEventListener
- 说明：
- 参数：
- 返回值：
- 示例：
animate
- 说明：
- 参数：
- 返回值：
- 示例：
close
- 说明：
- 参数：
- 返回值：
- 示例：
clearRect
- 说明：
- 参数：
- 返回值：
- 示例：
draw
- 说明：
- 参数：
- 返回值：
- 示例：
drawBitmap
- 说明：
- 参数：
- 返回值：
- 示例：
drawRect
- 说明：
- 参数：
- 返回值：
- 示例：
drawText
- 说明：
- 参数：
- 返回值：
- 示例：
drawRichText
- 说明：
- 参数：
- 返回值：
- 示例：
drawInput
- 说明：
- 参数：
- 返回值：
- 示例：
getInputFocusById
- 说明：
- 参数：
- 返回值：
- 示例：
getInputValueById
- 说明：
- 参数：
- 返回值：
- 示例：
reset
- 说明：
- 参数：
- 返回值：
- 示例：
restore
- 说明：
- 参数：
- 返回值：
- 示例：
show
- 说明：
- 参数：
- 返回值：
- 示例：
setInputFocusById
- 说明：
- 参数：
- 返回值：
- 示例：
setStyle
- 说明：
- 参数：
- 返回值：
- 示例：
setTouchEventRect
- 说明：
- 参数：
- 返回值：
- 示例：
hide
- 说明：
- 参数：
- 返回值：
- 示例：
interceptTouchEvent
- 说明：
- 参数：
- 返回值：
- 示例：
isVisible
- 参数：
- 返回值：
- 示例：
ViewAnimationOptions
- 说明：
- 属性：
- 示例：
ViewDrawTagStyles
- 说明：
- 属性：
- 示例：
ViewEvents
- 常量：
ViewStatusbarStyles
- 说明：
- 属性：
ViewStyles
- 说明：
- 属性：
  - 平台支持
- 示例：
BitmapSaveSuccessCallback
- 参数：
- 返回值：
InputCompleteCallback
- 说明：
- 参数：
- 返回值：
- 示例：
InputEventCallback
- 说明：
- 参数：
- 返回值：
- 示例：
RichTextClickedCallback
- 说明：
- 参数：
- 返回值：
- 示例：
TouchEventCallback
- 参数：
- 返回值：
NativeObjSuccessCallback
- 参数：
- 返回值：
NativeObjErrorCallback
- 参数：
- 返回值：

nativeObj

nativeObj管理系统原生对象。

对象：

AnimationOptions: 原生动画参数
AnimationViewStyles: 原生动画窗口样式
Bitmap: 原生图片对象
BitmapSaveOptions: JSON对象，保存图片的参数
ImageSlider: 原生图片轮播控件对象
ImageSliderStyles: 图片轮播控件样式
ImageSliderImageStyles: 图片轮播控件中图片项配置参数
InputStyles: 输入框样式
Rect: 区域信息对象
RectStyles: 绘制区域样式对象
RichTextStyles: 富文本样式
Position: 区域信息对象
TextStyles: 绘制文本样式对象
View: 原生控件对象
ViewAnimationOptions: View控件动画参数
ViewDrawTagStyles: View控件绘制元素参数
ViewEvents: View控件事件
ViewStatusbarStyles: JSON对象，View控件的系统状态栏区域样式
ViewStyles: View控件样式

回调方法：

BitmapSaveSuccessCallback: 图片保存操作成功回调接口
InputCompleteCallback: 输入框完成输入回调函数
InputEventCallback: 输入框事件回调函数
RichTextClickedCallback: 富文本区域点击事件回调函数
TouchEventCallback: 触屏事件的回调函数
NativeObjSuccessCallback: 操作成功回调函数接口
NativeObjErrorCallback: 操作错误回调函数接口

权限：

5+功能模块（permissions）


{
// ...
"permissions":{
    // ...
    "NativeObj": {
        "description": "原生对象"
    }
}
}

AnimationOptions

原生动画参数


interface AnimationOptions {
    attribute String type;
    attribute Number duration;
}

说明：

指定动画的类型、持续时间等信息。

属性：

type: (String类型)动画类型可取值："pop-in" - 从右侧平移入栈动画效果（副窗口从右侧向左平移滑出显示，主窗口从当前屏幕区域向左侧平移滑出被遮盖），如果仅传入一个View控件对象则自动降级为slide-in-right动画；"pop-out" - 从右侧平移出栈动画效果（副窗口从当前屏幕区域向右侧平移出可视区域，主窗口从左侧向右平移滑出显示），如果仅出入一个View控件对象则自动降级为slide-out-right动画；"slide-in-right" - 从右侧横向滑动效果（主窗口从当前屏幕右侧外向内横向滑动显示）；"slide-out-right - 横向向右侧滑出屏幕动画（主窗口从屏幕中横向向右侧滑动到屏幕外）。
duration: (Number类型)动画持续时间单位为毫秒，默认值为200ms。

示例：


<!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><br/>
    </body>
</html>

uni-app使用plus注意事项

AnimationViewStyles

原生动画窗口样式


interface AnimationViewStyles {
    attribute Bitmap bitmap;
    attribute String text;
}

说明：

指定动画窗口的样式，如背景图片，绘制的文字等。

属性：

bitmap: (Bitmap类型)动画窗口上绘制的背景图片图片可以通过Webview对象的draw方法截图，也可以通过Bitmap的API从本地文件中加载。
text: (String类型)动画窗口上绘制的文本内容
textStyles: (TextStyles类型)动画窗口上绘制的文本样式
textRect: (Rect类型)动画窗口上绘制的文本区域默认值为{top:'0px',left:'0px',width:'100%',height:'44px'}。

示例：


<!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><br/>
    </body>
</html>

uni-app使用plus注意事项

Bitmap

原生图片对象


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();
}

说明：

原生图片对象会占用较大的内存资源，在使用时需谨慎管理，当图片不再使用时应该及时调用clear方法进行销毁。

构造：

Bitmap(id, path)): 创建Bitmap对象

属性：

id: Bitmap对象的标识

方法：

getItems: 静态方法，获取所有Bitmap图片对象
getBitmapById: 静态方法，获取指定标识的Bitmap图片对象
clear: 销毁Bitmap图片
load: 加载Bitmap图片
loadBase64Data: 加载Base64编码格式图片到Bitmap对象
recycle: 回收Bitmap图片内存
save: 保存图片
toBase64Data: 获取图片的Base64编码数据

Bitmap(id, path)

创建Bitmap对象


var bitmap = new plus.nativeObj.Bitmap(id, path);

说明：

创建后为空Bitmap对象，需要调用Webview对象的draw方法更新，或者调用load/loadBase64Data方法加载图片。

参数：

id: _(String)可选 _Bitmap图片对象的id给图片对象指定id后，可以通过plus.nativeObj.Bitmap.getBitmapById()获取。如果不设置id则创建匿名图片对象，仅可通过plus.nativeObj.Bitmap.getItems()获取。可创建多个相同id的图片，此时plus.nativeObj.Bitmap.getBitmapById()获取第一个创建的id图片对象。
path: _(String)可选 _Bitmap对象自动加载图片的地址当图片对象未加载到内存或内存被回收（调用recycle方法），此时使用图片对象时自动加载图片的地址。适用于低内存环境下使用，仅在图片实际使用时才自动加载到内存中，使用后调用recycle方法回收释放内存。注意：调用load/save方法会更新此地址。

返回值：

Bitmap: Bitmap图片对象

示例：


<!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对象<br/>
    </body>
</html>

uni-app使用plus注意事项

id

Bitmap对象的标识

说明：

String类型只读属性

在创建Bitmap对象时设置，如果没有设置标识，此属性值为null。

示例：


<!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对象的标识<br/>
    </body>
</html>

uni-app使用plus注意事项

getItems

静态方法，获取所有Bitmap图片对象



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

说明：

获取应用运行期创建的所有Bitmap图片对象，包含所有空Bitmap对象，不包含已经销毁的Bitmap对象。返回的Bitmap对象在数组中按创建的属性排列，及数组中第一个是最先创建的Bitmap对象。

参数：

无

返回值：

Array[Bitmap]: 应用中创建的所有Bitmap图片对象数组。

示例：


<!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图片对象<br/>
    </body>
</html>

uni-app使用plus注意事项

getBitmapById

静态方法，获取指定标识的Bitmap图片对象


Bitmap plus.nativeObj.Bitmap.getBitmapById( id );

说明：

在应用中已创建的图片对象中查找指定标识的Bitmap对象并返回。若存在多个相同标识的Bitmap图片，则返回第一个创建的Bitmap图片。

参数：

id: (String)必选 要查找的Bitmap图片标识

返回值：

Bitmap: Bitmap图片对象，若没有查找到指定标识的图片对象则返回null。

示例：


<!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图片对象<br/>
        <button onclick="findBitmap()">Find</button>
    </body>
</html>

uni-app使用plus注意事项

clear

销毁Bitmap图片



void bitmap.clear();

说明：

释放Bitmap图片占用的内存资源，销毁后图片对象将不可使用，其id属性值为undefined，调用其所有方法操作都会失败。

参数：

无

返回值：

void: 无

示例：


<!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图片<br/>
        <button onclick="clearBitmap()">Clear</button>
    </body>
</html>

uni-app使用plus注意事项

load

加载Bitmap图片



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

说明：

从指定的路径（仅支持本地文件系统）中加载图片，此操作将覆盖之前的图片内容，如果加载图片失败则保留之前的图片内容。

参数：

path: (String)必选 要加载的图片路径支持以下图片路径：相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持；绝对路径 - 系统绝对路径，如Android平台"/sdcard/logo.png"，此类路径通常通过其它5+ API获取的；扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"；本地路径URL - 以“file://”开头，后面跟随系统绝对路径。
successCallback: (NativeObjSuccessCallback)必选 加载图片操作成功回调加载图片操作成功时调用。
errorCallback: (NativeObjErrorCallback)必选 加载图片操作失败回调加载图片操作失败时调用，并返回失败信息。

返回值：

void: 无

示例：


<!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图片<br/>
    </body>
</html>

uni-app使用plus注意事项

loadBase64Data

加载Base64编码格式图片到Bitmap对象



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

说明：

从Base64编码格式图片数据中加载图片，此操作将覆盖之前的图片内容，如果加载图片失败则保留之前的图片内容。

参数：

data: (String)必选 要加载图片的Base64编码格式数据如果数据格式不正确或者不是有效的图片数据则返回失败。
successCallback: (NativeObjSuccessCallback)必选 加载图片操作成功回调加载图片操作成功时调用。
errorCallback: (NativeObjErrorCallback)必选 加载图片操作失败回调加载图片操作失败时调用，并返回失败信息。

返回值：

void: 无

示例：


<!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对象<br/>
        <button onclick="loadDataImage()">LoadBase64Data</button><br/>
        <canvas id="cimg"></canvas><br/>
    </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>

uni-app使用plus注意事项

recycle

回收Bitmap图片内存



void bitmap.recycle();

说明：

释放Bitmap图片占用的内存资源，但不销毁图片对象，依然可以继续使用图片对象。当图片对象再次被使用时会自动从设置的路径（构造函数或load/save方法设置）加载到内存中。

参数：

无

返回值：

void: 无

示例：


<!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图片<br/>
        <button onclick="clearBitmap()">Recycle</button>
    </body>
</html>

uni-app使用plus注意事项

save

保存图片



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

说明：

将图片保存到指定的路径（仅支持本地文件系统），如果图片为空或者指定的路径文件已经存在则返回失败。

参数：

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://”开头，后面跟随系统绝对路径。如果指定的路径无效，或者不可访问则返回失败。
options: (BitmapSaveOptions)必选 保存图片的属性可设置保存图片的格式，压缩质量等参数。
successCallback: (BitmapSaveSuccessCallback)必选 保存图片操作成功回调加载图片操作成功时调用。
errorCallback: (NativeObjErrorCallback)必选 保存图片操作失败回调加载图片操作失败时调用，并返回失败信息。

返回值：

void: 无

示例：


<!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>
        保存图片<br/>
        <button onclick="saveBitmap()">Save</button>
    </body>
</html>

uni-app使用plus注意事项

toBase64Data

获取图片的Base64编码数据



String bitmap.toBase64Data();

说明：

读取图片的数据内容，并转换为Base64编码格式字符串。

参数：

无

返回值：

String: 图片的Base64编码数据，如果图片为空则返回null。

示例：


<!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编码数据<br/>
        <button onclick="base64Image()">Base64Data</button><br/>
        <img id="img"></img>
    </body>
</html>

uni-app使用plus注意事项

BitmapSaveOptions

JSON对象，保存图片的参数


interface BitmapSaveOptions {
    attribute Boolean overwrite;
    attribute String format;
    attribute Number quality;
    attribute Rect clip;
}

属性：

overwrite: (Boolean类型)覆盖保存图片文件仅在保存的图片路径文件存在时有效：true表示覆盖存在的文件；false表示不覆盖，如果文件存在，则返回失败。默认值为false。
format: (String类型)保存图片的格式支持"jpg"、"png"，如果未指定则默认使用指定的保存路径后缀对应的文件格式，如果后缀文件格式无效则使用jpg格式。
quality: (Number类型)保存图片的质量取值范围为1-100，1表示使用最低的图片质量（保存后的图片文件最小）、100表示使用最高的图片质量（保存后的图片文件最大）；默认值为50。
clip: (Rect类型)指定裁剪区域保存图片相对于图片的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。

ImageSlider

原生图片轮播控件对象


interface ImageSlider extends View {
    function void addImages(images);
    function Number currentImageIndex();
    function void setImages(images);
}

说明：

原生图片轮播控件对象从原生View控件（plus.nativeObj.View）继承而来，用于绘制图片轮播内容。

构造：

ImageSlider(id, styles, tags)): 创建图片轮播控件对象

方法：

addImages: 添加图片轮播控件的图片
currentImageIndex: 获取当前图片轮播控件显示的图片索引值
setImages: 设置图片轮播控件的图片

ImageSlider(id, styles, tags)

创建图片轮播控件对象


var view = new plus.nativeObj.ImageSlider(id, styles, tags);

说明：

与原生View控件一样，创建后需要调用show方法显示，或者添加到Webview中显示。

参数：

id: (String)必选 图片轮播控件对象的id与原生View控件的id作用一样。
styles: (ImageSliderStyles)可选 图片轮播控件的样式设置控件的位置、大小及显示的图片等信息。
tags: (Array[ViewDrawTagStyles])可选 图片轮播控件上需要额外绘制的内容与原生View控件一样，额外绘制自定义内容。

返回值：

ImageSlider: 原生图片轮播控件

示例：


<!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窗口显示<br/>
        <button onclick="createView()">创建图片轮播控件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

addImages

添加图片轮播控件的图片


void slider.addImages(images);

说明：

动态添加图片轮播控件显示的图片。

参数：

images: (Array[ImageSliderImageStyles])必选 添加的轮播图片数组至少必须添加一张图片的地址信息，否则无法添加。

返回值：

void: 无

示例：


<!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><br/>
        <button onclick="updateView()">添加图片</button>
    </body>
</html>

uni-app使用plus注意事项

currentImageIndex

获取当前图片轮播控件显示的图片索引值


Number slider.currentImageIndex();

说明：

索引值从0开始，即0表示图片轮播控件当前显示第一张图片。

参数：

无

返回值：

Number: 当前图片轮播控件显示的图片索引值

示例：


<!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><br/>
        <button onclick="currentImage()">获取当前显示的图片</button>
    </body>
</html>

uni-app使用plus注意事项

setImages

设置图片轮播控件的图片


void slider.setImages(images);

说明：

动态更新图片轮播控件显示的图片。

参数：

images: (Array[ImageSliderImageStyles])必选 更新后的轮播图片数组至少必须设置一张图片的地址信息，否则可能导致图片轮播控件显示不正常。

返回值：

void: 无

示例：


<!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><br/>
        <button onclick="updateView()">更新图片轮播对象</button>
    </body>
</html>

uni-app使用plus注意事项

ImageSliderStyles

图片轮播控件样式


interface ImageSliderStyles extends ViewStyles {
    attribute Boolean autoplay;
    attribute Array<ImageSliderImageStyles> images;
    attribute Boolean loop;
    attribute Boolean fullscreen;
}

说明：

从ViewStyles继承而来，扩展支持轮播图片等配置。

属性：

autoplay: (Boolean类型)是否自动播放可取值："true" - 自动播放；"false" - 不自动播放。默认值为"false"。
fullscreen: (Boolean类型)是否可全屏显示可取值："true" - 表示可全屏显示，用户点击轮播图片时全屏显示；"false" - 表示不可全屏显示，用户点击轮播图片时无响应。默认值为"true"。
loop: (Boolean类型)是否可循环轮播可取值："true" - 支持循环轮播；"false" - 不支持循环轮播。默认值为"false"。
images: (Array[ImageSliderImageStyles]类型)轮播的图片至少必须设置一张图片的地址信息，否则可能导致图片轮播控件显示不正常。
interval: (Number类型)自动播放切换时间当autoplay属性值为true时生效，单位为毫秒。默认值为3000（3秒）。

ImageSliderImageStyles

图片轮播控件中图片项配置参数

说明：

用于指定图片地址等信息。

属性：

src: (String类型)图片地址支持本地地址（相对地址、绝对路径、RelativeURL、本地路径URL）；也支持网络地址（http://或https://）。
align: (String类型)图片水平对齐方式仅在图片显示的宽度与图片轮播控件宽度不一致时有效，可取值："left" - 图片在轮播控件中水平居左对齐；"center" - 图片在轮播控件中水平居中对齐；"right" - 图片在轮播控件中水平居右对齐。默认值为"center"。
height: (String类型)图片显示的高度可取值：像素值，如"100px"；百分比，如"10%"，现对于图片轮播控件的高度；自动计算"auto"，如果指定图片宽度（width），则按图片实际大小等比缩放图片高度值，如果没有指定宽度（width值为"auto"）则自动缩放图片至可完整显示。
width: (String类型)图片显示的宽度可取值：像素值，如"100px"；百分比，如"10%"，相对于图片轮播控件的宽度；自动计算"auto"，如果指定图片高度（height），则按图片实际大小等比缩放图片宽度值，如果没有指定高度（height值为"auto"）则自动缩放图片至可完整显示。默认值为"auto"。
verticalAlign: (String类型)图片垂直对齐方式仅在图片显示的高度与图片轮播控件宽度不一致时有效，可取值："top" - 图片在轮播控件中垂直居顶对齐；"middle" - 图片在轮播控件中垂直居中对齐；"bottom" - 图片在轮播控件中垂直居底对齐。默认值为"middle"。

InputStyles

输入框样式


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;
}

说明：

用于定义输入框的显示样式，如字体大小，提示内容等信息。输入文本内容在指定区域水平居左，垂直居中显示。

属性：

type: (String类型)输入框类型可取值："email" - 邮箱地址输入框；"number" - 数字输入框；"search" - 搜索文本输入框；"tel" - 电话号码输入框；"text" - 普通文本输入框；"url" - URL地址输入框。默认为text（即普通文本输入框）。
placeholder: (String类型)输入框的提示文本当用户未输入内容时显示在编辑框中（灰色文字）。
fontSize: (String类型)输入框的字体大小可取值：字体高度像素值，数字加"px"格式字符串，如"12px"。默认值为"16px"。
borderColor: (String类型)输入框的边框颜色可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色边框。默认值为"#000000"（黑色）。
borderRadius: (String类型)输入框边框圆角半径可取值：圆角半径像素值，数字加"px"格式字符串，如"6px"。默认值为"0px"（边框无圆角）。
borderWidth: (String类型)输入框的边框宽度可取值：像素值，数字加"px"格式字符串，如"2px"。默认值为"1px"。
onComplete: (InputCompleteCallback类型)输入框完成输入事件弹出软键盘完成输入后，点击软键盘上的“完成”、“前往”按钮时触发。
onFocus: (InputEventCallback类型)输入框获取焦点事件当编辑框获取焦点时触发。
onBlur: (InputEventCallback类型)输入框失去焦点事件当编辑框失去焦点时触发。

示例：


<!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><br/>
    </body>
</html>

uni-app使用plus注意事项

Rect

区域信息对象


interface Rect {
    attribute String top;
    attribute String left;
    attribute String width;
    attribute String height;
}

说明：

包括位置、大小等信息。

属性：

top: (String类型)区域左上角的垂直偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象的高度；自动计算，如"auto",根据height值自动计算，相对于作用对象垂直居中。
left: (String类型)区域左上角的水平偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象的宽度；自动计算，如"auto",根据width值自动计算，相对于作用对象水平居中。
width: (String类型)区域的宽度可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象的宽度。
height: (String类型)区域的高度可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象的高度。内容自适应，如"wrap_content"，根据内容计算高度（如调用drawText绘制文本时支持）。

RectStyles

绘制区域样式对象


interface RectStyles {
    attribute String color;
    attribute String radius;
    attribute String borderColor;
    attribute String borderWidth;
}

说明：

用于定义矩形区域的显示样式，如空心/实心样式、圆角等信息。

属性：

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"（白色）。
radius: (String类型)矩形区域的圆角半径可取值：圆角半径像素值，数字加"px"格式字符串，如"6px"。默认值为"0px"（矩形无圆角）。
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属性值）。
borderWidth: (String类型)矩形边框宽度可取值：像素值，数字加"px"格式字符串，如"2px"。默认值为"0px"（无边框）。

示例：


<!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><br/>
    </body>
</html>

uni-app使用plus注意事项

RichTextStyles

富文本样式


interface RichTextStyles{
    attribute String align;
    attribute String family;
    attribute String fontSrc;
    attribute Function onClick;
}

说明：

用于定义富文本使用的默认使用的字体名称、字体文件路径等信息。

属性：

align: (String类型)富文本内容的水平对齐方式对整体内容有效，无法单独控制每行的内容。可取值："left"-字体在指定的区域中水平居左对齐；"center"-字体在指定的区域中水平居中对齐；"right"-字体在指定的区域中水平居右对齐。默认值为"left"。
family: (String类型)富文本默认使用的字体名称例如"Times New Roman"，如果指定名称的字体不存在，则使用系统默认字体。
fontSrc: (String类型)富文本默认使用的字体文件路径加载字体文件路径，必须为本地路径，如果指定的文件路径无效，则使用系统默认字体。
onClick: (RichTextClickedCallback类型)点击事件回调函数如果设置此属性，则表示拦截所有RichText上的点击事件（不透传事件）。如果没有设置此属性，则仅拦截操作包含onclick属性的a/img标签的点击事件。

示例：


<!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 = '<font color="#FF0000" style="font-size:10px;">文本</font><br/><a onclick="console.log(\'clicked a\')" style="font-size:12px;">链接</a><br/><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><br/>
    </body>
</html>

uni-app使用plus注意事项

Position

区域信息对象


interface Position {
    attribute String top;
    attribute String left;
    attribute String width;
    attribute String height;
    attribute String bottom;
    attribute String right;
}

说明：

包括位置、大小等信息。

属性：

top: (String类型)区域顶部相对于作用对象（或容器）向下的偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象（或容器）的高度；自动计算，如"auto",根据height值自动计算，相对于作用对象（或容器）垂直居中。
left: (String类型)区域左侧相对于作用对象（或容器）向右的偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于作用对象（或容器）的宽度；自动计算，如"auto",根据width值自动计算，相对于作用对象（或容器）水平居中。
width: (String类型)区域的宽度可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的宽度。
height: (String类型)区域的高度可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的高度。
bottom: (String类型)区域底部相对于作用对象（或容器）向上的偏移量可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的高度。当设置了top和height值时，忽略此属性值；当未设置top值时，可通过bottom属性值来确定区域的垂直位置；当未设置height值时，可通过top和bottom属性值来确定区域的高度。
right: (String类型)区域右侧相对于作用对象（或容器）向左的偏移量可取值：像素值，如"100px";百分比，如"10%"，相对于作用对象（或容器）的宽度。当设置了left和width值时，忽略此属性值；当未设置left值时，可通过right属性值来确定区域的水平位置；当未设置width值时，可通过left和right属性值来确定区域的宽度。

示例：


<!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属性定位绘制内容<br/>
        <button onclick="creatView()">显示</button>
    </body>
</html>

uni-app使用plus注意事项

TextStyles

绘制文本样式对象


interface TextStyles {
    attribute String align;
    attribute String color;
    attribute String family;
    attribute String size;
    attribute String style;
    attribute String weight;
    attribute String fontSrc;
    attribute String overflow;
}

说明：

用于定义文本的显示样式，如字体大小、字体颜色、字体粗细、字体样式、字体名称等信息。

属性：

align: (String类型)水平对齐方式可取值："left"-字体在指定的区域中水平居左对齐；"center"-字体在指定的区域中水平居中对齐；"right"-字体在指定的区域中水平居右对齐。默认值为"center"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {align:'left'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

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)"，表示红色半透明。默认值为"#000000"（黑色）。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {color:'#FF0000'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

decoration: (Boolean类型)文本装饰可取值："none" - 无装饰效果；"underline" - 文本带下划线效果；"line-through" - 文本带贯穿线（删除线）效果。默认值为"none"。


<!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%'});
    // 绘制带删除线文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {decoration:'line-through'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

family: (String类型)字体名称例如"Times New Roman"，如果指定名称的字体不存在，则使用默认字体。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {family:'Times New Roman'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

fontSrc: (String类型)字体文件路径加载字体文件路径。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {family:'Times New Roman',fontSrc:'_www/font.ttf'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

lineSpacing: (String类型)文本的行间距可取值：像素值，如"100px"；百分比，如"10%"，相对于字体的高度（size属性）；默认值为"20%"。
margin: (String类型)字体的边距用于设置字体在绘制目标区域四个方向（top/right/bottom/left）的边距，可取值：像素值，如"10px"；百分比，相对于绘制目标区域，如"5%"；默认值为"0px"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {align:'right',margin:'10px'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

overflow: (String类型)文本内容超出显示区域时处理方式可取值："clip" - 超出显示区域时内容裁剪；"ellipsis" - 超出显示区域时尾部显示省略标记（…）。默认值为"clip"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的长字符串文本内容', {top:'0px',left:'0px',width:'50%',height:'100%'}, {overflow:'ellipsis'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

size: (String类型)字体大小可取值：字体高度像素值，数字加"px"格式字符串，如"12px"。默认值为"16px"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {size:'44px'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

style: (String类型)字体样式可取值："normal" - 正常字体样式；"italic" - 斜体样式。默认值为"normal"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {style:'italic'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

verticalAlign: (String类型)垂直对齐方式文本内容在指定绘制区域中的垂直对齐方式，可取值："top" - 垂直居顶对齐；"middle" - 垂直居中对齐；"bottom" - 垂直居底对齐。默认值为"middle"。
weight: (String类型)字体粗细可取值："normal" - 普通字体；"bold" - 粗字体。默认值为"normal"。


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {weight:'bold'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

whiteSpace: (String类型)文本换行模式可取值："nowrap" - 不换行，将所有文本在一行中绘制，忽略换行符("\n")；"normal" - 自动换行，当指定的宽度无法绘制所有文本时自动换行绘制，碰到'\n'字符时强制换行。默认值为"nowrap"。

View

原生控件对象


interface View {
    readonly attribute String id;

    static function void startAnimation(options, view, otherview, callback);
    static function void clearAnimation(type);
    static function View getViewById(id);

    function void addEventListener(event, listener, capture);
    function void animate(options, callback);
    function void close();
    function void clearRect(position, id);
    function void draw(tags);
    function void drawBitmap(src, sprite, position, id);
    function void drawRect(color, position, id);
    function void drawText(text, position, styles, id);
    function void drawRichText(text, position, styles, id);
    function void drawInput(position, styles, id);
    function Boolean getInputFocusById(id);
    function String getInputValueById(id);
    function void reset();
    function void restore();
    function void show();
    function void setInputFocusById(id, focusable);
    function void setStyle(styles);
    function void setTouchEventRect(rect);
    function void hide();
    function void interceptTouchEvent(intercept);
    function Boolean isVisible();
}

说明：

原生控件对象可用于在屏幕上绘制图片或文本内容，当控件不再使用时需要调用close方法销毁控件。NView不支持zindex，后显示的覆盖先显示的；调用Webview窗口对象的append方法添加到Webview中，显示在父窗口所有子Webview的上面；不添加到Webview窗口对象，显示在所有Webview的上面。

构造：

View(id, styles, tags)): 创建View对象

属性：

id: View对象的标识

方法：

startAnimation: 静态方法，开始原生动画
clearAnimation: 静态方法，关闭原生动画窗口
getViewById: 静态方法，获取指定标识的View控件对象
addEventListener: 添加事件监听器
animate: View控件内容动画
close: 关闭View控件
clearRect: 清空矩形区域
draw: 绘制内容
drawBitmap: 绘制图片
drawRect: 绘制矩形区域
drawText: 绘制文本
drawRichText: 绘制富文本
drawInput: 绘制输入框
getInputFocusById: 获取编辑框的焦点状态
getInputValueById: 获取编辑框的内容
reset: 重置view控件显示内容
restore: 恢复View控件显示内容
show: 显示View控件
setInputFocusById: 设置编辑框的焦点状态
setStyle: 设置View控件的样式
setTouchEventRect: 指定监听触屏事件区域
hide: 隐藏View控件
interceptTouchEvent: 是否拦截View控件的触屏事件
isVisible: 获取View控件的显示状态

View(id, styles, tags)

创建View对象


var view = new plus.nativeObj.View(id, styles, tags);

说明：

创建后View对象后，需要调用View对象的show方法显示。默认显示为无内容样式（背景透明），需要调用drawBitmap/drawText方法更新控件显示的内容。

参数：

id: _(String)必选 _View控件对象的id给View控件对象指定id后，可以通过plus.nativeObj.View.getViewById()获取。如果不设置id则创建匿名View控件对象，此时必须通过返回的对象进行操作。可创建多个相同id的View控件，此时plus.nativeObj.View.getViewById()获取第一个创建的id控件对象。
styles: _(ViewStyles)可选 _View控件的样式设置控件的位置、大小等信息。
tags: _(Array[ViewDrawTagStyles])可选 _View控件初始绘制内容可设置绘制图片、矩形区域、文本等内容。

返回值：

View: 原生View控件

示例：


<!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%'},
    [{tag:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
    {tag:'rect',id:'rect',color:'#FF0000',position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
    {tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}}
    ]);
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

id

View对象的标识

说明：

String类型只读属性

在创建原生控件View对象时设置，如果没有设置标识，此属性值为null。

示例：


<!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 view = new plus.nativeObj.View("test");
    // ...
    console.log( view.id ); // 输出"test"
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}
        </script>
    </head>
    <body>
        View对象的标识<br/>
    </body>
</html>

uni-app使用plus注意事项

startAnimation

静态方法，开始原生动画


    void plus.nativeObj.View.startAnimation(options, view, otherview, callback);

说明：

参数：

options: (AnimationOptions)必选 原生动画参数用于指定动画的类型、持续时间等。
view: (AnimationViewStyles|View)必选 原生动画主窗口样式使用AnimationViewStyles类型对象时指定主窗口（底层窗口）的样式，如背景图片，绘制的文字等。使用View类型对象时则将View控件作为原生动画的主窗口，动画过程中会自动将View控件从显示栈中移除，动画结束后需要调用show方法才能重新显示。
otherview: (AnimationViewStyles|View)可选 原生动画副窗口样式使用AnimationViewStyles类型对象时指定副窗口（顶层层窗口）的样式，如背景图片，绘制的文字等。使用View类型对象时则将View控件作为原生动画的副窗口，动画过程中会自动将View控件从显示栈中移除，动画结束后需要调用show方法才能重新显示。
callback: (NativeObjSuccessCallback)可选 原生动画结束回调函数原生动画效果结束时触发。注意：动画结束时仍然会显示原生窗口（主/副窗口），需要调用plus.nativeObj.View.clearAnimation方法关闭原生动画。

返回值：

void: 无

示例：


<!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(){
    // 开始动画
    plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},{bitmap:bitmap2},function(){
        console.log('plus.nativeObj.View.startAnimation动画结束');
        // 关闭原生动画
        plus.nativeObj.View.clearAnimation();
    });
}
// 释放图片
function clearBitmap(){
    bitmap1.clear();
    bitmap2.clear();
    bitmap1=bitmap2=null;
}
        </script>
    </head>
    <body>
        <button onclick="nativeAnimation()">原生窗口动画</button><br/>
        <button onclick="clearBitmap()">释放图片资源</button><br/>
    </body>
</html>

uni-app使用plus注意事项

clearAnimation

静态方法，关闭原生动画窗口


    void plus.nativeObj.View.clearAnimation(type);

说明：

通过plus.nativeObj.View.startAnimation方法开始原生动画后，不会自动关闭原生动画窗口对象，需要调用此方法关闭原生动画。

参数：

type: (String)必选 关闭原生动画的类型可取值："none" - 无任何效果直接关闭原生动画窗口。

返回值：

void: 无

示例：


<!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));
    });
}
// 原生动画
function nativeAnimation(){
    // 开始动画
    plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},{bitmap:bitmap2},function(){
        console.log('plus.nativeObj.View.startAnimation动画结束');
        // 延时500ms关闭原生动画
        setTimeout(funciton(){
            plus.nativeObj.View.clearAnimation();
        }, 500);
    });
}
// 释放图片
function clearBitmap(){
    bitmap1.clear();
    bitmap2.clear();
    bitmap1=bitmap2=null;
}
        </script>
    </head>
    <body>
        <button onclick="nativeAnimation()">原生窗口动画</button><br/>
        <button onclick="clearBitmap()">释放图片资源</button><br/>
    </body>
</html>

uni-app使用plus注意事项

getViewById

静态方法，获取指定标识的View控件对象


View plus.nativeObj.View.getViewById(id);

说明：

如果存在多个指定id标识的View对象，则返回第一个创建的View控件对象。如果不存在指定id标识的View对象，则返回null。

参数：

id: (String)必选 要查找的View控件标识

返回值：

View: View控件对象，若没有查找到指定标识的控件对象则返回null。

示例：


<!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%'});
    // ...
    view.show();
    plus.nativeUI.toast('创建原生View控件成功');
}
// 查找View控件
function getView(){
    var view = plus.nativeObj.View.getViewById('test');
    if(view){
        console.log("查找到id为'test'的View控件对象");
        alert("查找到id为'test'的View控件对象");
    }else{
        console.log("未查找到id为'test'的View控件对象，请先创建");
        alert("未查找到id为'test'的View控件对象，请先创建");
    }
}
// 关闭View控件
function closeView(){
    var view = plus.nativeObj.View.getViewById('test');
    view.close();
    plus.nativeUI.toast('销毁View控件成功');
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件</button><br/>
        <button onclick="getView()">查找View控件</button><br/>
        <button onclick="closeView()">关闭View控件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

addEventListener

添加事件监听器


void view.addEventListener(event, listener, capture);

说明：

向View控件添加事件监听器，当指定的事件发生时，将触发listener函数的执行。可多次调用此方法向Webview添加多个监听器，当监听的事件发生时，将按照添加的先后顺序执行。可通过setTouchEventRect方法指定监听触屏操作的区域。注意：默认View控件拦截处理触屏事件，可调用view.interceptTouchEvent(false)改变为不拦截处理触屏事件（透传）。

参数：

event: _(ViewEvents)必选 _View控件事件类型
listener: (TouchEventCallback)必选 监听事件发生时执行的回调函数回调函数的参数中保存了触屏事件信息，如点击坐标等。
capture: (Boolean)可选 捕获事件流顺序，暂无效果

返回值：

void: 无

示例：


<!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;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
    view.show();
    plus.nativeUI.toast('创建成功');
}
// 监听原生View控件click事件
function addEventView(){
    view.addEventListener("click", onClick, false);
}
// 监听事件函数
function onClick(e){
    console.log("点击原生控件："+JSON.stringify(e));
    var clientX = e.clientX;    // 在View控件中的X坐标
    var clientY = e.clientY;    // 在View控件中的Y坐标
    var pageX = e.pageX;        // 在当前Webview窗口（运行此脚本的窗口）中的X坐标
    var pageY = e.pageY;        // 在当前Webview窗口（运行此脚本的窗口）中的Y坐标
    var screenX = e.screenX;    // 在屏幕中的X坐标
    var screenY = e.screenY;    // 在屏幕中的Y坐标
    var target = e.target;        // View控件对象
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件</button><br/>
        <button onclick="addEventView()">监听原生View控件click事件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

animate

View控件内容动画


void view.animate(options, callback);

说明：

动画后可能会导致View控件显示内容改变，可通过调用restore方法恢复。

参数：

options: _(ViewAnimationOptions)可选 _View控件动画参数
callback: _(NativeObjSuccessCallback)可选 _View控件动画结束回调函数View控件动画效果结束时触发。注意：动画结束时仍然会显示View控件，需要调用其clear方法关闭View控件。

返回值：

void: 无

示例：


<!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 = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'100%',width:'100%'});
    // 绘制图片
    view.drawBitmap( bitmap2, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
    // 开始动画
    plus.nativeObj.View.startAnimation( {type:'pop-in'},{bitmap:bitmap1},view,function(){
        console.log('plus.nativeObj.View.startAnimation动画结束');
        // 开始view控件动画
        view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}},function(){
            plus.nativeObj.View.clearAnimation();
        });
    });
}
        </script>
    </head>
    <body>
        <button onclick="nativeAnimation()">原生窗口动画&amp;View控件动画</button><br/>
    </body>
</html>

uni-app使用plus注意事项

close

关闭View控件


void view.close();

说明：

释放View控件资源，View对象不可再操作，如果View控件已经显示则自动隐藏。

参数：

无

返回值：

void: 无

示例：


<!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;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
    view.show();
}
// 关闭原生View控件
function closeView(){
    view.close();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
        <button onclick="closeView()">关闭View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

clearRect

清空矩形区域


void view.clearRect(position, id);

说明：

清除指定矩形区域内容，透明显示其后面的内容。可多次调用设置多个区域透明。

参数：

position: (Position)可选 清除的矩形区域相对于View控件的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
id: (String)可选 绘制操作标识当前View控件已经存在此清除操作（包括绘制操作drawBitmap/drawRect/drawText）标识，则更新绘制操作。否则做为新的清除操作处理。

返回值：

void: 无

示例：


<!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("#FF0000", {top:'0px',left:'0px',width:'100%',height:'100%'});
    // 清空矩形区域
    view.clearRect({top:'11px',left:'100px',width:'100px',height:'22px'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

draw

绘制内容


void view.draw(tags);

说明：

在当前View控件之上绘制指定的内容，可一次指定绘制多个元素，绘制元素可以是图片/矩形区域/文本，即将多次调用drawBitmap/drawRect/drawText方法合并调用一次draw方法来实现，推荐使用draw方法来替换多次调用drawBitmap/drawRect/drawText。

参数：

tags: _(Array[ViewDrawTagStyles])可选 _View控件初始绘制内容可设置绘制图片、矩形区域、文本等内容。

返回值：

void: 无

示例：


<!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:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
        {tag:'rect',id:'rect',color:'#FF0000',position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
        {tag:'font',id:'font',text:'原生View控件',textStyles:{size:'18px'},position:{top:'0px',left:'0px',width:'100%',height:'1px'}}
        ]);
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

drawBitmap

绘制图片


void view.drawBitmap(src, sprite, position, id);

说明：

在当前View控件之上绘制指定的图片，如果图片无效则不做任何操作。

参数：

src: (String|Bitmap)必选 绘制的图片资源可以是图片资源路径（字符串类型）或者图片对象（plus.nativeObj.Bitmap对象）。src也可以是图片路径，要求为本地路径，可支持以下路径：相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持；绝对路径 - 系统绝对路径，如Android平台"/sdcard/logo.png"，此类路径通常通过其它5+ API获取的；扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"；本地路径URL - 以“file://”开头，后面跟随系统绝对路径。src为图片路径时支持gif图片，当设置的图片路径文件使用".gif"后缀时则认为是gif图片，如"_www/loading.gif"。
sprite: (Position)可选 图片源的绘制区域相对于图片的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
position: (Position)可选 绘制图片的目标区域相对于View控件的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。当left/top设置为具体值时，如果src区域与dst区域的宽/高不一致时采用缩放绘制。
id: (String)可选 绘制操作标识当前View控件已经存在此绘制操作（包括drawBitmap/drawRect/drawText）标识，则更新绘制操作。否则做为新的绘制操作处理。

返回值：

void: 无

示例：


<!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;
// 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));
    });
}
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%'});
    // 绘制图片
    view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

drawRect

绘制矩形区域


void view.drawRect(color, position, id);

说明：

在当前View控件之上绘制指定颜色的矩形区域。

参数：

styles: (RectStyles|String)必选 矩形区域的样式字符串类型或RectStyles类型，使用字符串时表示设置矩形区域的颜色，可取值："#RRGGBB"格式字符串，如"#FF0000"表示绘制红色区域；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为"#FFFFFF"（白色）。
position: (Position)可选 绘制的矩形区域相对于View控件的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
id: (String)可选 绘制操作标识当前View控件已经存在此绘制操作（包括drawBitmap/drawRect/drawText）标识，则更新绘制操作。否则做为新的绘制操作处理。

返回值：

void: 无

示例：


<!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:'#FF0000'}, {top:'0px',left:'0px',width:'100%',height:'100%'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

drawText

绘制文本


void view.drawText(text, position, styles, id);

说明：

在当前View控件之上绘制指定的文本内容，如果文本为空则不做任何操作。

参数：

text: (String)必选 要绘制的文本内容
position: (Position)可选 绘制文本的目标区域相对于View控件的区域信息，文字在目前区域中水平/垂直方向居中绘制，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。height属性值支持设置为"wrap_content"，表示文本高度根据内容自动计算，此时通过top来定位文本绘制的起始位置。
styles: (TextStyles)可选 绘制文本的样式用于指定字体大小、字体颜色、字体类型等信息。
id: (String)可选 绘制操作标识当前View控件已经存在此绘制操作（包括drawBitmap/drawRect/drawText）标识，则更新绘制操作。否则做为新的绘制操作处理。

返回值：

void: 无

示例：


<!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%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {top:'0px',left:'0px',width:'100%',height:'100%'}, {size:'22px',color:'#FF0000'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

drawRichText

绘制富文本


void view.drawRichText(text, position, styles, id);

说明：

在当前View控件之上绘制指定的文本内容，如果文本为空则不做任何操作。

参数：

text: (String)必选 要绘制的富文本内容富文本使用html的部分标签，具体标签如下：图片标签；字体标签，内容在一行显示不下时自动换行，行高默认为字体的1.2倍；换行标签；链接标签链接地址。如示例“链接地址”。
position: (Position)可选 绘制富文本的目标区域相对于View控件的区域信息，富文本内容在区域中居顶从左到右绘制，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。height属性值支持设置为"wrap_content"，表示文本高度根据内容自动计算，此时通过top来定位文本绘制的起始位置。
styles: (RichTextStyles)可选 绘制富文本的样式用于指定默认字体等信息。
id: (String)可选 绘制操作标识当前View控件已经存在此绘制操作（包括drawBitmap/drawRect/drawText/drawRichText）标识，则更新绘制操作。否则做为新的绘制操作处理。

返回值：

void: 无

示例：


<!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 = '<font color="#FF0000" style="font-size:10px;">文本</font><br/><a href="" style="font-size:12px;">链接</a><br/><img src="./t.png" width="20px" height="20px"></img>';
    // 绘制文本
    view.drawRichText(richtext, {top:'0px',left:'0px',width:'100%',height:'wrap_content'});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

drawInput

绘制输入框


void view.drawInput(position, styles, id);

说明：

在当前View控件之上绘制输入框。

参数：

position: (Position)可选 绘制输入框的目标区域相对于View控件的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
styles: (InputStyles)可选 输入框的样式用于定义输入框的显示样式，如字体大小，提示内容等信息。
id: (String)可选 绘制操作标识当前View控件已经存在此绘制操作（drawInput）标识，则更新绘制操作；否则做为新的绘制操作处理。也用于getInputValueById方法获取编辑框的输入内容。

返回值：

void: 无

示例：


<!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%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px'}, 'input');
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

getInputFocusById

获取编辑框的焦点状态


Boolean view.getInputFocusById(id);

说明：

通过id查找到指定的编辑框，获取其焦点状态。如果指定的id无效则返回null。

参数：

id: (String)可选 输入框的操作标识

返回值：

Boolean: 编辑框的焦点状态，true表示编辑框获取焦点，false表示编辑框失去焦点

示例：


<!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控件
var view = null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px'}, 'input');
    view.show();
}
// 获取编辑框焦点状态
function getFocus(){
    var focusable = view.getInputFocusById("input');
    console.log("input focus status: "+focusable);
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建带编辑框的View对象</button><br/>
        <button onclidk="getFocus()">获取编辑框焦点状态</button><br/>
    </body>
</html>

uni-app使用plus注意事项

getInputValueById

获取编辑框的内容


String view.getInputValueById(id);

说明：

通过id查找到指定的编辑框，获取其输入的字符串。如果指定的id无效则返回null。

参数：

id: (String)可选 输入框的操作标识

返回值：

String: 编辑框输入的文本

示例：


<!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控件
var view = null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px'}, 'input');
    view.show();
}
// 获取编辑框内容
function getText(){
    if(!view){
        console.log("View is null!");
        return;
    }
    var txt = view.getInputValueById("input");
    console.log("Input text:"+txt);
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建带编辑框的View对象</button><br/>
        <button onclidk="getText()">获取编辑的内容</button>
    </body>
</html>

uni-app使用plus注意事项

reset

重置view控件显示内容


void view.reset();

说明：

清除调用drawBitmap、drawText方法绘制的内容，将View控件重置为空内容（透明不可见）。

参数：

无

返回值：

void: 无

示例：


<!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(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    view.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}
// 绘制View控件
function drawView(){
    // 绘制文本
    view.drawText( 'Test绘制文本内容', {}, {size:'60px',color:'#FF0000'} );
}
// 重置View控件
function resetView(){
    view.reset();
}
        </script>
    </head>
    <body>
        <button onclick="drawView()">绘制View对象</button><br/>
        <button onclick="resetView()">重置View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

restore

恢复View控件显示内容


void view.restore();

说明：

恢复调用animate方法改变View控件的内容，更新至动画前的内容。

参数：

无

返回值：

void: 无

示例：


<!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,view=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));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}
// 创建View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'100px',left:'0px',height:'100%',width:'100%'});
    // 绘制图片
    view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
    view.show();
}
// View控件动画
function animateView(){
    // 开始view控件动画
    view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}},function(){
        console.log("View控件动画结束");
    });
}
// 恢复View控件
function restoreView(){
    view.restore();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件</button><br/>
        <button onclick="animateView()">View控件动画</button><br/>
        <button onclick="restoreView()">恢复View控件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

show

显示View控件


void view.show();

说明：

将View控件显示到屏幕，显示在所有Webview窗口之上。

参数：

无

返回值：

void: 无

示例：


<!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%'});
    // 绘制文本
    view.drawText( 'Test', {}, {size:'60px',color:'#FF0000'} );
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

setInputFocusById

设置编辑框的焦点状态


void view.setInputFocusById(id, focusable);

说明：

通过id查找到指定的编辑框，并设置编辑框的焦点状态。如果指定的id无效则操作无效。

参数：

id: (String)必选 输入框的操作标识
focusable: (Boolean)必选 输入框的焦点状态可取值：true - 表示设置输入框获取焦点状态；false - 表示设置输入框失去焦点状态。

返回值：

String: 编辑框输入的文本

示例：


<!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控件
var view = null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px'}, 'input');
    view.show();
}
// 设置编辑框获取焦点
function setFocus(){
    view.setInputFocusById("input', true);
}
// 设置编辑框失去焦点
function setBlur(){
    view.setInputFocusById("input", false);
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建带编辑框的View对象</button><br/>
        <button onclidk="setFocus()">设置获取焦点</button><br/>
        <button onclidk="setBlur()">设置失去焦点</button><br/>
    </body>
</html>

uni-app使用plus注意事项

setStyle

设置View控件的样式


void view.setStyle(styles);

说明：

动态更新View控件样式。

参数：

styles: _(ViewStyles)可选 _View控件的样式更新控件的位置、大小等信息。

返回值：

void: 无

示例：


<!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控件
var view=null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%'});
    // 绘制区域
    view.drawRect("#FF0000", {top:'0px',left:'0px',width:'100%',height:'50%'});
    view.drawRect("#00FF00", {top:'50%',left:'0px',width:'100%',height:'50%'});
    view.show();
}
// 更新原生View控件
function updateView(){
    view.setStyle({top:'0px',left:'0px',height:'50%',width:'100%'});
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
        <button onclick="updateView()">更新View对象</button>
    </body>
</html>

uni-app使用plus注意事项

setTouchEventRect

指定监听触屏事件区域


void view.setTouchEventRect(rect);

说明：

当调用addEventListener监听View控件事件时，可调用此方法限定监听事件的区域，仅当用户触屏操作在指定区域时才触发监听事件。非限定监听事件的区域则不拦截，透传给其它窗口处理。注意：此操作覆盖之前设置的区域。

参数：

rect: (Array[Rect]|Rect)可选 要监听触屏事件区域参数类型为数组（Array）时可支持设置多个区域。Rect为相对于View控件的区域信息（超出View控件区域则无效），默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}，即默认拦截View控件所有区域。

返回值：

void: 无

示例：


<!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控件
var view=null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%'});
    // 绘制区域
    view.drawRect("#FF0000", {top:'0px',left:'0px',width:'100%',height:'50%'});
    view.drawRect("#00FF00", {top:'50%',left:'0px',width:'100%',height:'50%'});
    view.show();
}
// 监听事件
function listenerEvent(){
    view.setTouchEventRect({top:'0px',left:'0px',width:'100%',height:'50%'});
    view.addEventListener("click", function(e){
        console.log("点击原生控件："+JSON.stringify(e));
    }, false);
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
        <button onclick="listenerEvent()">监听事件</button>
    </body>
</html>

uni-app使用plus注意事项

hide

隐藏View控件


void view.hide();

说明：

将View控件从屏幕隐藏，如果View控件未显示则不做任何操作。

参数：

无

返回值：

void: 无

示例：


<!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;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
    plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
    view.show();
}
// 隐藏原生View控件
function hideView(){
    view.hide();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件</button><br/>
        <button onclick="showView()">显示View控件</button><br/>
        <button onclick="hideView()">隐藏View控件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

interceptTouchEvent

是否拦截View控件的触屏事件


void view.interceptTouchEvent(intercept);

说明：

设置为拦截后View控件上的触屏事件不再传递（即不透传），否则触屏事件将继续传递给View控件下的其它窗口处理（即透传）。注意：View控件默认拦截触屏事件（不透传）。

参数：

intercept: (Boolean)可选 是否拦截触屏事件true表示拦截处理触屏事件，false表示不拦截触屏事件，透传事件给其它窗口处理。默认值为true。

返回值：

void: 无

示例：


<!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;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
    view.interceptTouchEvent(true);
    plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
    view.show();
}
// 隐藏原生View控件
function hideView(){
    view.hide();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件并拦截事件</button><br/>
        <button onclick="showView()">显示View控件</button><br/>
        <button onclick="hideView()">隐藏View控件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

isVisible

获取View控件的显示状态


Boolean view.isVisible();

参数：

无

返回值：

Boolean: 如果View控件显示则返回true，如果View控件未显示则返回false。

示例：


<!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;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'60px',width:'100%'});
    // 绘制文本
    view.drawText('原生绘制的文本内容', {}, {size:'60px',color:'#FF0000'});
    plus.nativeUI.toast('创建成功');
}
// 显示原生View控件
function showView(){
    view.show();
}
// 隐藏原生View控件
function hideView(){
    view.hide();
}
// 查看View控件的显示状态
function visibleView(){
    var visible = view.isVisible();
    console.log('View控件状态:'+visible);
    alert('View控件状态:'+visible);
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View控件</button><br/>
        <button onclick="showView()">显示View控件</button><br/>
        <button onclick="hideView()">隐藏View控件</button><br/>
        <button onclick="visibleView()">获取View控件的显示状态</button><br/>
    </body>
</html>

uni-app使用plus注意事项

ViewAnimationOptions

View控件动画参数


interface ViewAnimationOptions {
    attribute String type;
    attribute Number duration;
    attribute Number frames;
    attribute Rect region;
}

说明：

指定动画的类型、持续时间等信息。

属性：

type: (String类型)动画类型可取值："shrink" - 从上到下分块收缩清除窗口动画。
duration: (Number类型)动画持续时间单位为毫秒，默认值为200ms。
frames: (Number类型)动画帧数必须为大于0的整数，默认值为12。
region: (Rect类型)动画作用区域支持以下属性：top - 区域距离控件顶部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'；bottom - 区域距离控件底部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'；left - 区域距离控件左侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'；right - 区域距离控件右侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'。如“{top:'44px',bottom:'48px'}”。

示例：


<!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;
// 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));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener("plusready",plusReady,false);
}
var view=null;
// 创建原生View控件
function createView(){
    view = new plus.nativeObj.View('test',{top:'0px',left:'0px',height:'44px',width:'100%'});
    // 绘制图片
    view.drawBitmap( bitmap1, {top:'0px',left:'0px',width:'100%',height:'100%'}, {top:'auto',left:'auto',width:'100%',height:'100%'} );
    view.show();
}
function animateView(){
    view.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'}});
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
        <button onclick="animateView()">View对象动画</button><br/>
    </body>
</html>

uni-app使用plus注意事项

ViewDrawTagStyles

View控件绘制元素参数


interface ViewDrawTagStyles {
    attribute String id;
    attribute String tag;
    attribute String color;
    attribute InputStyles inputStyles;
    attribute Position position;
    attribute RectStyles rectStyles;
    attribute String src;
    attribute Position sprite;
    attribute String text;
    attribute TextStyles textStyles;
    attribute RichTextStyles richTextStyles;
}

说明：

指定绘制图片、矩形区域、文本内容等信息。

属性：

id: (String类型)绘制操作标识可通过view对象的drawBitmap/drawRect/drawText/clearRect方法进行更新。
tag: (String类型)绘制操作类型可取值："img" - 绘制图片，与drawBitmap操作一致，此时id、src、position、sprite属性值有效；"rect" - 绘制矩形区域，与drawRect操作一致，此时id、color、position、rectStyles属性值有效；"font" - 绘制文本内容，与drawText操作一致，此时id、position、text、textStyles属性值有效；"richtext" - 绘制富文本内容，与drawRichText操作一致，此时id、position、text、richTextStyles属性值有效；"input" - 绘制输入框内容，此时id、position、inputStyles属性值有效。
color: (String类型)矩形区域颜色不推荐使用（推荐使用rectStyles），可取值："#RRGGBB"格式字符串，如红色为"#FF0000"。"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。当tag属性值为"rect"时有效，用于指定矩形区域颜色，默认值为"#FFFFFF"（白色）。
inputStyles: (InputStyles类型)绘制输入框的样式当tag属性值为"input"时有效，用于指定绘制输入框的样式、大小位置等信息。，
position: (Position类型)绘制内容区域当tag属性值为"img"时，用于指定绘制图片的目标区域；当tag属性值为"rect"时，用于指定绘制的矩形区域；当tag属性值为"font"时，用于指定绘制文本的目标区域，此时height属性值支持设置为"wrap_content"，表示文本高度根据内容自动计算，此时通过top来定位文本绘制的起始位置。相对于View控件的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
rectStyles: (RectStyles类型)绘制区域的样式当tag属性值为"rect"时有效，用于指定绘制区域的样式、填充颜色、圆角大小等信息。
src: (String类型)绘制的图片资源当tag属性值为"img"时有效，可以是图片资源路径（字符串类型）或者图片对象（plus.nativeObj.Bitmap对象）。src路径支持gif图片，但设置的图片路径文件使用".gif"后缀时则认为是gif图片，如"_www/loading.gif"。
sprite: (Position类型)图片源的绘制区域当tag属性值为"img"时有效，用于指定图片源的绘制区域，相对于图片的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。
text: (String类型)绘制的文本内容当tag属性值为"font"时有效，用于保存绘制的文本内容。
textStyles: (TextStyles类型)绘制文本的样式当tag属性值为"font"时有效，用于指定绘制文本内容的字体大小、字体颜色、字体类型等信息。
richTextStyles: (RichTextStyles类型)绘制富文本的样式当tag属性值为"richtext"时有效，用于指定绘制富文本内容的默认字体颜色、字体类型等信息。

示例：


<!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:'img',id:'img',src:'nbg.png',position:{top:'0px',left:'0px',width:'100%',height:'100%'}},
        {tag:'rect',id:'rect',rectStyles:{color:'#FF0000'},position:{top:'0px',left:'0px',width:'100%',height:'1px'}},
        {tag:'font',id:'font',text:'原生控件',textStyles:{size:'18px'}},
        {tag:'input',id:'input','inputStyles':{fonstSize:'16px'}},
        ]);
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

ViewEvents

View控件事件

常量：

"doubleclick": (String类型)双击事件双击屏幕时触发。注意：如果将View控件设置为不拦截触屏事件（view.interceptTouchEvent(false)）则不会触发此事件。
"click": (String类型)点击事件当手指点击屏幕时触发。注意：如果将View控件设置为不拦截触屏事件（view.interceptTouchEvent(false)）则不会触发此事件。
"touchstart": (String类型)开始触屏事件当手指触摸屏幕时候触发。注意：如果将View控件设置为不拦截触屏事件（view.interceptTouchEvent(false)）则不会触发此事件。
"touchmove": (String类型)触摸滑屏事件当手指在屏幕上滑动的时候连续地触发。注意：如果将View控件设置为不拦截触屏事件（view.interceptTouchEvent(false)）则不会触发此事件。
"touchend": (String类型)结束触屏事件当手指从屏幕上离开的时候触发。注意：如果将View控件设置为不拦截触屏事件（view.interceptTouchEvent(false)）则不会触发此事件。

ViewStatusbarStyles

JSON对象，View控件的系统状态栏区域样式

说明：

仅在应用设置为沉浸式状态栏样式下有效，非沉浸式状态栏样式下忽略此属性。

属性：

background: (String类型)系统状态栏区域背景颜色颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景，默认值为应用manifest.json中plus->statusbar->background属性配置的值。

ViewStyles

View控件样式


interface ViewStyles {
    attribute String backgroundColor;
    attribute String left;
    attribute String top;
    attribute String bottom;
    attribute String height;
    attribute String width;
    attribute String dock;
    attribute Number opacity;
    attribute String position;
    attribute ViewStatusbarStyles statusbar;
}

说明：

包括位置、大小等信息等，其中位置信息相对于父容器控件进行计算。

属性：

backgroundColor: (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"（白色）。 "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为"#FFFFFF"（白色）。
bottom: _(String类型)_View控件垂直向上的偏移量现对于父容器底部的距离，可取值：像素值，如"100px"；百分比，如"10%"，相对于父容器的高度，如果没有父容器则相对于屏幕高度。当设置了top和height值时，忽略此属性值；未设置height值时，可通过top和bottom属性值来确定View控件的高度。
dock: _(String类型)_View控件的停靠方式仅当View控件添加到Webview窗口对象中并且position属性值设置为"dock"时才生效，此时View控件挤压Webview窗口的大小。可取值："top"，控件停靠则页面顶部；"bottom"，控件停靠在页面底部；"right"，控件停靠在页面右侧；"left"，控件停靠在页面左侧。默认值为"top"。
height: (String类型)区域的高度可取值：像素值，如"100px"；百分比，如"10%"，相对于父容器的高度，如果没有父容器则相对于屏幕高度；内容自适应，如"wrap_content"，根据内容计算控件的高度。默认值为"100%"。
left: (String类型)区域左上角的水平偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于父控件的宽度；自动计算，如"auto"，根据width值自动计算，相对于父控件水平居中。默认值为"0px"。
opacity: _(Number类型)_View控件的不透明度取值范围为0-1，0为全透明，1为不透明，默认值为1，即不透明。

平台支持

Android - 4.0+ (支持): 需Android4.0及以上平台才支持，Android4.0以前平台忽略此属性。
iOS - 7.0+ (支持)
- position: _(String类型)_View控件的排版方式仅当View控件添加到Webview窗口对象中时才生效。可取值："static"，View控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，Veiw控件在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，View控件在页面中停靠，停靠的位置由dock属性值决定。默认值为"absolute"。

statusbar: _(ViewStatusbarStyles类型)_View控件的状态栏样式仅在应用设置为沉浸式状态栏样式下有效，设置此属性后将自动保留系统状态栏区域不被View控件占用（即View控件非沉浸式样式显示）。
top: _(String类型)_View控件左上角的垂直偏移量可取值：像素值，如"100px"；百分比，如"10%"，相对于父控件的高度；自动计算，如"auto",根据height值自动计算，相对于父控件垂直居中。
width: (String类型)区域的宽度可取值：像素值，如"100px";百分比，如"10%"，相对于父控件的宽度。

示例：


<!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控件
var view=null;
function createView(){
    view = new plus.nativeObj.View('test',{top:'200px',left:'0px',height:'50%',width:'100%',backgroundColor:'#FF0000'});
    view.drawRect("#000000", {top:'25%',left:'25%',width:'50%',height:'50%'}, 'test');
    view.show();
}
// 更新原生View控件
function updateView(){
    view.setStyle({backgroundColor:'#00FF00'});    // 更新背景颜色
    view.drawRect('#FFFFFF', {top:'25%',left:'25%',width:'50%',height:'50%'}, 'test');    // 更新区域
}
// 关闭View控件
function closeView(){
    view.close();
    view=null;
}
        </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="createView()">创建View对象</button><br/>
        <button onclick="updateView()">更新View对象</button><br/>
        <button onclick="closeView()">关闭View对象</button>
    </body>
</html>

uni-app使用plus注意事项

BitmapSaveSuccessCallback

图片保存操作成功回调接口


void onSuccess( Event event ){
    // Code here
    var target = event.target; // 保存后的图片url路径，以"file://"开头
    var size = event.size; // 保存后图片的大小，单位为字节（Byte）
    var width = event.width; // 保存后图片的实际宽度，单位为px
    var height = event.height; // 保存后图片的实际高度，单位为px
}

参数：

event: (Event)可选 保存后的图片信息可通过event.target（String类型）获取保存后的图片url路径，以"file://"开头，可直接在html页面中通过src属性引用，如Android平台"file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.jpg"，iOS平台"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png"；可通过event.size（Number类型）获取保存后图片的大小，单位为字节（Byte）；可通过event.width（Number类型）获取保存后的图片的实际宽度，单位为px；可通过event.height（Number类型）获取保存后的图片的实际高度，单位为px。

返回值：

void: 无

InputCompleteCallback

输入框完成输入回调函数


void onComplete(Event event){
    // Code here
    var text = event.text; // 保存用户输入的内容
}

说明：

弹出软键盘完成输入后，点击软键盘上的“完成”、“前往”按钮时触发。

参数：

event: (Event)可选 保存编辑框输入信息可通过event.text（String类型）获取用户输入的文本。

返回值：

void: 无

示例：


<!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%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px',onComplete:function(e){
        console.log("Input completed:"+e.text);
    }}, 'input');
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

InputEventCallback

输入框事件回调函数


void onEvent(Event event){
    // Code here
    var id = event.id; // 编辑框的标识
}

说明：

输入框获取/失去焦点时触发。

参数：

event: (Event)可选 输入框信息可通过event.id（String类型）获取输入框的标识。

返回值：

void: 无

示例：


<!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%'});
    view.drawInput({top:'0px',left:'0px',width:'100%',height:'20px'}, {fontSize:'16px',onFocus:function(e){
        console.log("Input focused:"+e.id);
    },onBlur:function(e){
        console.log("Input blured:"+e.id);
    }}, 'input');
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

RichTextClickedCallback

富文本区域点击事件回调函数


void onEvent(Event event){
    // Event handled code.
    var tagName = event.tagName;
    var href = event.href;
    var src = event.src;
}

说明：

用户点击RichText区域时触发，如果点击RichText的a标签则回调函数event参数中包含tagName（值为"a"）和href属性；如果点击RichText的img标签则回调函数event参数中包含tagName（值为"img"）和src属性；如果点击其它区域则回调函数event参数中包含tagName（值为""）。

参数：

event: (Event)必选 点击事件参数包含以下属性："tagName" - 如果点击RichText上的a/img标签则为"a"/"img"，否则未空字符串""；"href" - 点击RichText上的a标签时有效；"src" - 点击RichText上的img标签时有效。

返回值：

void: 无

示例：


<!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 = '<font color="#FF0000" style="font-size:10px;">文本</font><br/><a href="a-href" style="font-size:12px;">链接</a><br/><img href="img-href" 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',onClick:function(e){
        console.log("Clicked: "+JSON.stringify(e));
    }});
    view.show();
}
        </script>
    </head>
    <body>
        <button onclick="createView()">创建View对象</button><br/>
    </body>
</html>

uni-app使用plus注意事项

TouchEventCallback

触屏事件的回调函数


void onEvent(Event e){
    // Event handled code.
    var clientX = e.clientX;
    var clientY = e.clientY;
    var pageX = e.pageX;
    var pageY = e.pageY;
    var screenX = e.screenX;
    var screenY = e.screenY;
    var target = e.target;
    var imageIndex = e.currentImageIndex;
}

参数：

event: (Event)必选 触屏数据Event对象包含以下属性：target：保存触发此事件的对象；clientX：Number类型，保存触摸目标在View控件中的X坐标；clientY：Number类型，保存触摸目标在View控件中的Y坐标；pageX：Number类型，保存触摸目标在当前页面（运行此脚本的窗口）中的X坐标；pageY：Number类型，保存触摸目标在当前页面（运行此脚本的窗口）中的Y坐标；screenX：Number类型，保存触摸目标在屏幕中的X坐标；screenY：Number类型，保存触摸目标在屏幕中的Y坐标；currentImageIndex：Number类型，保存当前图片轮播控件显示的图片索引值（从0开始），仅监听图片轮播控件（ImageSlider）的click事件时包含此属性。

返回值：

void: 无

NativeObjSuccessCallback

操作成功回调函数接口


void onSuccess(){
    // Code here
}

参数：

无

返回值：

void: 无

NativeObjErrorCallback

操作错误回调函数接口


function void onError( Exception error ) {
    // Error.
    var code = error.code; // 错误编码
    var message = error.message; // 错误描述信息
}

参数：

error: (Exception)必选 用户选择操作失败信息可通过error.code（Number类型）获取错误编码；可通过error.message（String类型）获取错误描述信息。

返回值：

void: 无