UIPhotoViewer

open close hide show setIndex getIndex getImage setImage appendImage deleteImage clearCache

论坛示例

为帮助用户更好更快的使用原生插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UIPhotoViewer 是一个图片浏览器，是photoBrowser原生插件的升级版，支持gif图的浏览，支持单张、多张图片查看的功能，可放大缩小图片(android，gif暂不支持缩放)，支持本地和网络图片资源。若是网络图片资源则会被缓存到本地，缓存到本地上的资源可以通过 clearCache 接口手动清除。同时本原生插件支持横竖屏显示，在本app支持横竖屏的情况下，本原生插件底层会自动监听当前设备的位置状态，自动适配横竖屏以展示图片。使用此原生插件开发者看实现炫酷的图片浏览器。

原生插件使用攻略

开发者使用此原生插件时可以用 frame 的形式打开并添加到主窗口上，该 frame 不可设置位置和大小，其宽高默认和当前设备屏幕的宽高相同。原生插件打开后可再 open 一个自定义的 frame 贴在本原生插件上，从而实现自定义图片浏览器样式和功能。需要适配横竖屏时，开发者可通过api对象监听当前设备的位置状态，以改变自己自定义的 frame 的横竖屏展示，而图片的展示原生插件内部会自动适配横竖屏，最终实现了整个浏览器的横竖屏配置。在本原生插件的 open 接口内可以获取图片的下载状态，通过 getImage 接口获取目标图片在本地的绝对路径，以实现保存到系统相册的功能。详情请参考原生插件接口参数说明。

android编译说明

  • 使用升级环境编译
  • 最低版本支持到4.0及4.0以上

原生插件接口

open

打开图片浏览器

open({params}, callback(ret))

params

images：

  • 类型：数组
  • 描述：要读取的图片路径组成的数组，图片路径支持 fs://、http:// 协议

activeIndex：

  • 类型：数字
  • 描述：（可选项）当前要显示的图片在图片路径数组中的索引
  • 默认值：0

placeholderImg：

  • 类型：字符串
  • 描述：（可选项）当加载网络图片时显示的占位图路径，要求本地图片路径（widget://、fs://）

bgColor：

  • 类型：字符串
  • 描述：（可选项）图片浏览器背景色，支持 rgb、rgba、#
  • 默认：#000

zoomEnabled：

  • 类型：布尔
  • 描述：（可选项）是否打开缩放手势识别功能（随手势放大缩小图片）
  • 默认：true

mode：

  • 类型：数字
  • 描述：（可选项）图片的现实模式；1：为图片原本大小 2：图片宽度等比例放大到宽等于屏幕款;android不支持此参数
  • 默认：1

gestureClose：

  • 类型：布尔类型
  • 描述：（可选项）手势关闭，上划或下划关闭控件
  • 默认：false

atime：

  • 类型：数字
  • 描述：（可选项）打开关闭动画的执行时间，传0无动画
  • 默认：0

isBigGig：

  • 类型：布尔类型
  • 描述：（可选项）是否有大gif图片，如果网络图片中存在比较大的gif图片，比如一张gif图包含300张图片，将会照成内存溢出产生崩溃，将此参数设置成为true，包含超过50张的gif图原生插件内部将处理成包含50张以下图片的gif图，此参数仅支持iOS
  • 默认：false

rotateBtn：

  • 类型：JSONObject
  • 描述：（可选项）预览图片时的旋转按钮
  • 内部字段：
{
     path: '',    //字符串类型；旋转按钮资源路径 支持fs、widget
     w: ,             //数字类型；旋转按钮的宽度 
     h: ,             //数字类型；旋转按钮的高度
     x: ,             //数字类型；旋转按钮的距离预览view的左边距
     y: ,             //数字类型；旋转按钮的距离预览view的上边距
}

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
     eventType: 'show',    //字符串类型；交互事件类型，取值范围如下：
                           //show：          打开浏览器并显示
                           //change：        用户切换图片
                           //click：         用户单击图片浏览器
                           //loadImgSuccess：网络图片下载成功的回调事件
                           //loadImgFail：   网络图片下载失败的回调事件
                           //longPress：     用户长按图片事件
                           //panGesture：     用户手指移动                        
                           //gestureColse：     手势关闭                      
     index: 2,             //数字类型；      当前图片在图片路径数组中的索引
     point:{               //json对象；手指所在位置距离手指按下位置的坐标，实时返回，panGesture事件返回
        x:0,               //数字类型；x坐标
        y:0                //数字类型；y坐标
     }
}

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.open({
    images: [
        'fs://img/image1.png',
        'fs://img/encryption.png'
    ],
    placeholderImg: 'widget://res/img/yonbuilder.png',
    bgColor: '#000'
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭图片浏览器

close()

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏图片浏览器

hide()

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示图片浏览器

show()

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setIndex

设置当前显示图片

setIndex({params})

params

index：

  • 类型：数字
  • 描述：（可选项）当前要显示的图片在图片路径数组中的索引
  • 默认值：0

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.setIndex({
    index: 0
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getIndex

获取当前图片在图片路径数组内的索引

getIndex(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
     index: 2        //数字类型；当前图片在图片路径数组中的索引
}

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.getIndex(function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getImage

获取指定图片在本地的绝对路径

getImage({params}, callback(ret))

params

index：

  • 类型：数字
  • 描述：指定图片在图片数组中的索引
  • 默认：当前图片在图片数组中的索引

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
     path: ‘’        //字符串类型；获取的绝对
}

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.getImage({
    index: 2
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setImage

设置指定位置的图片，若设置的是网络图片加载成功或失败会给 open 接口回调该加载事件

setImage({params})

params

index：

  • 类型：数字
  • 描述：（可选项）指定图片在图片数组中的索引
  • 默认：当前图片在图片数组中的索引

image：

  • 类型：字符串
  • 描述：要设置的图片路径，支持本地和网络路径（fs://、http://）

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.setImage({
    index: 2,
    image: '//docs.yonbuilder.com/img/docImage/imageBrowser.jpg'
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

appendImage

往已打开的图片浏览器里添加图片（拼接在最后）

appendImage({params})

params

images：

  • 类型：数组
  • 描述：要拼接的图片路径组成的数组，图片路径支持 fs://、http:// 协议

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.appendImage({
    images: [
        'fs://img/image1.png',
        'fs://img/encryption.png'
    ]
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

deleteImage

删除指定位置的图片

deleteImage({params})

params

index：

  • 类型：数字
  • 描述：（可选项）删除的指定图片在图片数组中的索引
  • 默认：当前图片在图片数组中的索引

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.deleteImage({
    index: 2
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearCache

清除缓存到本地的网络图片，本接口只清除本原生插件缓存的数据，若要清除本 app 缓存的所有数据则调用 api.clearCache

clearCache()

示例代码

var UIPhotoViewer = api.require('UIPhotoViewer');
UIPhotoViewer.clearCache();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18