更新记录

1.6（2023-10-17）

增加视频封面获取，禁选项显示蒙版，拆分图标和选择图标事件

1.5（2023-08-09）

增加权限检查区分，增加加载相册，增加预设禁止选择。

1.4（2023-07-05）

增加禁止选择 onForbidSelect回调。

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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原生插件配置”->”云端插件“列表中删除该插件重新选择

多功能多媒体相册选择插件

功能简述：

1. 支持文件目录选择
2. 支持单一类型显示
3. 支持修改选择标颜色
4. 支持修改数字选择标位置/颜色
5. 支持遮罩是否显示
6. 支持ios和Android
7. 支持多选
8. 支持重置
9. 支持选择数量限制
10. 支持vue2/vue3
11. 支持自定义整个相册的显示位置
12. 支持纯接口获取最近n个图像或视频
13. 支持多种选择模式（图像视频混合默认，首选类型，图像类型，视频类型）
14. 支持（13）首选模式中视频选择数量限制和图像选择限制
15. 支持设定禁选文件
16. 本地视频封面获取
17. 可单独获得图片的点击事件和选择标的选择事件
18. 补充ios title 字段

使用说明

Android权限

android 需要sdcard存储权限，请优先申请再使用

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>//此权限打开manifest.json源码视图添加

iOS权限

ios 需要相册访问权限，请在manifest.json中勾选并填写提示信息

插件对象

var api = uni.requireNativePlugin("Lizii-Album");

获取相册权限

api.requestAlbumPermission(function(res){
    console.log(res);
    if(!res){
        uni.showModal({
            confirmText:"相册权限未获取到,请重新重新授权"
        })
    }
    if(res.result){
        if(res.msg != "already"){
            //新授权，
        }
    }
});

获取最近图片或视频

var type = 1;//0 视频 1 图片 2 图片和视频
var size = 2;//数量，1代表最近一张图片或视频，n代表最近n个
api.getLatestMedia(type,size,function(res){
    console.log(res);
    //res 数组结果，小于等于size
    /*"filePath": "/var/mobile/Media/DCIM/100APPLE/IMG_0569.PNG",
      "type": 1,
      "duration": 0*/
});

获取本地视频封面

//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");
api.getImageFromVideo({
    filePath:"/storage/emulated/0/DCIM/Camera/TG-2023-02-18-202627183.mp4", //绝对路径，如果是uni获取的文件，需要进行转换
    savePath:outputDir, //封面保存位置，要传有效的能访问的文件目录，不传使用默认目录
    time:0       //单位毫秒，小于视频时长，不知道视频时长就传0.
},function(res){
    console.log(res);
    if(res.success){
        that.imgsrc = "file://"+res.savePath;
        console.log(that.imgsrc);
    }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="1"
        colnum="3" 
        cornerRadius="5"
        selectedIconColor="#00ff00"
        indexLocation="2"
        indexTextColor="#ffffff"
        maskShow="false"
        maskColor="#af000000"
        selectMode="1"
        limitVideoCount="1"
        limitImageCount="1"
        limitCount="1"
        splitClickEvent="false"
        />

标签属性

1. mediaType 设置显示的文件类型，默认显示全部（包括视频和图片）
   • 0 - 视频
   • 1 - 图片
   • 2 - 全部
2. colnum 相册显示列数，不设置显示3列
3. cornerRadius 对象显示圆角，不设置圆角5
4. selectedIconColor设置选中时候，选择（勾选）标的底色，不设置为橙色
5. indexLocation 选择数字标的位置，显示选择的第几项，默认不显示
   • 1 左上角显示
   • 2 右上角显示，勾选标不显示，数字标未选中为小圆圈，选中后底色为 selectedIconColor
   • 3 左下角显示
   • 4 其它值不显示
6. indexTextColor 当数字标显示时候，设置数字的颜色，默认白色
7. maskShow 选中时显示阴影遮罩 默认不显示
   • true 显示
   • false 不显示
8. maskColor 遮罩颜色，注意：颜色不能完全透明（无效果）或不透明（遮挡图像）
9. selectMode 选择模式
   • 1 默认 图片和视频混合选择
   • 2 首选，以第一次选择的类型为准，如首次选择视频，接着只能选视频，清除后可重新选择图像，以此类推
   • 3 视频 仅选择视频
   • 4 仅选择图片
10. limitVideoCount 首选模式下（9.2）视频选择数量限制
11. limitImageCount 首选模式下（9.2）图片选择数量限制
12. limitCount 一般选择数量限制 选择数量限制。等同setSelectLimit函数 注：如果设定了limitImageCount和limitVideoCount /limitCount，以小的为准
13. splitClickEvent true 拆分图片和选择标的事件，false不拆分，默认为false

标签事件

vue2中标签事件正常回调 vue3中需要另行设置事件回调：setEventCallback来监听对应的标签事件。

onMediaClick

1. 选中或取消选中都回调，根据isSelected判断。
2. 实现

   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();