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

本篇文章基于uniapp 框架+ nvue，实现了uniapp仿微信/得物相册选择功能实例项目，该插件实例实现了以下功能：

1: 相册过滤

2: 图视频过滤

3: 界面UI定制化

4: 栅格列数定制化

---

效果图

---

技术实现

开发环境：HbuilderX + nodejs

技术框架：uniapp + vue2.x

测试环境：App端(Android + IOS)

插件：Zhimi-Album-JustPicker

代码：开源

---

效果概览

在uniapp开发下，安卓和ios端表现效果高度一致，通过可控性的api配置使得相册实现高度可定制性，可以实现内置图片按钮，列数控制，多语言环境等功能。

---

自由布局的控件

相对于传统的弹出式选择控件，固定不变的按钮，固定不变的布局与设计使得开发面对多种需求的场景显得尤其乏力，因此自由布局插件给予了一个更大，更自由地开发控件，仅仅引入相册显示本身，其余界面均开发者可定制化开发，开发者拥有了足够的控制权。

    ref='albumView'

  class="album-elem"/>

// 获取相册控件对象let albumView =this.$refs.albumView// 监听相册事件回调albumView.setEventCallback(this.AlbumCallbackHanlder)// 设置相册类型albumView.albumType(0);// 0 全部, 1 照片, 2 视频// 获取系统相册列表albumView.getAlbumTypeNames(albums =>this.albums = albums)// 设置每行显示数量let spanCount = 4;

albumView.setSpanCount(spanCount)// 设置最大选择数量varmaxCount = 9;

albumView.setMaxCount(maxCount)

开发者可以设置列数，最大选择数，甚至是相册类型，指定相册，awesome！

---

控制筛选，清空选择

相较于与传统的相册选择插件不同，插件提供方法控制过滤相册，清空选择等方法，方便结合各类场景，例如发送图视频、朋友圈上传图片、图文排版场景。

获取系统相册列表

albumView.getAlbumTypeNames(albums =>this.albums = albums)

加载相册内容

albumView.loadAlbum(albumId)// 通过上述的获取相册列表获得

清空已选项目

albumView.clearCheckedImages()

获取已选项目

albumView.clearCheckedImages()

---

灵活的客制化UI

由于相册控件的组件化，使得界面的布局更加灵活，不论是配色，语言，界面布局都能自由搭配，仿微信相册，仿得物界面，均能掌握在手中。

---

至此uniapp开发仿微信仿微信/得物相册选择界面的分享到此为止咯

对于这部分的代码使用到的原生插件，可以参考uniapp插件市场中的插件，在插件市场也有开源的代码工程哦。

DCloud 插件市场可以直接搜索《智密相册-自定义原生相册+图片视频过滤》找到这款自定义相册插件

通过插件市场对应的按钮可以直接导入开源代码，但是记得先安装HbuilderX哦