uniapp框架如何實現仿微信相簿：圖視訊過濾、相簿選擇功能
今天我們分享基於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.albumView
albumView.setEventCallback(({ type, data }) => {
console.log(type, data)
})設定相簿型別
let albumView = this.$refs.albumView albumView.albumType(0); // 0 全部, 1 照片, 2 視訊
獲取系統相簿列表
let albumView = this.$refs.albumView
albumView.getAlbumTypeNames(albums => {
// albums = [{ albumId, name, total }]
console.log(albums)
})
載入相簿檔案
let albumView = this.$refs.albumView
albumView.loadAlbum('') // 這裡空就是全部檔案，如果傳了albumId就是對應相簿的檔案
具體的流程就是設定回撥事件，然後設定相簿型別，獲取相簿列表，獲取檔案連線，合起來的程式碼就是這樣的
let albumView = this.$refs.albumView
albumView.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相簿都可以呀，介面顯示形式不唯一嘛。