photoBrowserTodayNew

立即使用

概述

当今是图文信息发达的时代,图文信息会通过APP第一时间发送给用户,然而用户对图文信息的查看也提出了更高的要求。如何将图文信息更好的呈现给用户查看、互动成为了困扰很多APP设计者的难题。

不仅如此,单纯的图文信息已不能提起大部分用户的兴趣,在浏览图文信息的同时,我们还需要提供炫酷的交互体验,比如图片手势缩放、分享、收藏、点赞、评论等功能,以提升用户体验。

photoBrowserTodayNew模块应运而生,模块封装了最新主流图文信息展示界面,开发者只需要简单的设置图文、宽高、颜色就可以拥有高品质的图文信息交互界面,大大降低了开发难度,节约开发成本。模块由原生代码开发,速度极快,界面时尚华丽,并有动画交互,提供评论输入框,开发者可获取用户输入的评论内容,模块可以当做html元素嵌入到html页面中。开发者也可在模块上层增加一层透明的frame或window,用于用户点击模块各按钮时的界面响应,如点击分享按钮后,在上层透明的frame或window弹出分享对话框;

模块特点:

① 向左或向右无限循环轮播;

② 点击伪评论框动画弹出新的评论输入框,开发者可获取用户输入的评论内容;

③ 可单独设置评论数和收藏状态;

④ 可设置各个功能按钮是否可见;

⑤ 单击主界面可在纯图模式/功能模式之间切换;

⑥ 可对图片进行手势缩放;

⑦ 长按主界面弹出保存图片相关菜单;

⑧ 开发者可在模块上层增加一层透明的frame或window,用于用户点击模块各按钮时的界面响应,如点击分享按钮后,在上层透明的frame或window弹出分享对话框;

图片优化说明:

开发中大部分情况下我们需要缓存图片,本模块实现了三级缓存,加载网络图片后,模块会把图片缓存到内存,同时把图片缓存文件存到手机自带的sd卡,缓存文件文件名用md5加密,提高了文件安全性。 再次加载图片时模块会先从内存找,如果找到则马上显示在界面上,如果内存没有则从sd卡查找图片缓存文件加载显示,再没有才从网络加载显示,三级缓存大大节省了用户的手机流量,相对js代码更具高效性,切换更加流畅。并且内存中只保留三张图片(左、中、右各一张),左右预加载,用以提高浏览速度,同时也不会有一次性加载所有图片所导致的内存暴涨问题,大大降低了app内存占用率。

示例图片



Widget示例代码下载地址:https://community.apicloud.com/bbs/thread-161166-1-1.html

模块接口

open

打开图片浏览器。

open({params},callback(ret))

params

images:

  • 类型:JSON数组
  • 描述:(必填项)要显示的图片url数组,图片数量应大于等于1。支持 fs://、widget://、http://、https://格式
  • 内部字段:
images: [                                
'fs://images/abc.jpg',
'widget://images/abc.jpg',
'http://p0.so.qhimgs1.com/t0182bf0097557b65fc.jpg'                                
]

texts:

  • 类型:JSON数组
  • 描述:(可选项)要显示的图片描述字符串数组,images和texts一 一对应,即images中的第一个元素对应texts中的第一个元素,以此类推。字符串数量应等于图片数量,如大于图片数量,则模块从左往右选取数量等于图片数量的那些字符串,如小于图片数量,则剩下的描述字符串模块会自动用空字符串("")补全。参数visibility中的textArea为true时,该字段才有效。
  • 内部字段:
texts: [                        
'描述1',
'描述2',
'描述3'                            
]

frame:

  • 类型:字符串
  • 描述:必填项,要将该模块添加到哪个frame显示,一般本模块需要全屏显示(除去手机状态栏,即除去手机顶部的状态栏,其他区域都用来显示本模块),所以frame的区域建议为除去手机顶部状态栏的其他区域。沉浸式模式下,建议将状态栏的背景色设置成黑色(#000000),以便与本模块的背景色保持一致。

注意:frame页面要设置成不可弹动,这是为了让本模块有更好的滑动效果。设置frame页面不可弹动的方法:在用openFrame打开frame时将bounces参数设置成false即可。

visibility:

  • 类型:JSON对象
  • 描述:(可选项)用于设置功能按钮是否显示,当input为2时,此时点击伪输入框弹出真正的评论输入框,要想图片不跟随键盘上移,则在config.xml中配置如下参数:

  • 内部字段:

visibility: {
            back : true,  //返回按钮是否显示,true为显示,默认true
            publisher : true,//发布人头像是否显示,true为显示,默认true
            menu : true,//右上角菜单按钮是否显示,true为显示,默认true
            input : 1,//左下角伪输入框是否显示,默认2,
                        0:不显示 
                        1:显示但不弹出输入框(对应的回调event值为inputClick,见ret说明) 
                        2:显示且弹出输入框(对应的回调event值为inputUpload,见ret说明)
            comment : true,//评论数量按钮是否显示,true为显示,默认true
            favorite : true,//收藏按钮是否显示,true为显示,默认true
            share : true,//分享按钮是否显示,true为显示,默认true
            save : true //长按图片是否弹出保存框,true为弹出,默认true
                        true时对应的回调event值为save,见ret说明
                        false时对应的回调event值为longClick,见ret说明
            textArea : true //显示文字区域是否显示,true为显示,默认true
    }

textHeight:

  • 类型:JSON对象
  • 描述:(可选项)用于设置文字描述区域高度所占的百分比,公式如下:
    百分比 = 文字显示区域高度/允许显示区域高度(当前设备屏幕的高度减去顶部导航条、手机状态栏和底部控制器的高度)。 参数visibility中的textArea为true时,该字段才有效。
  • 内部字段:
 textHeight:{
        //取值范围:1~100,建议不要取值过低或过高
        normal : 20,//数值型,默认20.正常高度,即初始情况下文字描述区域高度所占的百分比为20%.
        scale : 40//数值型,默认40.当文字过长(此时可滚动浏览)时,点击文字区域会增加文字显示区域高度,scale值就是用于设置增加后的高度占比
    }

start:

  • 类型:数值型
  • 描述:(可选项)用于设置从第几张图片开始显示,默认1,该值从1计数,而不是0。

count:

  • 类型:数值型
  • 描述:(可选项)用于设置评论按钮上的红色评论数量,默认0,>0时显示红色数量, <=0时不显示红色数量; 大于999时显示"999+"

status:

  • 类型:布尔型
  • 描述:(可选项)用于设置是否收藏,默认false不收藏。

publisher:

  • 类型:字符串
  • 描述:(可选项)用于设置发布人头像,为空或不传时头像不显示,支持 fs://、widget://、http://、https://格式

virtualInputHint:

  • 类型:字符串
  • 描述:(可选项)用于设置伪输入框的提示文字,默认"写评论...";参数visibility中的input为1或2时,该字段才有效。

realInputHint:

  • 类型:字符串
  • 描述:(可选项)用于设置可输入评论内容的输入框的提示文字,默认"优质评论将会被优先展示";参数visibility中的input为2时,该字段才有效。

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回各个用户点击事件和值
  • 内部字段:
{
        "event": "show", //字符串类型;用户触发的事件类型,
                         //取值范围: 
                         //show(模块打开成功)
                         //back(返回按钮被点击)
                         //publisher(发布人头像被点击)
                         //menu (菜单按钮被点击)                          
                         //save(图片保存按钮被点击,当参数visibility中的save设置为true时有该字段)
                         //longClick(图片长按事件,当参数visibility中的save设置为false时有该字段)
                         //comment(评论数量按钮被点击时触发)
                         //favorite(收藏按钮被点击时触发)
                         //share(分享按钮被点击时触发)
                         //inputClick(伪输入框被点击,当参数visibility中的input设置为1时有该字段)
                         //inputUpload(用户输入评论内容完毕后点 确定 按钮事件,当参数visibility中的input设置为2时有该字段)
                         //pageChanged 用户每次左右滑动切换图片时触发,切换一张图就触发一次
        "index": 指当前显示的图片的索引,根据images参数的图片顺序来定索引,event为pageChanged时有该字段,
        "status": true, //布尔类型;收藏按钮的收藏状态,event为favorite时有该字段,
        "content": "这是评论", //字符串;用户输入的评论内容,event为inputUpload时有该字段,
        "savePath": "/mnt/sdcard/abc.jpg", //字符串;用户保存图片成功后的图片本地路径,event为save时有该字段,
        "error": "图片数量不能少于1", //字符串,图片数量少于1时有该字段
}

示例代码

var photoBrowserTodayNew = api.require("photoBrowserTodayNew");
photoBrowserTodayNew.open({
                    images: [
                                'http://p0.so.qhimgs1.com/t0182bf0097557b65fc.jpg',
                                'http://p3.pstatp.com/origin/1f8200056b5761e07d57',
                                'http://p3.pstatp.com/origin/1f7d0003d59c120d3cfd',
                                'http://p3.pstatp.com/origin/1f7e0001c7d1202dc931'
                            ],
                    texts: [
                                '描述1',
                                '描述2',
                                '描述3',    
                                '描述4'
                            ],
                    frame: "index_frm",//注意:该frame页面要设置成不可弹动,即openFrame时将bounces参数设置成false即可
                    visibility: {
                                back : true,  
                                publisher : true,
                                menu : true,
                                input : 2, 
                                comment : true,
                                favorite : true,
                                share : true,
                                save : true  
                        },
                    textHeight:{
                                normal : 20,
                                scale : 40
                        },
                    start : 1 ,//从1开始
                    count : 33 ,
                    status : true ,
                    publisher: "http://p0.so.qhimgs1.com/t0182bf0097557b65fc.jpg" 
            },function(ret){ 
                    api.toast({
                        msg: JSON.stringify(ret)+"" 
                    });  
            });

可用性

Android系统

可提供的1.0.0及更高版本

setCommentCount

设置评论数量。应在调用open方法后调用该方法

setCommentCount({params},callback(ret))

params

count:

  • 类型:数值型
  • 描述:(可选项)用于设置评论按钮上的红色评论数量,默认0,>0时显示红色数量, <=0时不显示红色数量; 大于999时显示"999+"

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回是否设置成功
  • 内部字段:
{ 
        "status": 1, //1 or 0. 1设置成功
        "msg": "图片浏览器未打开", //status为0时显示该字段
}

示例代码

var photoBrowserTodayNew = api.require("photoBrowserTodayNew");
photoBrowserTodayNew.setCommentCount({
                        count:  123
                        },function(ret){ 
                            api.toast({
                                msg: JSON.stringify(ret)+""
                            });
                });

可用性

Android系统

可提供的1.0.0及更高版本

setFavorite

设置收藏状态。应在调用open方法后调用该方法

setFavorite({params},callback(ret))

params

status:

  • 类型:布尔型
  • 描述:(可选项)用于设置收藏状态,默认false不收藏。

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回是否设置成功
  • 内部字段:
{ 
        "status": 1, //1 or 0. 1设置成功
        "msg": "图片浏览器未打开", //status为0时显示该字段
}

示例代码

var photoBrowserTodayNew = api.require("photoBrowserTodayNew");
photoBrowserTodayNew.setFavorite({
    status: true
        },function(ret){ 
            api.toast({
                msg: JSON.stringify(ret)+""
            }); 
});

可用性

Android系统

可提供的1.0.0及更高版本

clearCache

清除缓存到本地的网络图片,本接口只清除本模块缓存的数据,若要清除本 app 缓存的所有数据则调用 api.clearCache。清除缓存后保存图片会失败,所以开发者要在适当的时候清除缓存或不清除缓存。

clearCache(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回清除成功
  • 内部字段:
{
        "status": 1, //1 清除成功
}

示例代码

var photoBrowserTodayNew = api.require("photoBrowserTodayNew");
photoBrowserTodayNew.clearCache(function(ret, err){     
    api.toast({
        msg: JSON.stringify(ret)+""
    });
});

可用性

Android系统

可提供的1.0.0及更高版本

close

关闭图片浏览器,open和close应一 一对应,调用open后应在适当时候调用close。

close(callback(ret))

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回关闭是否成功
  • 内部字段:
{ 
        "status": 1, //1 or 0. 1关闭成功
        "msg": "图片浏览器未打开", //status为0时显示该字段
}

示例代码

var photoBrowserTodayNew = api.require("photoBrowserTodayNew");
photoBrowserTodayNew.close(function(ret, err){ 
    api.toast({
        msg: JSON.stringify(ret)+""
    });
});

可用性

Android系统

可提供的1.0.0及更高版本