摘要：體驗(yàn)并不好在中，有這個(gè)例子，參考使用即可做出類似微信通訊錄的頁面。啟動(dòng)頁計(jì)劃是不顯示導(dǎo)航欄的，為了跳過啟動(dòng)頁，添加了一個(gè)跳過按鈕。

本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注

經(jīng)過上一篇文章uni-app官方教程學(xué)習(xí)手記的學(xué)習(xí)之后，我就著手做這個(gè)項(xiàng)目了。

目前已經(jīng)初步搭出了整體的框架，秉著取之于社會(huì)，回饋于社會(huì)的原則，我將這個(gè)項(xiàng)目開源到GitHub uni-shop，發(fā)展壯大uni-app社區(qū)。項(xiàng)目肯定有不足和考慮不周之處，歡迎大家指正并提出Issues。

因?yàn)檫@是個(gè)真實(shí)的項(xiàng)目，為了一名合格的程序員的職業(yè)操守，項(xiàng)目真實(shí)數(shù)據(jù)部分并不會(huì)開源。為了提高整體的流暢性和幫助自己開發(fā)，數(shù)據(jù)部分采用Easy Mock模擬的假數(shù)據(jù)。有需要的朋友可以自行修改接口。

這個(gè)項(xiàng)目就類似于一個(gè)微信，或者說模仿一個(gè)微信應(yīng)用。包括聊天、群聊、朋友圈等等。因?yàn)楸救怂接邢蓿捌谟?jì)劃只完成一對(duì)一兩人聊天功能，不包括其他功能。目前聊天的功能還沒有實(shí)現(xiàn)，因?yàn)槲也]有做過這方面的應(yīng)用。

另外就是這個(gè)項(xiàng)目設(shè)計(jì)的本身，本人也不知道完全仿照一個(gè)微信做的目的是什么？或者說申請(qǐng)應(yīng)用上架App Store時(shí)，是否合法？再或者是否對(duì)騰訊微信造成侵權(quán)？希望有知道的朋友，可以給我留言。

拋去這些困惑以外，單純對(duì)這個(gè)項(xiàng)目而言，通過這個(gè)過程，將自己原本不會(huì)的東西，通過一段時(shí)間的學(xué)習(xí)和實(shí)踐，最終實(shí)現(xiàn)了。我想，這才是一名程序員對(duì)程序的熱情吧~ 把不可能變成可能，把不會(huì)變成學(xué)會(huì)。

┌─components            uni-app組件目錄
│  └─comp-a.vue         可復(fù)用的a組件
├─hybrid                存放本地網(wǎng)頁的目錄
├─platforms             存放各平臺(tái)專用頁面的目
├─pages                 業(yè)務(wù)頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的地方，注意：靜態(tài)資源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 應(yīng)用生命周期
├─manifest.json         配置應(yīng)用名稱、appid、logo、版本等打包信息
└─pages.json            配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息
    

以上是一個(gè)uni-app工程包含的目錄及文件，可以通過目錄結(jié)構(gòu)查看詳細(xì)信息。

簡單羅列出項(xiàng)目中使用到的組件和相關(guān)技術(shù)，詳細(xì)信息查詢官方手冊(cè)即可。

pages.json：用來對(duì) uni-app 進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置多 tab 等。項(xiàng)目中包括修改標(biāo)題文本、啟動(dòng)頁修改透明標(biāo)題欄、開發(fā)環(huán)境啟動(dòng)指定頁面，設(shè)置底部tab選項(xiàng)卡和圖標(biāo)文字等，都是通過修改這個(gè)文件實(shí)現(xiàn)的。

vuex：專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。因?yàn)轫?xiàng)目模擬了用戶登錄的過程，所以采用vuex管理用戶登錄狀態(tài)，并將用戶信息，包括頭像、昵稱、賬號(hào)等信息存儲(chǔ)起來。

uni.setStorageSync：將 data 存儲(chǔ)在本地緩存中指定的 key 中。因?yàn)関uex不是持久化的狀態(tài)，一點(diǎn)用戶關(guān)掉程序，然后再次啟動(dòng)程序，就會(huì)丟失掉用戶信息。這里我想到的解決辦法就是使用storage，將用戶信息保存在本地緩存中。

uni.reLaunch(OBJECT)：關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個(gè)頁面。這個(gè)接口的主要區(qū)別就是關(guān)掉當(dāng)前所有頁面，然后新打開一個(gè)頁面。與uni.navigateTo(OBJECT)不同。navigateTo接口是在當(dāng)前頁面打開新的頁面。

使用代碼塊直接創(chuàng)建組件模板：在Hbulider X中，內(nèi)置了很多的代碼塊，靈活使用代碼塊可以提高不少開發(fā)效率。

使用 Chrome 調(diào)試：最新版本的HbuliderX已經(jīng)可以開發(fā)H5程序了。并且可以在Chrome中調(diào)試程序，感覺比在微信開發(fā)者工具中調(diào)試更舒服。

onPullDownRefresh：監(jiān)聽頁面用戶下拉刷新事件。因?yàn)槲覜]有想明白該怎樣實(shí)現(xiàn)微信聊天功能的，消息實(shí)時(shí)同步的過程，所以暫時(shí)讓用戶手動(dòng)刷新獲取最新消息。體驗(yàn)并不好~ :-(?

index-list：在hello uniapp中，有這個(gè)例子，參考使用即可做出類似微信通訊錄的頁面。

qrcode二維碼：參考這個(gè)頁面內(nèi)容，可以生成二維碼。

scan掃描二維碼：參考這個(gè)例子可以實(shí)現(xiàn)掃描二維碼。

知識(shí)點(diǎn)大概就這么多，剩下的都是具體的細(xì)節(jié)，看代碼或者官方手冊(cè)即可。

注冊(cè)頁面文字兩端對(duì)齊bug。本來以為跟瀏覽器中一樣，使用轉(zhuǎn)義字符就能解決，項(xiàng)目中使用了 ，但是發(fā)現(xiàn)在某些安卓機(jī)中，會(huì)失效。所以改成了css實(shí)現(xiàn)兩端對(duì)齊。使用css3 justify-content實(shí)現(xiàn)。

啟動(dòng)頁跳過按鈕失效。啟動(dòng)頁計(jì)劃是不顯示導(dǎo)航欄的，為了跳過啟動(dòng)頁，添加了一個(gè)跳過按鈕。但是我沒有考慮到導(dǎo)航欄的高度。因?yàn)槲冶緛硪詾檫@個(gè)導(dǎo)航欄已經(jīng)被隱藏了，其實(shí)不然，這個(gè)導(dǎo)航欄一直存在，只不過變成了透明而已。如果這個(gè)跳過按鈕位置是在導(dǎo)航欄上，會(huì)導(dǎo)致按鈕失效。通過查找論壇文檔，找到了這個(gè)導(dǎo)航欄高度【示例】原生標(biāo)題欄titleNView使用說明，是固定高度44px。