photoBrowserWeiXin
来自于:开发者立即使用
概述
随着 APP 的使用,越来越多的图文信息出现在了移动网络中,用户对图文信息的查看也提出了更高的要求。而如何更好的将图文信息在用户面前呈现也成为了困扰很多 APP 的难题。
同时,仅仅图文信息的展示并不足以留住挑剔的用户,我们还需要提供炫酷的交互体验、评论、点赞、查看评论列表等功能。
photoBrowserWeiXin 模块封装了微信移动客户端内相册浏览器功能,是由原生代码开发,为开发者封装了图文信息的最新主流展示界面,开发者只需要简单设置图片、颜色等即可让 APP 拥有完整的、高体验的图文信息展示界面,大大降低开发难度,节约开发成本,提高用户体验。
模块特点:
点击主界面在纯图模式/功能模式之间切换
双击主界面在大图模式/小图模式之间切换
图片优化说明
对于网络图片的展示,模块内部会做缓存处理,第一次加载网络图片时,模块会根据其路径生成一个 md5 加密的图片名,并缓存在缓存文件夹里。当用户下次打开同路径的图片时,模块直接从缓存文件内读取该图片,从而大大节省了用户流量。开发者可以通过调用 clearCache 接口清楚本模块在本地缓存的图片资源,调用 api.clearCache 接口会清除本 APP 在本地缓存的所有文件。由于原生代码相对前端代码的高效性,本模块相对于前端实现的图片切换更加流畅,内存管理更加优化。当展示多张图片时,其内存中只会保留最多三张图片,然后来回切换图片内容,从而降低了整个 app 内存占用率。
示例图片如下:
open
打开图文信息模块
open(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status:true, //布尔类型:表示按钮的选中状态,只有点赞按钮触发事件时有该字段
eventType: 'show', //字符串类型;交互事件类型,
//取值范围:
//show(模块打开成功)
//appendData(模块数据设置完成)
//longPress(长按时触发)
//back(返回按钮被点击时触发)
//menu(菜单按钮被点击时触发)
//like(点赞按钮被点击时触发)
//comment(评论按钮被点击时触发)
//detail(“点赞数量”/“评论数量”按钮被点击时触发)
//lastImage(显示最后一张图片的事件,此时可使用 appendData 接口追加数据,供用户继续浏览)
imagePath: '', //字符串类型;图片下载后缓存的本地路径,当 eventType 为 menu/longPress 时有效
id:'1', //字符串类型;appndData 接口标识
index:0 //数字类型:表示当前预览图片的index,只有 menu & longPress 事件返回该字段
}
示例代码
var photoBS_wx = api.require('photoBrowserWeiXin');
photoBS_wx.open(function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
appendData
设置模块数据
appendData({params})
params
id:
- 类型:字符串
- 描述:appendData 标识
images:
- 类型:数组类型
- 描述:图片路径数组数据,支持fs://,以及网络路径 http://,https://
- 内部字段:
[
'http://www.x.com/image1.png', //字符串类型;图片路径,支持 fs://,以及网络路径 http://,https://
]
date:
- 类型:字符串
- 描述:(可选项)模块 title 显示的时间,格式为:yyyy-MM-dd HH:mm:ss;不传则不显示
text:
- 类型:字符串
- 描述:(可选项)相应图片的描述文本,不传则不显示
like:
- 类型:布尔
- 描述:(可选项)点赞按钮图标状态
- 默认:false
likes:
- 类型:数字类型
- 描述:(可选项)已点赞的数量值,值为 0 时不显示该数值区域
- 默认:0
comments:
- 类型:数字类型
- 描述:(可选项)已评论的数量值,值为 0 时不显示该数值区域
- 默认:0
示例代码
var photoBS_wx = api.require('photoBrowserWeiXin');
photoBS_wx.open(function(ret) {
if (ret.eventType == 'show') {
photoBS_wx.appendData({
id: '1',
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'
],
date: '2016-05-30 16:29:30',
text: '描述 1',
like: false,
likes: 10,
comments: 520
});
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
clearCache
清除缓存到本地的网络图片,本接口只清除本模块缓存的数据,若要清除本 app 缓存的所有数据则调用 api.clearCache
clearCache()
示例代码
var photoBS_wx = api.require('photoBrowserWeiXin');
photoBS_wx.clearCache();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本