明天咱们分享基于uniapp + vue实现仿微信相册实例，该插件齐全还原了微信相册的性能
1: 相册抉择
2: 图片，视频类型过滤
3: 自定义相册界面UI
技术实现
- 开发环境：HbuilderX + nodejs
- 技术框架：uniapp + vue2.x
- 测试环境：App端(Android + IOS)
- 代码：开源
成果概览
界面布局
这里仿微信相册界面次要还是款式为主，性能上应用了“智密相册-自定义原生相册”插件，应用插件实现相册的相干性能，而后咱们本人实现仿微信相册界面。这里布局代码次要如下
<view class="album-container" :style="{ paddingTop: statusBarHeight + 'px' }"> <!-- 顶部栏，用于显示按钮和下一步 --> <view class="album-title-bar"> <view class="album-title-bar__left" @click="doClear"> <image class="album-close-btn" src="../../static/icon_close.png" mode="widthFix"></image> </view> <view class="album-title-bar__center" @click="showAlbumSelect = !showAlbumSelect"> <view class="album-title-bar__center-album-btn"> <text class="album-title-bar__center-name">{{ albumName || '所有照片' }}</text> <view class="album-title-bar__center-arrow"> <image class="album-title-bar__center-arrow-inner" src="../../static/icon_arrow_down.png" mode="widthFix"></image> </view> </view> </view> <view class="album-title-bar__right" @click="doFinish"> <text class="album-title-bar__right-btn">下一步{{ selectedCount ? `(${selectedCount})` : '' }}</text> </view> </view> <!-- 插件自带的原生控件 --> <zhimi_album_view ref='albumView' class="album-elem" :class="{ 'show-album-ctx': !showAlbumSelect }"></zhimi_album_view> </view>这里有个重点，因为咱们去掉了原生的标题栏，这须要在pages.json中进行配置，具体配置如下
{ "path": "pages/index/wxAlbum", "style": { "navigationStyle":"custom" }},相册控件初始化
在这里咱们次要是操作原生控件“zhimi_album_view”提供的办法，首先咱们须要执行控件办法设置相册类型，回调事件，以及获取相册列表，具体如下
设置回调事件
let albumView = this.$refs.albumViewalbumView.setEventCallback(({ type, data }) => { console.log(type, data)})设置相册类型
let albumView = this.$refs.albumViewalbumView.albumType(0); // 0 全副, 1 照片, 2 视频获取零碎相册列表
let albumView = this.$refs.albumViewalbumView.getAlbumTypeNames(albums => { // albums = [{ albumId, name, total }] console.log(albums)})加载相册文件
let albumView = this.$refs.albumViewalbumView.loadAlbum('') // 这里空就是全副文件，如果传了albumId就是对应相册的文件具体的流程就是设置回调事件，而后设置相册类型，获取相册列表，获取文件连贯，合起来的代码就是这样的
let albumView = this.$refs.albumViewalbumView.setEventCallback(({ type, data }) => { console.log(type, data)})albumView.albumType(0); // 0 全副, 1 照片, 2 视频albumView.getAlbumTypeNames(albums => { this.albums = albums})albumView.loadAlbum('')抉择切换相册
在微信外面咱们能够切换相册，在这里控件提供了获取相册和加载相册的性能，因而咱们也能够实现切换相册的性能，对应的ui咱们简略的实现一个切换列表
<scroll-view class="album-select-container" :class="{ 'show-album-ctx': showAlbumSelect }" scroll-y> <list> <cell @click="loadAlbum('')"> <text class="album-select-item">所有图片</text> </cell> <cell v-for="(item, index) in albums" :key="item.albumId" @click="loadAlbum(item)"> <text class="album-select-item">{{item.name}}({{item.total}}张)</text> </cell> </list></scroll-view>.album-select-container { height: 0;width: 750rpx;background-color: #FFF; }.album-select-item { height: 60px;line-height: 60px;font-size: 14px;padding: 0 15px;border-bottom-width: 1px;border-bottom-color: #f2f2f2; }.show-album-ctx { flex: 1; }做进去的成果大略就是这样的
监听抉择，编辑等事件
做相册做重要的是监听事件，监听事件有利于做一些加强交互，比方已选多少，编辑文件等
// 相册事件回调 AlbumCallbackHanlder (res) { let { type, data } = res switch (type) { // 未获取相册权限 case 'noAuthority': uni.showModal({ content: `未获取相册权限` }) break; // 图片/视频抉择变动 case 'onCheckedChanged': this.selectedCount = res.selectNum break // 点击编辑图片/视频 case 'onClickEditImage': console.log(res); break; default: console.log(res) break; } },实现抉择
一般来说这类都是以一个弹出层抉择完文件之后返回业务流程的，这里抛开业务流程交互，只着重思考抉择局部的。
当抉择实现之后，开发者须要本人调用控件提供的Api获取到文件的列表，具体的代码如下
// 获取相册控件对象let albumView = this.$refs.albumView// 获取抉择数据albumView.getCheckedImagePaths(filePaths => { // 留神：此处返回的filePaths为平台门路，前端显示请加file://前缀 console.log(filePaths)})留神看正文，这里最大的重点是门路，如果说获取到的门路前端须要显示在界面后面，须要增加file://前缀，比方获取到的文件门路如下：
/var/data/Android/Album/timeStamp.png
前端显示的时候须要这样写
<image src="file:///var/data/Android/Album/timeStamp.png"/>
留神这里是3个斜杆，因为安卓这类挪动端系统都是基于类unix开发的，因而都是从 / 根开始检索文件的，所以前端须要应用file协定，并且以/结尾。
ok，到这里uniapp实现仿微信相册的局部就分享实现啦，大家能够依据本人的喜好定制，改为仿得物，仿qq相册都能够呀，界面显示模式不惟一嘛。
对于这部分的代码应用到的原生插件，能够参考uniapp插件市场中的插件
智密相册-自定义原生相册+图片视频过滤