apicloud apicloud

注册
查看: 3724|回复: 14

[模块教程] photoBrowser模块Demo

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

[模块教程] photoBrowser模块Demo

3724 14 | 发表于 2019-6-21 13:49:41 |阅读模式 | |
本帖最后由 Mr.ZhouHeng 于 2019-6-27 09:45 编辑

模块文档地址: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.         function fnInit() {
  6.                 photoBrowser = api.require('photoBrowser');
  7.                 photoBrowser.open({
  8.                         images: api.pageParam.DynamicImg,//显示传过来的图片数组
  9.                         placeholderImg: 'widget://res/img/apicloud.png',
  10.                         bgColor: '#000',
  11.                         activeIndex: api.pageParam.Indexnum//显示点击的是第几张
  12.                 }, function(ret, err) {
  13.                         if (ret && ret.eventType === "change") {
  14.                                 //滑动图片动态显示是第几张图片使用execScript触发photobrowser_frm页面的函数改动图片页数
  15.                                 api.execScript({
  16.                                         frameName: 'photobrowser_frm',
  17.                                         script: 'fnNum(' + ret.index + ');'
  18.                                 });
  19.                         }
  20.                 });
  21.                 setTimeout(function() {//延迟打开头部

  22.                         if(api.pageParam.num===1){//当选择是进度跟文本显示使用此打开
  23.                                 api.openFrame({
  24.                                         name: 'photobrowser_frm',
  25.                                         url: './photobrowser_frm.html',
  26.                                         rect: {
  27.                                                 marginLeft: 0,
  28.                                                 h:100,
  29.                                                 marginBottom: api.safeArea.bottom,
  30.                                                 marginRight: 0,
  31.                                         },
  32.                                         pageParam: {
  33.                                                 Indexnum: api.pageParam.Indexnum,
  34.                                                 Sum: api.pageParam.Sum,
  35.                                                 ImgName: api.pageParam.ImgName,
  36.                                                 num:api.pageParam.num
  37.                                         }
  38.                                 });
  39.                                 return;
  40.                         }

  41.                         api.openFrame({
  42.                                 name: 'photobrowser_frm',
  43.                                 url: './photobrowser_frm.html',
  44.                                 rect: {
  45.                                         x: 0,
  46.                                         y: 0,
  47.                                         w: 'auto',
  48.                                         h: 44 + api.safeArea.top,
  49.                                 },
  50.                                 pageParam: {
  51.                                         Indexnum: api.pageParam.Indexnum,
  52.                                         Sum: api.pageParam.Sum,
  53.                                         ImgName: api.pageParam.ImgName,
  54.                                         num:api.pageParam.num
  55.                                 }
  56.                         });
  57.                 }, 100)
  58.         }
复制代码



图片浏览列表选择win页面



图片浏览样式1



图片浏览样式2





图片浏览样式3













本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-6-21 18:33:46 |
消灭0回复
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

版主

UID:489246

主题:
16
帖子:
3150
云币:
2184
发表于 2019-6-22 15:04:44 |
厉害 顶
app项目开发QQ:897695724

职业车手

UID:436609

主题:
44
帖子:
1811
云币:
2479

足球狗

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

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-6-24 11:01:29 |

耿直的微笑感谢支持
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
21
帖子:
93
云币:
106
发表于 2019-6-26 19:05:45 |
为什么我下载之后是空文件夹

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

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

不可能 的  直接解压  我刚才测试一遍不是空的
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

主题:
41
帖子:
9320
云币:
12508

社会摇圣诞节老司机你吃屎!首长好!我还是个孩子!托马斯全旋女朋友不想上班!装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章狗年旺旺旺足球狗捣蛋鬼儿童节快乐APICloud五岁啦

 楼主| 发表于 2019-6-27 09:37:17 |
瞎闹吓得我在看了一眼

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
微信公众号、小程序、app、webapp、pc网页端项目合作点击QQ82201127

职业车手

UID:436609

主题:
44
帖子:
1811
云币:
2479

足球狗

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

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
1

查看全部评分

主题:
10
帖子:
47
云币:
56
发表于 2019-6-27 17:28:29 |
奇了怪,我用你的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
    });
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表