這個項目做得比較早，當時是基於ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設置頁。同時還模仿知乎做了一個側邊欄頁(賬號：wty，密碼：123456)。 沒有後臺，純前 ...
這個項目做得比較早，當時是基於ionic1和angular1做的。做了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿一般手機的表單設置頁。同時還模仿知乎做了一個側邊欄頁(賬號：wty，密碼：123456)。
沒有後臺，純前端展示，功能還比較多，調用系統的聲音、震動和手機設備信息等。有二維碼掃描功能，還做了類似qq消息可拖拽效果，上拉下拉刷新，輪播圖組件。
一、基本概念
1. Angularjs簡介
Angularjs是一款優秀的前端 JS 框架，已用於 Google 的多款產品當中 如 Gmail、Maps、Calender 等。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義標簽、依賴註入，等等。
2. Ionic簡介
Ionic是一個強大的 HTML5 應用程式開發框架，具有速度快，界面現代化、美觀等特點。特別適合用於基於 Hybird 模式的 HTML5 移動應用程式開發。
3. Phonegap簡介
Phonegap是一個用基於 HTML， CSS 和 JavaScript 的，創建移動跨平臺移動應用程式的
快速開發平臺。它使開發者能夠手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap 擁有豐富的插件，可以調用。
二、項目各tab主要功能介紹
1. 初始化配置
- 手機上app顯示的圖標、名稱、開機畫面
- 註入依賴
- 隱藏顯示鍵盤
- hammer觸屏手勢插件配置
- 菜單欄的位置、導航條文字位置、回退按鈕圖標等
- 切換頁面的過渡效果（bug）
- AngularUI Router
- services服務
2. tab-home
- 幻燈指令 ion-slide-box
- 觸屏手勢切換頁面
- 柵格系統
- 觸屏手勢touch-bases和hammerjs
- ng-init、ng-click、 ng-src、 ng-repeat指令，雙向數據綁定
- 打開app內置的瀏覽器webview方法
- 上拉刷新
3. tab-dash
- phonegap功能的應用：二維碼掃描、調用系統彈窗、震動鈴聲功能、獲取設備信息
- ion-side-menus側邊欄功能
- ionic 動態組件 $ionicModal彈出登錄界面
- ng-show、ng-model 雙向數據綁定實現登錄驗證的實時監控
- ionic 動態組件 $ionicPopup彈出註銷界面
- 更換頭像（訪問手機攝像頭、圖庫功能）
- 切換主題顏色
4. tab-chats
- 刪除按鈕和重新排序按鈕
- 下拉刷新
- 滑動顯示分享編輯按鈕
- 長按顯示動態組件$ionicActionSheet選項
- 紅色消息badge
5. tab-account
- ionic的表單應用
- “聲音”選項被選中播放鈴聲
- “震動”選項被選中開始震動
- 實現全選、全不選、反選的功能
- ionic動態組件$ionicPopup
- 根據被選擇數顯示相應彈窗內容
三、演示如下：
四、總 結
優點： 通過使用 web 技術開發 App，採用 Cordova/PhoneGap之類進行打包封裝。優點是採用標準的web技術開發，避免了不同平臺原生開發體系的學習，學習成本低， 上手快、 效率高，一次開發微信 wap app 全部搞定；
缺點：app 在 android 平臺性能上有一些損失， 但是相信硬體的發展會接近原生。
