当前位置: 首页 > Web前端 > HTML

uniapp+nvue实现微信-得物相册插件:选择界面+自定义相册+图片视频过滤

时间:2023-03-28 17:55:03 HTML

本文基于uniapp框架+nvue,实现uniapp仿微信/得物相册选择功能的示例工程。实例实现如下功能:1:相册过滤2:图片视频过滤3:界面UI自定义4:网格列数自定义渲染技术实现开发环境:HbuilderX+nodejs技术框架:uniapp+vue2.x测试环境:App端(Android+IOS)插件:Zhimi-Album-JustPicker代码:开源效果概览在uniapp的开发下,Android端和ios端性能高度一致,可控的api配置使得相册高度可定制,可实现内置图片按钮、栏目编号控制、多语言环境等功能。相比于传统的弹出式选择控件,自由布局控件有固定的按钮,固定的布局和设计,使得开发各种需求的场景尤为疲惫,所以自由布局插件给出了更大更自由开发的控件,只引入相册显示本身,其余界面可以由开发者自定义,开发者有足够的控制权。this.albums=albums)//设置每行显示的个数letspanCount=4;albumView.setSpanCount(spanCount)//设置最大选择数varmaxCount=9;albumView.setMaxCount(maxCount)开发者可以设置列数,最大选择数,甚至相册类型,指定相册,厉害了!控制过滤、清选相对于传统的相册选择插件,插件提供了控制过滤相册、清选等方法,方便结合发送图片视频、上传图片等多种场景时刻和图形布局场景。获取系统相册列表albumView.getAlbumTypeNames(albums=>this.albums=albums)加载相册内容albumView.loadAlbum(albumId)//通过上述获取相册列表清除选中项albumView.clearCheckedImages()获取选中项项目相册视图。clearCheckedImages()灵活定制UI由于相册控件的组件化,界面布局更加灵活。无论是颜色、语言、界面布局都能自由搭配,仿微信相册、仿实物界面,尽在掌握。至此uniapp已经开发出仿微信,仿微信/dewu相册选择界面。这部分代码使用的原生插件可以参考uniapp插件市场的插件。插件市场也有开源代码项目。自定义相册:https://ext.dcloud.net.cn/plu...可以通过插件市场对应的按钮直接导入开源代码,但是记得先安装HbuilderX