uni-app 建立的第一個應用

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

背景介紹

通過上一篇文章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。

原文地址：http://www.javashuo.com/article/p-sdqcitjf-bn.html