概況
簡介
這份文檔用來管理上傳圖片和相冊的產(chǎn)品設(shè)計、開發(fā)進度和改進惯疙。媽媽咪呀示罗，感謝微信官方開放了js-sdk，使得開發(fā)者可以調(diào)用微信各種接口陨晶，因此我們決定改進目前匹配系統(tǒng)的上傳方式猬仁，并增加相冊功能。
目的
1.確保所有用戶都能上傳照片珍逸，消除歷史性bug逐虚；
2.增加相冊模塊聋溜，相冊會極大增加匹配系統(tǒng)的粘性和吸引力谆膳；
3.相關(guān)技術(shù)積累，之后我們可以實現(xiàn)更多功能撮躁；
產(chǎn)品設(shè)計
在原個人資料頁增加了上傳入口和相冊入口漱病。上傳入口包括：更換頭像，更換背景和管理個人相冊把曼。
【注意】在這里杨帽，點擊更換頭像和更換背景，都是調(diào)用微信的上傳接口嗤军。@striving注盈，你和@strong的工作要合并。頭像和背景的更換叙赚，流程和周五講基本一致：
用戶操作流程
1.在上面出現(xiàn)的彈出框中點擊更換頭像或更換背景老客，底部出現(xiàn)微信自帶的拍照/相冊模塊。
![Q(NR]HJR3ZU{H_G55$]29FJ.png](http://upload-images.jianshu.io/upload_images/36968-cc3d430008c6b48d.png)
2.若用戶選擇兩幅或以上圖片震叮，alert“只能選擇一張圖片喲請重試”
3.步驟2的用戶界面顯示胧砰。由于后臺過程耗時會很長，所以得在頁面上顯示點東西苇瓣。
a.“上傳中”進度條顯示尉间。
b.alert“照片已經(jīng)上傳成功啦，稍后刷新才能顯示哦~”
相冊
在現(xiàn)行個人資料頁的背景圖片右下角顯示相冊圖標和照片數(shù)量击罪。點擊圖標進入相冊頁面哲嘲，這個頁面由微信接口調(diào)用，我們無法修改媳禁。
相冊管理頁面
![OSD]EAYMV~X{`CR}JKDSNWF.png](http://upload-images.jianshu.io/upload_images/36968-29aa45237dc6e432.png)
說明：
1.點擊刪除撤蚊，這個div被hidden，其他圖片自動填補它的位置损话。同時ajax發(fā)送刪除請求侦啸，數(shù)據(jù)庫刪除相關(guān)條目槽唾。
2.添加照片按鈕，類似上傳頭像/背景的按鈕光涂，但是可以同時上傳多張庞萍。限制最大數(shù)量。設(shè)相冊容量是m(或者8忘闻，或者12钝计，不確定)，已上傳的是n齐佳，若選擇的照片超過m-n張私恬，alert“個人相冊只能保留m張照片，目前已上傳n張炼吴，你還能上傳m-n張”本鸣。
【問題】@skyway，關(guān)于縮略圖硅蹦，直接請求是不是比saveas更快荣德？若是，直接訪問縮略圖鏈接童芹，若不是涮瞻，每次都同時保存縮略圖〖偻剩縮略圖用居中裁剪署咽。
技術(shù)細節(jié)
- 以上說明，相應(yīng)的前后端修改
- access-token臨界的問題什么時候搞定
- 圖片處理相關(guān)七牛的文檔生音。怎么壓縮宁否，是否需要一律轉(zhuǎn)jpg，是否需要漸進顯示久锥。
- 初步確定：頭像壓縮100-100家淤，背景400-250.相冊等比例壓縮，分辨率和質(zhì)量設(shè)定待定瑟由。
進度
1.striving已經(jīng)寫了選擇圖片-上傳-保存七牛-保存數(shù)據(jù)庫基本框架OK
2.草圖基本搞定OK
3.喵喵設(shè)計草圖已OK
4.striving和skyway繼續(xù)完善細節(jié)絮重，相冊管理頁面的后臺實現(xiàn)
5.strong根據(jù)現(xiàn)有說明預(yù)研。先解決pjax吧~~~
6.strong基本前端實現(xiàn)OK
7.后端不穩(wěn)定歹苦，還需完善
優(yōu)化
-
用戶檢測青伤。點擊OnLine，若用戶未上傳頭像殴瘦，跳轉(zhuǎn)至上傳頁面狠角；點擊相冊，若用戶未上傳背景蚪腋，跳轉(zhuǎn)至相冊管理頁面丰歌。用戶檢測的優(yōu)化在BigBang臆想一文中給出姨蟋，這里無視 - 不切割背景圖，個人資料頁的背景初始狀態(tài)顯示400 * 250.手指按住下滑顯示全局立帖。
clipcss屬性眼溶。 - pjax實現(xiàn)在OnLine中進入用戶資料后返回不改變之前瀏覽位置，優(yōu)化用戶體驗晓勇。Qzone觸屏版堂飞，導(dǎo)航欄切換時沒刷新，點擊某人動態(tài)再返回還是留在原點绑咱。
結(jié)論
1.pjax前后端都看绰筛，學(xué)習(xí)
2.點擊個人資料頁頭像，彈出框兩個按鈕：頭像/背景描融。再進入上傳頁面
