今天分享一个基于uniapp+vue实现仿微信相册的例子。本插件完全还原微信相册功能1：相册选择2：图片、视频类型滤镜3：自定义相册界面UI技术实现开发环境：HbuilderX+nodejs技术框架：uniapp+vue2.x测试环境：App端（Android+IOS）代码：开源效果概览这里的界面布局主要仿微信相册界面，风格主要是功能上使用了插件“智能相册-自定义原创相册”，相册的相关功能为使用插件实现，然后我们自己实现类似微信的相册界面。这里的布局代码主要如下{{albumName||'所有照片'}}下一个{{selectedCount?`(${selectedCount})`:''}}这里有一个重点，由于我们去掉了原来的标题栏，这个需要在pages.json中进行配置，具体配置如下{"path":"pages/index/wxAlbum","style":{"navigationStyle":"custom"}},相册控件初始化这里主要操作原生控件“zhimi_album_view”提供的方法，首先需要执行控件方法设置相册type，回调事件，获取专辑列表，如下SetcallbackeventletalbumView=this.$refs.albumViewalbumView.setEventCallback(({type,data})=>{console.log(type,data)})Setalbum输入letalbumView=this.$refs.albumViewalbumView.albumType(0);//0all,1photo,2video获取系统专辑列表letalbumView=this.$refs.albumViewalbumView.getAlbumTypeNames(album=>{//albums=[{albumId,name,total}]ole.log(albums)})loadthealbumfileletalbumView=this.$refs.albumViewalbumView.loadAlbum('')//这里为空表示所有文件，如果传albumId就是专辑对应的文件具体过程是设置回调事件，然后设置专辑类型，获取专辑列表，获取文件连接，组合代码是这样的letalbumView=this.$refs.albumViewalbumView.setEventCallback(({type,data})=>{console.log(type,data)})albumView.albumType(0);//0all,1photo,2videoalbumView.getAlbumTypeNames(albums=>{this.albums=albums})albumView.loadAlbum('')在微信中选择切换相册我们就可以切换相册了。这里控件提供了获取和加载相册的功能，所以我们也可以实现切换相册的功能。对于对应的ui，我们简单实现一个切换列表click="loadAlbum('')">所有图片{{item.name}}（{{item.total}}件）。album-select-container{高度：0；宽度：750rpx；背景颜色：#FFF；}.album-select-item{height:60px;line-height:60px;font-size:14px;padding:015px;边框底部宽度：1px；边框底部颜色：#f2f2f2；}.show-album-ctx{flex:1;}效果大概就是这样监听选择，编辑等事件做相册很重要监听事件有利于增强交互，比如选择了多少，编辑文件等//相册事件回调AlbumCallbackHanlder(res){let{type,data}=resswitch(type){//没有获得相册权限case'noAuthority':uni.showModal({content:`未获得相册权限`})break;//图片/视频选择改变case'onCheckedChanged':this.selectedCount=res.selectNumbreak//点击编辑图片/视频case'onClickEditImage':console.log(res);休息;默认值：console.log(res)中断；}},完成选择一般来说，这几类文件都是在弹出层选择文件后返回给业务流程的。这里忽略业务流程交互，只考虑选择部分。选择完成后，开发者需要调用自己提供的控件。api获取文件列表，具体代码如下//获取相册控件对象letalbumView=this.$refs.albumView//获取选中的数据albumView.getCheckedImagePaths(filePaths=>{//注意：返回的是filePaths这里是platforms路径，前端显示请加file://前缀console.log(filePaths)})注意注释，这里最大的一点就是路径，如果获取到的路径前端需要显示在界面前面，需要加上file://前缀，比如获取到的文件路径如下：/var/data/Android/Album/timeStamp.png前端显示的时候，需要这样写注意这里有3个斜线，因为Android等移动系统是基于unix-like开发的，所以取文件来自/根目录，所以前端需要使用文件协议，以/开头。好了，至此，uniapp仿微信相册的分享就完成了。可以根据自己的爱好自定义，改成仿得物，仿QQ相册，界面显示格式不唯一。这部分代码使用的原生插件可以参考uniapp插件市场的插件智能相册-自定义原生相册+图片视频过滤
