photoBrowserQQ

概述

随着 APP 的使用,越来越多的图文信息出现在了移动网络中,用户对图文信息的查看也提出了更高的要求。而如何更好的将图文信息在用户面前呈现也成为了困扰很多 APP 的难题。

同时,仅仅图文信息的展示并不足以留住挑剔的用户,我们还需要提供炫酷的交互体验、评论、点赞、查看评论列表等功能。

photoBrowserQQ 插件封装了QQ移动客户端内相册浏览器功能,是由原生代码开发,为开发者封装了图文信息的最新主流展示界面,开发者只需要简单设置图片、颜色等即可让 APP 拥有完整的、高体验的图文信息展示界面,大大降低开发难度,节约开发成本,提高用户体验。

####插件特点:

  • 点击主界面在纯图模式/功能模式之间切换

  • 双击主界面在大图模式/小图模式之间切换

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

####图片优化说明 对于网络图片的展示,插件内部会做缓存处理,第一次加载网络图片时,插件会根据其路径生成一个 md5 加密的图片名,并缓存在缓存文件夹里。当用户下次打开同路径的图片时,插件直接从缓存文件内读取该图片,从而大大节省了用户流量。开发者可以通过调用 clearCache 接口清楚本插件在本地缓存的图片资源,调用 api.clearCache 接口会清除本 APP 在本地缓存的所有文件。由于原生代码相对前端代码的高效性,本插件相对于前端实现的图片切换更加流畅,内存管理更加优化。当展示多张图片时,其内存中只会保留最多三张图片,然后来回切换图片内容,从而降低了整个 app 内存占用率。

示例图片如下:

open

打开图文信息插件

open(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',            //字符串类型;交互事件类型,
                                  //取值范围:
                                  //show(插件打开成功)
                                  //setData(插件数据设置完成) 
                                  //longPress(长按时触发)                                                                         
                                  //back(返回按钮被点击时触发)
                                  //menu(菜单按钮被点击时触发)
                                  //like(点赞按钮被点击时触发)
                                  //comment(评论按钮被点击时触发)
                                  //detail(“点赞数量”/“评论数量”/“详情”按钮被点击时触发)
                                                                       
    savePath: '',                 //字符串类型;图片下载后缓存的本地路径,当 eventType 为 menu/longPress 时有效
    status:true,                  //布尔类型:表示按钮的选中状态,只有点赞按钮触发事件时有该字段 
    index: 1                      //数字类型;表示当前预览图片的 index,当 eventType 为 menu、longPress、like、comment 时有效

}

示例代码

var photoBS_qq = api.require('photoBrowserQQ');
photoBS_qq.open(function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setData

设置插件数据

setData({params})

params

images:

  • 类型:数组类型
  • 描述:图片路径数组数据,支持fs://,以及网络路径 http://,https://
  • 内部字段:
[
    'http://www.x.com/image1.png',     //字符串类型;图片路径,支持 fs://,以及网络路径 http://,https://
]

text:

  • 类型:字符串
  • 描述:(可选项)相应图片的描述文本,不传则不显示

details:

  • 类型:JSON 数组类型
  • 描述:index 对应图片的”点赞“状态,点赞数量和评论数量配置
  • 内部字段:
{                        // 不传则显示默认字段
    index: 0,            // 数字类型;要配置信息的对应图片索引 index
    like: false,         //(可选项)布尔类型;点赞按钮图标状态;默认 false
    likes: 10,           //(可选项)数字类型;已点赞的数量值,值为 0 时不显示该数值区域;默认 0
    comments: 10         //(可选项)数字类型;已评论的数量值,值为 0 时不显示该数值区域;默认 0
}

示例代码

var photoBS_qq = api.require('photoBrowserQQ');
photoBS_qq.open(function(ret) {
    if (ret.eventType == 'show') {
        photoBS_qq.setData({
            images: [
                'http://www.x.com/image1.png',
                'http://www.x.com/image2.png',
                'http://www.x.com/image3.png',
                'http://www.x.com/image4.png'
            ],
            text: '描述 1',
            details: [{
                index: 0,
                like: false,
                likes: 10,
                comments: 10
            }, {
                index: 1,
                like: true,
                likes: 20,
                comments: 20
            }, {
                index: 2,
                like: false,
                likes: 30,
                comments: 30
            }, {
                index: 3,
                like: true,
                likes: 40,
                comments: 40
            }]
        });
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

# **clearCache**

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

clearCache()

示例代码

var photoBS_qq = api.require('photoBrowserQQ');
photoBS_qq.clearCache();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/02/22