摘要：體驗并不好在中，有這個例子，參考使用即可做出類似微信通訊錄的頁面。啟動頁計劃是不顯示導航欄的，為了跳過啟動頁，添加了一個跳過按鈕。

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

經過上一篇文章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。本來以為跟瀏覽器中一樣，使用轉義字符就能解決，項目中使用了 ，但是發現在某些安卓機中，會失效。所以改成了css實現兩端對齊。使用css3 justify-content實現。

啟動頁跳過按鈕失效。啟動頁計劃是不顯示導航欄的，為了跳過啟動頁，添加了一個跳過按鈕。但是我沒有考慮到導航欄的高度。因為我本來以為這個導航欄已經被隱藏了，其實不然，這個導航欄一直存在，只不過變成了透明而已。如果這個跳過按鈕位置是在導航欄上，會導致按鈕失效。通過查找論壇文檔，找到了這個導航欄高度【示例】原生標題欄titleNView使用說明，是固定高度44px。