photoBrowser模块Demo

Mr.ZhouHeng

模块文档地址：https://docs.apicloud.com/Client-API/Func-Ext/photoBrowser


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



其实模块这块已经重点说明这个：模块使用攻略

开发者使用此模块时可以用 frame 的形式打开并添加到主窗口上，该 frame 不可设置位置和大小，其宽高默认和当前设备屏幕的宽高相同。
模块打开后可再 open 一个自定义的 frame 贴在本模块上，从而实现自定义图片浏览器样式和功能。

需要适配横竖屏时，开发者可通过api对象监听当前设备的位置状态，以改变自己自定义的 frame 的横竖屏展示，而图片的展示模块内部会自动适配横竖屏，最终实现了整个浏览器的横竖屏配置。

在本模块的 open 接口内可以获取图片的下载状态，通过 getImage 接口获取目标图片在本地的绝对路径，以实现保存到系统相册的功能。详情请参考模块接口参数说明。


有没有发现，此模块头部win打开之后，在打开模块会把头部遮盖掉？其实文档已经说明模块打开后可再 open 一个自定义的 frame 贴在本模块上，
比较难实现win头部显示出 1/5进度的问题？

此次模块demo重点讲解一下实现这个功能的小技巧；


整个app的模块 demo结构示意图：




重点代码  

1讲解：
点击图片传值打开浏览器模块的数值定义：

1. fnOpenImggroup: function(num, index, sum, Img) {
   
2.                                         var Imgs = [];//定义传入模块需要的图片数组格式
   
3.                                         for (var i = 0; i < Img.length; i++) {
   
4.                                                 Imgs.push(Img[i].img)
   
5.                                         }
   
6.                                         api.openWin({
   
7.                                                 name: 'photobrowser',
   
8.                                                 url: './photobrowser.html',
   
9.                                                 pageParam: {
   
10.                                                         num: num,//类型选择显示关键字段
    
11.                                                         Indexnum: index,//图片点击了第几个
    
12.                                                         Sum: sum,//图片的总数
    
13.                                                         DynamicImg: Imgs,//传入模块需要的图片数组
    
14.                                                         ImgName: Img//传入图片跟文本的数组  这块类型2需要
    
15.                                                 },
    
16.                                                 slidBackEnabled: false
    
17.                                         });
    
18.                                 }

复制代码

2讲解：

如何把传过的值实现在模块里面：

1. apiready = function() {
   
2.                 fnInit();
   
3.         };
   
4.         var photoBrowser;
   
5. 
   
6.         function fnInit() {
   
7.                 photoBrowser = api.require('photoBrowser');
   
8.                 photoBrowser.open({
   
9.                         images: api.pageParam.DynamicImg,//显示传过来的图片数组
   
10.                         placeholderImg: 'widget://res/img/apicloud.png',
    
11.                         bgColor: '#000',
    
12.                         activeIndex: api.pageParam.Indexnum//显示点击的是第几张
    
13.                 }, function(ret, err) {
    
14.                         if (ret && ret.eventType === "change") {
    
15.                                 //滑动图片动态显示是第几张图片使用execScript触发photobrowser_frm页面的函数改动图片页数
    
16.                                 api.execScript({
    
17.                                         frameName: 'photobrowser_frm',
    
18.                                         script: 'fnNum(' + ret.index + ');'
    
19.                                 });
    
20.                         }
    
21.                 });
    
22.                 setTimeout(function() {//延迟打开头部
    
23. 
    
24.                         if(api.pageParam.num===1){//当选择是进度跟文本显示使用此打开
    
25.                                 api.openFrame({
    
26.                                         name: 'photobrowser_frm',
    
27.                                         url: './photobrowser_frm.html',
    
28.                                         rect: {
    
29.                                                 marginLeft: 0,
    
30.                                                 h:100,
    
31.                                                 marginBottom: api.safeArea.bottom,
    
32.                                                 marginRight: 0,
    
33.                                         },
    
34.                                         pageParam: {
    
35.                                                 Indexnum: api.pageParam.Indexnum,
    
36.                                                 Sum: api.pageParam.Sum,
    
37.                                                 ImgName: api.pageParam.ImgName,
    
38.                                                 num:api.pageParam.num
    
39.                                         }
    
40.                                 });
    
41.                                 return;
    
42.                         }
    
43. 
    
44.                         api.openFrame({
    
45.                                 name: 'photobrowser_frm',
    
46.                                 url: './photobrowser_frm.html',
    
47.                                 rect: {
    
48.                                         x: 0,
    
49.                                         y: 0,
    
50.                                         w: 'auto',
    
51.                                         h: 44 + api.safeArea.top,
    
52.                                 },
    
53.                                 pageParam: {
    
54.                                         Indexnum: api.pageParam.Indexnum,
    
55.                                         Sum: api.pageParam.Sum,
    
56.                                         ImgName: api.pageParam.ImgName,
    
57.                                         num:api.pageParam.num
    
58.                                 }
    
59.                         });
    
60.                 }, 100)
    
61.         }

复制代码

图片浏览列表选择win页面



图片浏览样式1



图片浏览样式2




图片浏览样式3

Mr.ZhouHeng

消灭0回复

handsix

厉害 顶

VvVv1o

先下载为敬

Mr.ZhouHeng

VvVv1o 发表于 2019-6-24 10:57
先下载为敬

耿直的微笑感谢支持

执念_念

为什么我下载之后是空文件夹

Mr.ZhouHeng

执念_念 发表于 2019-6-26 19:05
为什么我下载之后是空文件夹

不可能 的  直接解压  我刚才测试一遍不是空的

Mr.ZhouHeng

瞎闹吓得我在看了一眼

VvVv1o

执念_念 发表于 2019-6-26 19:05
为什么我下载之后是空文件夹

这个我也下载过 是有文件的啊 有图有真相

GaryChan

奇了怪，我用你的demo传过去的图片数组最后一张图片就是显示不了。
   var Imgs_arr = [];
   for (var i = 0; i < img_nums; i++) {
    Imgs_arr.push(Imgs);
   }
          api.openWin({
      name: 'photobrowser',
      url: './photobrowser.html',
      pageParam: {
        num: 0,//类型选择显示关键字段
        Indexnum: Indexnum,//图片点击了第几个
        Sum: img_nums,//图片的总数
        DynamicImg: Imgs_arr,//传入模块需要的图片数组
        ImgName: imgname//传入图片跟文本的数组  这块类型2需要
      },
      slidBackEnabled: false
    });