本人微信公眾號： 前端修煉之路，歡迎關注

背景介紹

經過上一篇文章uni-app官方教程學習手記的學習之後，我就著手做這個專案了。

目前已經初步搭出了整體的框架，秉著取之於社會，回饋於社會的原則，我將這個專案開源到GitHub uni-shop，發展壯大uni-app社群。專案肯定有不足和考慮不周之處，歡迎大家指正並提出Issues。

因為這是個真實的專案，為了一名合格的程式設計師的職業操守，專案真實資料部分並不會開源。為了提高整體的流暢性和幫助自己開發，資料部分採用Easy Mock模擬的假資料。有需要的朋友可以自行修改介面。

這個專案就類似於一個微信，或者說模仿一個微信應用。包括聊天、群聊、朋友圈等等。因為本人水平有限，前期計劃只完成一對一兩人聊天功能，不包括其他功能。目前聊天的功能還沒有實現，因為我並沒有做過這方面的應用。

另外就是這個專案設計的本身，本人也不知道完全仿照一個微信做的目的是什麼？或者說申請應用上架App Store時，是否合法？再或者是否對騰訊微信造成侵權？希望有知道的朋友，可以給我留言。

拋去這些困惑以外，單純對這個專案而言，通過這個過程，將自己原本不會的東西，通過一段時間的學習和實踐，最終實現了。我想，這才是一名程式設計師對程式的熱情吧~ 把不可能變成可能，把不會變成學會。

目錄結構

┌─components            uni-app元件目錄
│  └─comp-a.vue         可複用的a元件
├─hybrid                存放本地網頁的目錄
├─platforms             存放各平臺專用頁面的目
├─pages                 業務頁面檔案存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態資源（如圖片、視訊等）的地方，注意：靜態資源只能存放於此
├─main.js               Vue初始化入口檔案
├─App.vue               應用配置，用來配置App全域性樣式以及監聽 應用生命週期
├─manifest.json         配置應用名稱、appid、logo、版本等打包資訊
└─pages.json            配置頁面路由、導航條、選項卡等頁面類資訊
    
 

以上是一個uni-app工程包含的目錄及檔案，可以通過目錄結構檢視詳細資訊。

知識點

簡單羅列出專案中使用到的元件和相關技術，詳細資訊查詢官方手冊即可。

• pages.json：用來對 uni-app 進行全域性配置，決定頁面檔案的路徑、視窗表現、設定多 tab 等。專案中包括修改標題文字、啟動頁修改透明標題欄、開發環境啟動指定頁面，設定底部tab選項卡和圖示文字等，都是通過修改這個檔案實現的。
• vuex：專為 Vue.js 應用程式開發的狀態管理模式。因為專案模擬了使用者登入的過程，所以採用vuex管理使用者登入狀態，並將使用者資訊，包括頭像、暱稱、賬號等資訊儲存起來。
• uni.setStorageSync：將 data 儲存在本地快取中指定的 key 中。因為vuex不是持久化的狀態，一點使用者關掉程式，然後再次啟動程式，就會丟失掉使用者資訊。這裡我想到的解決辦法就是使用storage，將使用者資訊儲存在本地快取中。
• uni.reLaunch(OBJECT)：關閉所有頁面，開啟到應用內的某個頁面。這個介面的主要區別就是關掉當前所有頁面，然後新開啟一個頁面。與uni.navigateTo(OBJECT)不同。navigateTo介面是在當前頁面開啟新的頁面。
• 使用程式碼塊直接建立元件模板：在Hbulider X中，內建了很多的程式碼塊，靈活使用程式碼塊可以提高不少開發效率。
• 使用 Chrome 除錯：最新版本的HbuliderX已經可以開發H5程式了。並且可以在Chrome中除錯程式，感覺比在微信開發者工具中除錯更舒服。
• onPullDownRefresh：監聽頁面使用者下拉重新整理事件。因為我沒有想明白該怎樣實現微信聊天功能的，訊息實時同步的過程，所以暫時讓使用者手動重新整理獲取最新訊息。體驗並不好~ :-( 
• index-list：在hello uniapp中，有這個例子，參考使用即可做出類似微信通訊錄的頁面。
• qrcode二維碼：參考這個頁面內容，可以生成二維碼。
• scan掃描二維碼：參考這個例子可以實現掃描二維碼。

知識點大概就這麼多，剩下的都是具體的細節，看程式碼或者官方手冊即可。

修復的bug問題

• 註冊頁面文字兩端對齊bug。本來以為跟瀏覽器中一樣，使用轉義字元就能解決，專案中使用了 ，但是發現在某些安卓機中，會失效。所以改成了css實現兩端對齊。使用css3 justify-content實現。
• 啟動頁跳過按鈕失效。啟動頁計劃是不顯示導航欄的，為了跳過啟動頁，添加了一個跳過按鈕。但是我沒有考慮到導航欄的高度。因為我本來以為這個導航欄已經被隱藏了，其實不然，這個導航欄一直存在，只不過變成了透明而已。如果這個跳過按鈕位置是在導航欄上，會導致按鈕失效。通過查詢論壇文件，找到了這個導航欄高度【示例】原生標題欄titleNView使用說明，是固定高度44px。

原文地址：https://segmentfault.com/a/1190000017168549