天天看點

高仿微信-微信EM開發流程--(1)項目介紹

最近在仿照微信頁面和功能開發一個項目,大緻功能都已實作,整個項目走下來,遇上過不少坑,特此來記錄總結一下。首先,先講一下整個項目的大緻架構。

(1)登入注冊功能微信的登入注冊界面沒有花哨的動畫和布局,就是簡簡單單的一個普通的界面,實作起來也比較簡單,但是其中也有一些值得提一下的東西。

a.真正的微信歡迎頁大家都很熟悉,是一張地球圖檔,每次啟動時都會顯示幾秒,用于背景線程執行,這實作起來也很簡單,新開線程去執行登入和一些加載操作,線程開始時,顯示地球圖檔,然後線上程執行完之後,跳轉到主活動。主要還是對handler的使用。

b.微信的登入界面功能還真挺複雜,大緻分為手機号登入,微信号/QQ/郵箱登入,密碼登入,驗證碼登入,四個界面,還有底部彈出框Popupwindow,中間還摻雜一個加載條。

高仿微信-微信EM開發流程--(1)項目介紹
高仿微信-微信EM開發流程--(1)項目介紹
高仿微信-微信EM開發流程--(1)項目介紹

c.如果賬号已經登入過,則直接顯示地球歡迎頁,然後直接跳轉到主活動,如果沒有登入,則顯示登入界面,如果輸入過手機号,點選了下一步,但沒有登入,那麼就顯示登入界面,具體的流程,可以參照真正微信去看看。

(2)主活動頁面

高仿微信-微信EM開發流程--(1)項目介紹
高仿微信-微信EM開發流程--(1)項目介紹
高仿微信-微信EM開發流程--(1)項目介紹
高仿微信-微信EM開發流程--(1)項目介紹

主活動和大多數App模式一樣,采用ViewPager+Fragment模式,去實作滑動翻頁功能,底部四個tab,我們一般是采用RadioGroup,但是這次因為還有右上方小紅點的存在,是以直接使用RelativeLayout,在裡面嵌套布局。

(3)消息頁面MessageFragment,總體實作了和微信大緻的功能,實時接收消息,消息提示,消息已讀,單/群聊的收發。

(4)通訊錄CallFragment,總體是一個ListView,右邊是一個自定義快速檢索欄SideBar,上方是ListView的HeaderView實作的,實作了按拼音首字母排序和快速檢索。

(5)發現FindFragment,這裡主要是對微信功能的一個展示,其中朋友圈裡的功能比較複雜,以後會詳解,其他的功能大多都已實作,布局都還比較簡單。

(6)我 ProfileFragment,這裡是對使用者個人資訊的一個展示,包括對個人資訊的檢視,添加,修改,布局不複雜,但是二級,三級頁面比較多,是以工作量比較大。

總體來說,大緻實作了以下功能:

1、登入

2、單/群聊消息的收發

3、添加/删除好友

4、發起/退出群聊

5、二維碼的生成與掃描

6、發表/評論朋友圈

7、使用者個人資訊的展示,修改

而項目也有幾大難點:

1.環信即時通訊的內建

2.圖檔的三級緩存和加載

3.聊天頁面的開發

4.朋友圈的發表與評論

5.自定義控件的開發

6.okHttp的使用

7.同步異步線程的靈活使用

同時,為了項目更加真實,我自己搭了一個伺服器,很簡單,主要也是為了儲存使用者資訊和朋友圈内容和評論内容,伺服器項目是使用spring-boot架構搭建的,開發IDE是idea,需要的話可以去我的github上clone下來,貼出位址:https://github.com/pgg-pgg/MyWeChatEMServer

App項目我也上傳到github上了,位址是https://github.com/pgg-pgg/MyWeChat