UNIAPP或UNIAPPX实现UTS图片选择器顶部显示权限申请说明

626 阅读3分钟

因为华为市场上架需要顶部显示权限申请目的说明,因为最近用UNIAPP开发APP常用到图片选择功能,于是自己使用UTS开发了一个原生插件实现了图片选择顶部同步权限申请说明,废话不多说见下图效果:

webp.webp

这是我通过学习UTS插件开发后,经过很多天研究出来的图片选择器,这个图片选择器可以实现自定义界面效果使用方法非常简单如下:

UNIAPPX使用如下:

第一步:接口引入

import { RHFselcet } from '@/uni_modules/fz-media-selcet';

第二步:实现UNIAPPX调用方法

MediaType:2,//设置选择类型  0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
Single:2,//设置单选或多选, 1为单选,2为多选,不传默认为多选
maxNum:6,//设置最大选中数,不传默认为9 仅多选时生效
minNum:0,//最少选中数,不传为默认为0 仅多选时生效
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:'#20a0ff'
},
bottomNavBarStyle:{
  PreviewNormalTextColor:'#20a0ff',
  PreviewSelectTextColor:'#20a0ff',
  BarBackgroundColor:'#FFFFFF',
  EditorTextColor:'#20a0ff',
  OriginalTextColor:'#20a0ff',
},
selectMainStyle:{
   NumberStyle:true, //选中样式是否为数字,不传默认显示勾选样式
   isbtn:true, //完成按钮是否显示背景颜色
   //如需修改按钮颜色需要在res/values/colors.xml里修改btn_primary和btn_hover的颜色值和按下后的颜色值
   SelectTextColor:'#ffffff',//选择结果文字颜色
  // SelectText:'%1$d/%2$d 完成',
   SelectText:'使用(%1$d)',//选择结果要显示的文字,不传默认显示:已完成
   StatusBarColor:'#20a0ff',
   OriginalTextColor:'#20a0ff',
}
}
   }
//打开相册或视频
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)
});

UNIAPP使用方法如下:

第一步:还是引入插件接口

import { RHFselcet } from '@/uni_modules/fz-media-selcet';

第二步:调用方法

    MediaType:2,//设置选择类型  0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
    Single:2,//设置单选或多选, 1为单选,2为多选,不传默认为多选
    maxNum:6,//设置最大选中数,不传默认为9 仅多选时生效
    minNum:0,//最少选中数,不传为默认为0 仅多选时生效
    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:'#20a0ff'
   },
  bottomNavBarStyle:{
      PreviewNormalTextColor:'#20a0ff',
      PreviewSelectTextColor:'#20a0ff',
      BarBackgroundColor:'#FFFFFF',
      EditorTextColor:'#20a0ff',
      OriginalTextColor:'#20a0ff',
    },
   selectMainStyle:{
       NumberStyle:true, //选中样式是否为数字,不传默认显示勾选样式
       isbtn:true, //完成按钮是否为显示背景,不传为默认不显示按钮背景
    //如需修改按钮颜色需要在res/values/colors.xml里修改btn_primary和btn_hover的颜色值和按下后的颜色值
       SelectTextColor:'#ffffff',//选择结果文字颜色
      // SelectText:'%1$d/%2$d 完成',
       SelectText:'使用(%1$d)',//选择结果要显示的文字,不传默认显示:已完成
       StatusBarColor:'#20a0ff',
       OriginalTextColor:'#20a0ff',
   }
    }
   }

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}]
});
//打开系统相册或视频进行选择
RHFselcet.getSysAlbum({
//设置选择类型  0: ALL(全部) 1: IMAGE(图片) 2: VIDEO(视频) 3: AUDIO(音频) 不传默认为1图片
MediaType:2,
//设置选择模式  1为单选,2为多选,不传默认为2多选
Single:1}, (data) => {
let ArrayData = data.mediaArray
let resData = JSON.stringify(ArrayData)
console.log(resData)
});