在UNIAPP支持vue和nvue,在UNIAPPX支持uvue,安卓支持在選擇圖片或視頻文件權限申請的時候自動同步告知權限申請目的。輕松解決在華為應用市場審核,要求告知權限申請目的或說明的問題。
UNIAPP相冊圖片視頻選擇器(安卓可以自定義界面樣式)功能介紹:
1.支持uniapp和uniappx,現在已經兼容了純血鴻蒙和安卓后續將會兼容IOS
2.支持打開系統相冊選擇相片
3.支持多選和單選
4.支持設置多種語言(僅安卓)
5.支持自定義界面主題樣式(僅安卓)
6.支持媒體文件類型選擇 0: ALL(視頻和圖片) 1: IMAGE(圖片) 2: VIDEO(視頻) 3: AUDIO(音頻)
7.支持媒體文件預覽
8.支持設置開啟和關閉原圖功能
注意:集成完成后需要云打包或自定義基座才能生效,因為這是UTS原生SDK插件。
首先UNIAPP插件下載圖片選擇器:圖片選擇器插件(可以同步安卓權限申請說明 可自定義界面樣式)安裝到UNIAPP或你UNIAPPX項目里:
UNIAPP實現方法如下:
鴻蒙無需申請權限
安卓端首先AndroidManifest.xml里配置示例文件里所需的權限也可直接復制示列里的AndroidManifest.xml文件到項目根目錄
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><!-- 適配android 13 媒體文件選擇權限--><uses-permission android:name="android.permission.READ_MEDIA_IMAGES" /><uses-permission android:name="android.permission.READ_MEDIA_VIDEO" /><uses-permission android:name="android.permission.READ_MEDIA_AUDIO" /><uses-permission android:name="android.permission.RECORD_AUDIO" /><uses-permission android:name="android.permission.READ_MEDIA_VISUAL_USER_SELECTED" /><uses-permission android:name="android.permission.CAMERA" /><application android:requestLegacyExternalStorage="true"><meta-data android:name="ScopedStorage" android:value="true" /></application>
uni-app項目中集成調用示例如下:
1.接口引入
import { RHFselcet } from '@/uni_modules/fz-media-selcet';
2.vue或nvue文件內調用實現代碼;
let parameter ={
?? ? ? ?MediaType:2,//設置選擇類型 ?0: ALL(全部) 1: IMAGE(圖片) 2: VIDEO(視頻) 3: AUDIO(音頻) 不傳默認為1圖片
?? ??? ?Single:2,//設置單選或多選(鴻蒙無需傳此參數), 1為單選,2為多選,不傳默認為多選
?? ??? ?maxNum:6,//設置最大選中數,不傳默認為9
?? ??? ?isOriginal:false, //是否開啟原圖功能,不傳默認為false
?? ? ? ?isDisplayCamera:true,//是否顯示拍攝按鈕,不傳默認為true
?? ?//語言設置(僅安卓), 0:簡體中文,1:繁體,2:英語,3:韓語,4:德語,5:法語,6:日語,7:越語,8:西班牙語,9:葡萄牙語,10:阿拉伯語,11:俄語,12:捷克,13:哈薩克斯坦,不傳默認為0
?? ??? ?Language:2,
?? ??? ?//主題界面樣式設置(僅安卓),不傳為默認樣式
?? ? ? ?theme:{
?? ??? ?titleBarStyle:{
?? ??? ?TitleBackgroundColor:'#8E07FD'
?? ? ? },
?? ? ?bottomNavBarStyle:{
?? ??? ? ?PreviewNormalTextColor:'#8E07FD',
?? ??? ? ?PreviewSelectTextColor:'#8E07FD',
?? ??? ? ?BarBackgroundColor:'#FFFFFF',
?? ??? ? ?EditorTextColor:'#8E07FD',
?? ??? ? ?OriginalTextColor:'#8E07FD',
?? ? ? ?},
?? ? ? selectMainStyle:{
?? ??? ? ? NumberStyle:true, //選中樣式是否為數字,不傳默認顯示勾選樣式
?? ??? ? ? isbtn:true, //完成按鈕是否為顯示背景,不傳為默認不顯示按鈕背景
?? ??? ?//如需修改按鈕顏色需要在res/values/colors.xml里修改btn_primary和btn_hover的顏色值和按下后的顏色值
?? ? ? ? ? SelectTextColor:'#ffffff',//選擇結果文字顏色
?? ? ? ? ?// SelectText:'%1$d/%2$d 完成',
?? ? ? ? ? SelectText:'使用(%1$d)',//選擇結果要顯示的文字,不傳默認顯示:已完成
?? ? ? ? ? StatusBarColor:'#8E07FD',
?? ? ? ? ? OriginalTextColor:'#8E07FD',
?? ? ? }
?? ? ? ?}
? ? ? ?}?RHFselcet.getPicture( parameter, (data) => {
?? ?let arrData = data.mediaArray
?? ?let jsonData = JSON.stringify(arrData)
?? ?console.log(jsonData)
?? ?//回調結果:[{"mimeType":"video/mp4","num":1,"Pathurl":"/storage/emulated/0/DCIM/Camera/lv_0_20241025172529.mp4","height":1920,"fiename":"lv_0_20241025172529.mp4","path":"content://media/external/video/media/427606","Pathid":427606,"duration":16393,"size":20002573,"FolderName":"Camera","dateAddedTime":1729848339,"width":1080},{"mimeType":"video/mp4","num":2,"Pathurl":"/storage/emulated/0/DCIM/Camera/video_20241025_170438.mp4","height":1920,"fiename":"video_20241025_170438.mp4","path":"content://media/external/video/media/427604","Pathid":427604,"duration":16331,"size":35778914,"FolderName":"Camera","dateAddedTime":1729847078,"width":1080}]
})
3.集成后云打包或自定義基座調試既可看到效果
uni-appx實現方法如下:
1.uvue頁面接口引入如下代碼
import { RHFselcet } from '@/uni_modules/fz-media-selcet';
2.在uvue頁面里要調用的地方加入如下代碼:
let parameter: UTSJSONObject ={MediaType:2,//設置選擇類型 0: ALL(全部) 1: IMAGE(圖片) 2: VIDEO(視頻) 3: AUDIO(音頻) 不傳默認為1圖片Single:2,//設置單選或多選(鴻蒙無需此參數), 1為單選,2為多選,不傳默認為多選maxNum:6,//設置最大選中數,不傳默認為9 僅多選時生效isOriginal:false, //是否開啟原圖功能,不傳默認為falseisDisplayCamera:true,//是否顯示拍攝按鈕,不傳默認為true
//語言設置(僅安卓), 0:簡體中文,1:繁體,2:英語,3:韓語,4:德語,5:法語,6:日語,7:越語,8:西班牙語,9:葡萄牙語,10:阿拉伯語,11:俄語,12:捷克,13:哈薩克斯坦,不傳默認為0Language:2,//主題界面樣式設置(僅安卓),不傳為默認樣式theme:{titleBarStyle:{TitleBackgroundColor:'#8E07FD'},bottomNavBarStyle:{PreviewNormalTextColor:'#8E07FD',PreviewSelectTextColor:'#8E07FD',BarBackgroundColor:'#FFFFFF',EditorTextColor:'#8E07FD',OriginalTextColor:'#8E07FD',},selectMainStyle:{NumberStyle:true, //選中樣式是否為數字,不傳默認顯示勾選樣式isbtn:true, //完成按鈕是否顯示背景顏色//如需修改按鈕顏色需要在res/values/colors.xml里修改btn_primary和btn_hover的顏色值和按下后的顏色值SelectTextColor:'#ffffff',//選擇結果文字顏色// SelectText:'%1$d/%2$d 完成',SelectText:'使用(%1$d)',//選擇結果要顯示的文字,不傳默認顯示:已完成StatusBarColor:'#8E07FD',OriginalTextColor:'#8E07FD',}}}
//打開相冊或視頻RHFselcet.getPicture( parameter, (data) => {// console.log(data["mediaArray"])let arrData = data["mediaArray"]let jsonData = JSON.stringify(arrData)console.log(jsonData)
//回調結果:[{"mimeType":"video/mp4","num":1,"Pathurl":"/storage/emulated/0/DCIM/Camera/lv_0_20241025172529.mp4","height":1920,"fiename":"lv_0_20241025172529.mp4","path":"content://media/external/video/media/427606","Pathid":427606,"duration":16393,"size":20002573,"FolderName":"Camera","dateAddedTime":1729848339,"width":1080},{"mimeType":"video/mp4","num":2,"Pathurl":"/storage/emulated/0/DCIM/Camera/video_20241025_170438.mp4","height":1920,"fiename":"video_20241025_170438.mp4","path":"content://media/external/video/media/427604","Pathid":427604,"duration":16331,"size":35778914,"FolderName":"Camera","dateAddedTime":1729847078,"width":1080}]let DatalArray = JSON.parseArray(jsonData)console.log(DatalArray)
});
//打開系統相冊或視頻進行選擇RHFselcet.getSysAlbum({//設置選擇類型 0: ALL(全部) 1: IMAGE(圖片) 2: VIDEO(視頻) 3: AUDIO(音頻) 不傳默認為1圖片MediaType:2,//設置選擇模式 1為單選,2為多選,不傳默認為2多選Single:1}, (data) => {console.log(data["mediaArray"])let ArrayData = data["mediaArray"]let resData = JSON.stringify(ArrayData)console.log(resData)
});
3.完成后云打包或制作自定義基座既可調試看效果。