更新记录
2.1(2024-12-14)
1、修复插件ios端setEventCallback接口没有回调问题。 2、优化插件代码。
2.0(2024-07-29)
修复插件iOS端相册标签mediaDirPath属性不生效问题。
1.9(2024-07-11)
1、修复Android端获取网络视频封面失败问题。 2、增加Android端exif获取getExif和保存saveExif接口。 3、增加iOS端判断相册权限grantedAlbumPermission接口。
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
多功能多媒体相册选择uniapp原生插件接口文档
功能简述:
- 支持相册分类选择
- 支持单一类型显示
- 支持相册列数配置
- 支持修改选择标颜色/半径/边距
- 支持修改数字选择标位置/颜色/字体大小
- 支持遮罩是否显示/修改遮罩颜色
- 支持多选
- 支持重置
- 支持选择数量限制
- 支持自定义整个相册的显示位置
- 支持多种选择模式(图像视频混合默认,首选类型,图像类型,视频类型)
- 支持(13)首选模式中视频选择数量限制和图像选择限制
- 支持设定禁选文件
- 支持配置单独获得图片的点击事件和选择标的选择事件
- 支持设置选择文件保存应用内部目录
- 支持本地和网络视频封面获取,视频信息时长/宽高获取
- 支持纯接口获取最近n个图像或视频
- 支持vue2/vue3
- 支持ios和Android
权限使用说明
Android使用权限说明
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
iOS使用权限说明
NSPhotoLibraryUsageDescription
接口使用说明
1、插件对象
var Album = uni.requireNativePlugin("Lizii-Album");
2、检查和请求获取相册权限
Album.requestAlbumPermission(function(res){
console.log(res);
if (res.result == true){
//授权相册权限
} else {
//相册权限被禁止
uni.showModal({
confirmText:res.msg
})
}
});
3、获取最近图片或视频
var type = 1;//0 视频 1 图片 2 图片和视频
var size = 2;//数量,1代表最近一张图片或视频,n代表最近n个
Album.getLatestMedia(type, size,function(res){
console.log(res);
//res 数组结果,小于等于size
/*"filePath": "/var/mobile/Media/DCIM/100APPLE/IMG_0569.PNG",
"type": 1,
"duration": 0*/
});
4、获取本地和网络视频信息时长和宽高
//filePath和videoUrl二选其一
Album.getVideoInfo({
filePath:"/storage/emulated/0/DCIM/Camera/TG-2023-02-18-202627183.mp4", //绝对路径,如果是uni获取的文件,需要进行转换
//videoUrl:"http://vjs.zencdn.net/v/oceans.mp4"//网络路径
},function(res){
console.log(res);
if(res.success){
let duration = res.duration;//时长
let width = res.width;//宽
let height = res.height;//高
}else {
//错误 res.err
}
});
5、获取本地和网络视频封面
//android /storage/emulated/0/DCIM/Camera/TG-2023-02-18-202627183.mp4
//ios /var/mobile/Media/DCIM/100APPLE/IMG_0616.MOV
var that = this;
var outputDir = plus.io.convertLocalFileSystemURL("_www/static/test.png");
//filePath和videoUrl二选其一
Album.getImageFromVideo({
filePath:"/storage/emulated/0/DCIM/Camera/TG-2023-02-18-202627183.mp4", //原生平台路径,如果是uni获取的文件,需要进行转换
//videoUrl:"http://vjs.zencdn.net/v/oceans.mp4",//网络路径
savePath:outputDir, //封面保存位置,要传有效的能访问的文件目录,不传使用默认目录
time:0 //单位毫秒,小于视频时长,不知道视频时长就传0.
},function(res){
console.log(res);
if(res.success){
that.imgsrc = "file://"+res.savePath;
}else {
//错误 res.err
}
});
插件标签
<Lizii-AlbumView ref="albumView" style="width:750rpx;height:800"
@onMediaClick="onMediaClick"
@onMediaSelectedList="onMediaSelectedList"
@onLimit="onLimit"
@onMediaDirs="onMediaDirs"
@onMediaDirAdd="onMediaDirAdd"
@onMediaDirChanged="onMediaDirChanged"
@onForbidSelect="onForbidSelect"
@onImageClick="onImageClick"
mediaType="2"
colnum="3"
cornerRadius="5"
selectedIconColor="#00ff00"
indexLocation="2"
indexTextColor="#ffffff"
maskShow="false"
maskColor="#af000000"
selectMode="1"
limitVideoCount="1"
limitImageCount="1"
limitCount="1"
splitClickEvent="false"
:mediaDirPath="mediaDirPath"
selectedIconBorderColor="#ff0ffff"
/>
标签属性
- mediaType 设置显示的文件类型,默认显示全部(包括视频和图片)
- 0 - 视频
- 1 - 图片
- 2 - 全部
- colnum 相册显示列数,不设置显示3列
- cornerRadius 对象显示圆角,不设置圆角5
- selectedIconColor设置选中时候,选择(勾选)标的底色,不设置为橙色
- indexLocation 选择数字标的位置,显示选择的第几项,默认不显示
- 1 左上角显示
- 2 右上角显示,勾选标不显示,数字标未选中为小圆圈,选中后底色为 selectedIconColor
- 3 左下角显示
- 其它值不显示
- indexTextColor 当数字标显示时候,设置数字的颜色,默认白色
- maskShow 选中时显示阴影遮罩 默认不显示
- true 显示
- false 不显示
- maskColor 遮罩颜色,注意:颜色不能完全透明(无效果)或不透明(遮挡图像)
- selectMode 选择模式
- 1 默认 图片和视频混合选择
- 2 首选,以第一次选择的类型为准,如首次选择视频,接着只能选视频,清除后可重新选择图像,以此类推
- 3 视频 仅选择视频
- 4 仅选择图片
- limitVideoCount 首选模式下(9.2)视频选择数量限制
- limitImageCount 首选模式下(9.2)图片选择数量限制
- limitCount 一般选择数量限制 选择数量限制。等同setSelectLimit函数 注:如果设定了limitImageCount和limitVideoCount /limitCount,以小的为准
- splitClickEvent true 拆分图片和选择标的事件,false不拆分,默认为false
- mediaDirPath 选择文件保存应用内部目录,原生平台目录路径,如果是uni路径,需要进行转换
- selectedIconRadius 选择(勾选)标的半径大小,默认10
- selectedIconMargin 选择(勾选)标的边距,默认5
- selectedIconBorderColor 设置选中时候,选择(勾选)标的边框色,不设置为白色
- unselectedIconColor 设置未选中时候,选择(勾选)标的底色,不设置为半透明黑色
- unselectedIconBorderColor 设置未选中时候,选择(勾选)标的边框色,不设置为为青灰色
- indexTextSize 当数字标显示时候,设置数字的字体大小,默认12
标签事件
vue2中标签事件正常回调
vue3中需要另行设置事件回调:setEventCallback来监听对应的标签事件。
onMediaClick
- 选中或取消选中都回调,根据isSelected判断。
- 实现
onMediaClick(e){ //e.detail.type 0 视频 1 图片 //e.detail.isSelected true 被选择,false 取消选择 //e.detail.filePath 文件路径 //e.detail.duration 时长 //e.detail.title 文件名 //e.detail.width width //e.detail.height height //e.detail.fileUri 唯一标识 console.log(res.detail); }
备注:vue3的话,通过setEventcallback监听事件
onMediaSelectedList
获取或重置情况下返回的已选中列表 实现如下,此处不用关注isSelected的值
onMediaSelectedList(e){
console.log(res.detail);
//res.detail[{
//type 0 视频 1 图片
//filePath 文件路径
//e.detail.duration 时长
//e.detail.title 文件名
//e.detail.width width
//e.detail.height height
}]
}
onMediaDirs
获取目录列表时响应,第一个目录是构造的“全部目录”, 前端根据需要更改名称。默认也是显示这个“全部” 实现:
onMediaDirs(e){
console.log(e);
//e.detail:[{
// id //id
// dirName //目录名称
// fileCount //文件数
//}]
}
注意
:vue3使用getMediaDir 和setEventCallback来实现目录选择。
onMediaDirAdd
发现目录,基本上可以不使用,需要的时候获取列表显示
onMediaDirAdd(e){
console.log(e);
//e.detail:{
// id //id
// dirName //目录名称
// fileCount //文件数
//}
}
onMediaDirChanged
目录切换,当调用切换目录时候回调
onMediaDirChanged(e){
console.log(e);
//e.detail:{
// id //id
// dirName //目录名称
// fileCount //文件数
//}
}
选择达上限onLimit
选择达上限,如果设定来上限,当选择达上限时响应
onLimit(e){
//已达选择上限
console.log(e);
}
禁止选择 onForbidSelect
onForbidSelect(res){
//选择模式为首选或单选类型时候,选择其他类型时禁止的通知
//forbidType 1 预设禁选,2 不同类别禁选
console.log(res);
}
图片点击onImageClick
此事件需要splitClickEvent="true" 后拆分事件,onImageClick才会响应
//事件拆分模式下,图片点击事件
onImageClick(res){
console.log(res);
}
标签函数
标签函数均用标签对象来调用 例如:this.$refs.albumView.xxx(yyy);
setEventCallback(callback)设置回调
此接口vue2和vue3都可以使用,由于vue3标签事件不可用,vue3只能用这个函数来得到插件的事件。
this.$refs.albumView.setEventCallback(function(res){
var type = res.type;
if (type == "onMediaDirs"){
//getMediaDirs 后回调
} else if(type == "onMediaDirAdd"){
//插件遍历到对应目录回调
} else if(type == "onMediaDirChanged"){
//目录切换回调
} else if(type == "onMediaClick"){
//图片或视频选中与反选 回调
} else if(type == "onMediaSelectedList"){
//获取选中列表或重置回调都已选中列表
} else if(type == "onLimit"){
//选择上限
} else if(type == "@onForbidSelect"){
//禁止选择
}
});
获取目录getMediaDirs
调用后从onMediaDirs或setEventCallback设置的回调响应(vue3)
切换目录changeMediaDir
默认显示“全部”这个构造的目录,切换其他目录使用这个接口,传入对应的目录信息
this.$refs.albumView.changeMediaDir({
id:-1, //目录id
dirName:"ALL" 目录名称,全部 固定用‘ALL’,其他传对应值
});
切换类型changeMediaType
默认显示所有(视频和图片),切换到其他类型传入 0 视频 ,1 图片 ,2 全部
this.$refs.albumView.changeMediaType(1);
重置reset
已经选中到情况下,要清除所有已选中,调用reset清除选中数据,同时恢复界面状态
this.$refs.albumView.reset();
调用后会响应已经选中到数据
获取已选中数据到列表getSelectedMedia
this.$refs.albumView.getSelectedMedia();
调用后会响应已经选中到数据
设置选则数量限制setSelectLimit
不设置提示的时候插件内不提示,前端自行统一提示
this.$refs.albumView.setSelectLimit(limit,"超过限制的提示语");
预设禁选文件setPreForbidData
可实现设定不能选择的文件,当选择的时候会回调禁选,此时做对应当提示
//参数是数组,数组中当元素是文件信息的fileUri
this.$refs.albumView.setPreForbidData(["/fsa","/afa"]);
加载数据loadMedia
默认情况下组件会自动加载,如果因应用当某些场景,需要获取到权限之后重新加载时调用
this.$refs.albumView.loadMedia();