UIPhotoViewer 模块分享，添加自定义按钮示例

yxWin · *发表于 2019-12-26 13:36:36*

模块UIPhotoViewer
文档连接：https://docs.apicloud.com/Client-API/Func-Ext/UIPhotoViewer
概述

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

模块使用攻略

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

api调用： execScript 或者 sendEvent 来进行夸frame 操作实现

注意：android编译说明

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

运行截图（帖子最后有大图）

主要代码（两个frame页面）
主页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var UIPhotoViewer = null;
apiready = function() {
UIPhotoViewer = api.require('UIPhotoViewer');
setTimeout(function() {
openP();
}, 1000);
};
function getIndexU() {
UIPhotoViewer.getIndex(function(ret, err) {
if (ret) {
alert( '当前选中为第 ' + (ret.index + 1) + ' 张');
} else {
alert(JSON.stringify(err));
}
});
}
function closeView() {
UIPhotoViewer.close();
}
function openP() {
UIPhotoViewer.open({
images: [
'http://img1.imgtn**.**/it/u=3962320828,1701933979&fm=26&gp=0.jpg',
'http://img0.imgtn**.**/it/u=2943994938,4115220466&fm=26&gp=0.jpg',
'http://img2.imgtn**.**/it/u=4200942165,215200833&fm=26&gp=0.jpg',
'http://img4.imgtn**.**/it/u=4058349123,3836499281&fm=26&gp=0.jpg',
'http://img0.imgtn**.**/it/u=4137105188,1979966924&fm=26&gp=0.jpg',
'https://community.apicloud.com/bbs/data/attachment/forum/201912/25/214216rsas73lal6p42nim.gif'
],
placeholderImg: 'widget://image/dog.png',
bgColor: '#000'
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'change') {
api.sendEvent({
name: 'myEvent',
extra: {
key1: ret.index + 1,
}
});
}
} else {
alert(JSON.stringify(err));
}
});
setTimeout(function() {
api.openFrame({
name: 'photoView_frame',
url: './photoView_frame.html',
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.safeArea.top + 60
},
pageParam: {
name: 'test'
},
bounces: false,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: true,
hScrollBarEnabled: true
});
}, 800);
}
</script>
</html>

复制代码

header frame

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<style>
body {
margin: 0;
border: 0;
padding: 0;
/*font-style:normal;*/
}
header {
width: 100%;
height: 60px;
background-color: #EEEEEE;
}
.right {
float: left;
width: 20%;
height: 60px;
}
.page {
float: left;
width: 60%;
height: 60px;
}
.left {
float: left;
width: 20%;
height: 60px;
}
.txt {
text-align: center;
line-height: 60px;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="right txt" onclick="fnBack()">
返回
</div>
<div id="paget" class="page txt">
第1张
</div>
<div class="left txt" onclick="fnOk()">
确定
</div>
</header>
<nav>
</nav>
<footer>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var paget = null;
paget = $api.byId('paget');
$api.dom('header').style.paddingTop = api.safeArea.top + 'px';
api.addEventListener({
name: 'myEvent'
}, function(ret, err) {
if (ret) {
var page = ret.value.key1;
$api.html(paget, '第 ' + page + ' 张');
} else {
alert(JSON.stringify(err));
}
});
};
function fnBack() {
api.execScript({
frameName: 'page1',
script: 'closeView()'
});
api.closeFrame();
}
function fnOk() {
api.execScript({
frameName: 'page1',
script: 'getIndexU()'
});
}
</script>
</html>

复制代码

yxWin

更新：通过api.getPicture接口获取图片路径然后预览

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var UIPhotoViewer = null;
apiready = function() {
UIPhotoViewer = api.require('UIPhotoViewer');
setTimeout(function() {
getPictureP();
}, 1000);
};
function getIndexU() {
UIPhotoViewer.getIndex(function(ret, err) {
if (ret) {
alert( '当前选中为第 ' + (ret.index + 1) + ' 张');
} else {
alert(JSON.stringify(err));
}
});
}
function closeView() {
UIPhotoViewer.close();
}
function getPictureP() {
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
allowEdit: false,
quality: 50,
targetWidth: 600,
targetHeight: 900,
saveToPhotoAlbum: false
}, function(ret, err){
if(ret){
alert(JSON.stringify(ret));
var path = ret.data;
openP( path );
}else{
alert(JSON.stringify(err));
}
});
}
function openP( path ) {
UIPhotoViewer.open({
images: [
path
// 'http://img1.imgtn**.**/it/u=3962320828,1701933979&fm=26&gp=0.jpg',
// 'http://img0.imgtn**.**/it/u=2943994938,4115220466&fm=26&gp=0.jpg',
// 'http://img2.imgtn**.**/it/u=4200942165,215200833&fm=26&gp=0.jpg',
// 'http://img4.imgtn**.**/it/u=4058349123,3836499281&fm=26&gp=0.jpg',
// 'http://img0.imgtn**.**/it/u=4137105188,1979966924&fm=26&gp=0.jpg',
// 'https://community.apicloud.com/bbs/data/attachment/forum/201912/25/214216rsas73lal6p42nim.gif'
],
placeholderImg: 'widget://image/dog.png',
bgColor: '#000'
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'change') {
api.sendEvent({
name: 'myEvent',
extra: {
key1: ret.index + 1,
}
});
}else if (ret.eventType == 'click') {
UIPhotoViewer.close();
}
} else {
alert(JSON.stringify(err));
}
});
setTimeout(function() {
api.openFrame({
name: 'photoView_frame',
url: './photoView_frame.html',
rect: {
x: 0,
y: 0,
w: 'auto',
h: api.safeArea.top + 60
},
pageParam: {
name: 'test'
},
bounces: false,
bgColor: 'rgba(0,0,0,0)',
vScrollBarEnabled: true,
hScrollBarEnabled: true
});
}, 800);
}
</script>
</html>

复制代码

handsix · 回复于2019-12-26 15:20:05

感谢分享~

VvVv1o · 回复于2019-12-30 13:36:01

学到了

南山风雨31

yxWin 发表于 2020-1-7 15:04
更新：通过api.getPicture接口获取图片路径然后预览

我最近尝试在IOS中调用这个模块，但是在ios中无法预览网络图片，一直不显示
示例：数组["https://www**.**/db/tupianxinxibiao/b4/86/dd45/c6dc/c841/7363/d7c0/8827/7722/public/tp/tp.jpg","https://www**.**/db/tupianxinxibiao/ec/dc/15bd/f067/0b85/ceba/4a39/668d/18d9/public/tp/tp.jpg","https://www**.**/db/tupianxinxibiao/b4/86/dd45/c6dc/c841/7363/d7c0/8827/7722/public/tp/tp.jpg","https://www**.**/db/tupianxinxibiao/ec/dc/15bd/f067/0b85/ceba/4a39/668d/18d9/public/tp/tp.jpg","https://www**.**/db/tupianxinxibiao/b4/86/dd45/c6dc/c841/7363/d7c0/8827/7722/public/tp/tp.jpg","https://www**.**/db/tupianxinxibiao/ec/dc/15bd/f067/0b85/ceba/4a39/668d/18d9/public/tp/tp.jpg"] 我发现使用其他的图片在ios里就可以正常预览，但是就这几张只在安卓手机中可以ios手机的不行，之前还尝试了只使用一张这里边的好像还是不行；但是创建方式的话都是一样的

一只小黑猪

感谢分享

阿宝@0006

yxWin 发表于 2020-1-7 15:04
更新：通过api.getPicture接口获取图片路径然后预览

这个ios中打开的 openFrame 状态栏被遮住了试了好几种方式还是被遮住

微拓客

UIPhotoViewer，调用后报错，null