uniapp/uniappx实现图片或视频文件选择时同步告知权限申请目的解决华为等应用市场上架审核问题

在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文件到项目根目录

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:'%1d/%2d 完成',

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页面接口引入如下代码

XML 复制代码
import { RHFselcet } from '@/uni_modules/fz-media-selcet';

2.在uvue页面里要调用的地方加入如下代码:

Kotlin 复制代码
let parameter: UTSJSONObject ={
	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) => {
	// 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.完成后云打包或制作自定义基座既可调试看效果。

相关推荐
tangweiguo0305198739 分钟前
Flutter 与 Android NDK 集成实战:实现高性能原生功能
android·flutter
_祝你今天愉快2 小时前
Android SurfaceView & TextureView
android·性能优化
李新_4 小时前
一个复杂Android工程开发前我们要考虑哪些事情?
android·程序员·架构
越甲八千4 小时前
cv2.threshold cv2.morphologyEx
图像处理
casual_clover5 小时前
Android 中解决 Button 按钮背景色设置无效的问题
android·button
峥嵘life5 小时前
Android14 通过AMS 实例获取前台Activity 信息
android·安全
pengyu7 小时前
【Kotlin系统化精讲:伍】 | 数据类型之空安全:从防御性编程到类型革命🚀
android·kotlin
叽哥7 小时前
flutter学习第 11 节:状态管理进阶:Provider
android·flutter·ios