photoBrowserQQ

来自于：开发者立即使用

open setData clearCache

概述

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

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

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

模块特点：

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

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

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

图片优化说明

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

示例图片如下：

photoBrowserQQ - 图1

open

打开图文信息模块

open(callback(ret))

callback(ret)

ret：

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

示例代码

  1. var photoBS_qq = api.require('photoBrowserQQ');
  2. photoBS_qq.open(function(ret) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     }
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setData

设置模块数据

setData({params})

params

images：

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

text：

  • 类型：字符串
  • 描述：（可选项）相应图片的描述文本，不传则不显示

details:

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

示例代码

  1. var photoBS_qq = api.require('photoBrowserQQ');
  2. photoBS_qq.open(function(ret) {
  3.     if (ret.eventType == 'show') {
  4.         photoBS_qq.setData({
  5.             images: [
  6.                 'http://www.x.com/image1.png',
  7.                 'http://www.x.com/image2.png',
  8.                 'http://www.x.com/image3.png',
  9.                 'http://www.x.com/image4.png'
  10.             ],
  11.             text: '描述 1',
  12.             details: [{
  13.                 index: 0,
  14.                 like: false,
  15.                 likes: 10,
  16.                 comments: 10
  17.             }, {
  18.                 index: 1,
  19.                 like: true,
  20.                 likes: 20,
  21.                 comments: 20
  22.             }, {
  23.                 index: 2,
  24.                 like: false,
  25.                 likes: 30,
  26.                 comments: 30
  27.             }, {
  28.                 index: 3,
  29.                 like: true,
  30.                 likes: 40,
  31.                 comments: 40
  32.             }]
  33.         });
  34.     }
  35. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

clearCache

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

clearCache()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本