本篇文章基於uniapp 框架+ nvue，實現了uniapp仿微信/得物相冊選擇功能實例項目，該插件實例實現了以下功能：
1: 相冊過濾
2: 圖視頻過濾
3: 界面UI定制化
4: 柵格列數定制化
效果圖：
技術實現
- 開發環境：HbuilderX + nodejs
- 技術框架：uniapp + vue2.x
- 測試環境：App端(Android + IOS)
- 插件：Zhimi-Album-JustPicker
- 代碼：開源
效果概覽
在uniapp開發下，安卓和ios端表現效果高度一致，通過可控性的api配置使得相冊實現高度可定制性，可以實現內置圖片按鈕，列數控制，多語言環境等功能。
自由布局的控件
相對於傳統的彈出式選擇控件，固定不變的按鈕，固定不變的布局與設計使得開發面對多種需求的場景顯得尤其乏力，因此自由布局插件給予了一個更大，更自由地開發控件，僅僅引入相冊顯示本身，其余界面均開發者可定制化開發，開發者擁有了足夠的控制權。
<zhimi_album_view 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) // 設置最大選擇數量 var maxCount = 9; albumView.setMaxCount(maxCount)
開發者可以設置列數，最大選擇數，甚至是相冊類型，指定相冊，awesome！
控制篩選，清空選擇
相較於與傳統的相冊選擇插件不同，插件提供方法控制過濾相冊，清空選擇等方法，方便結合各類場景，例如發送圖視頻、朋友圈上傳圖片、圖文排版場景。
獲取系統相冊列表
albumView.getAlbumTypeNames(albums => this.albums = albums)
加載相冊內容
albumView.loadAlbum(albumId) // 通過上述的獲取相冊列表獲得
清空已選項目
albumView.clearCheckedImages()
獲取已選項目
albumView.clearCheckedImages()
靈活的客制化UI
由於相冊控件的組件化，使得界面的布局更加靈活，不論是配色，語言，界面布局都能自由搭配，仿微信相冊，仿得物界面，均能掌握在手中。
至此uniapp開發仿微信仿微信/得物相冊選擇界面的分享到此為止咯
對於這部分的代碼使用到的原生插件，可以參考uniapp插件市場中的插件，在插件市場也有開源的代碼工程哦。
DCloud 插件市場自定義相冊地址：https://ext.dcloud.net.cn/plugin?id=5846
通過插件市場對應的按鈕可以直接導入開源代碼，但是記得先安裝HbuilderX哦
歡迎加入插件使用交流QQ群：755910061 一起討論uniapp開發