一個基於Angular+Ionic+Phonegap的混合APP實戰

這個項目作得比較早，當時是基於ionic1和angular1作的。作了四個tabs的app，首頁模仿攜程首頁，第二頁主要是phonegap調用手機核心功能，第三頁模仿微信和qq聊天頁，第四頁模仿通常手機的表單設置頁。同時還模仿知乎作了一個側邊欄頁(帳號：wty，密碼：123456)。

沒有後臺，純前端展現，功能還比較多，調用系統的聲音、震動和手機設備信息等。有二維碼掃描功能，還作了相似qq消息可拖拽效果，上拉下拉刷新，輪播圖組件。

安卓apk下載

安卓apk下載二維碼

線上地址

1、基本概念

1. Angularjs簡介

Angularjs是一款優秀的前端 JS 框架，已用於 Google 的多款產品當中 如 Gmail、Maps、Calender 等。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義標籤、依賴注入，等等。

2. Ionic簡介

Ionic是一個強大的 HTML5 應用程序開發框架，具備速度快，界面現代化、美觀等特色。特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。

3. Phonegap簡介

Phonegap是一個用基於 HTML， CSS 和 JavaScript 的，建立移動跨平臺移動應用程序的 快速開發平臺。它使開發者可以手機的核心功能——包括地理定位，加速器，聯繫人，聲音和振動等，此外PhoneGap 擁有豐富的插件，能夠調用。

2、項目各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
• 根據被選擇數顯示相應彈窗內容

3、演示以下：

ionic實戰動態圖演示

4、總 結

優勢： 經過使用 web 技術開發 App，採用 Cordova/PhoneGap之類進行打包封裝。優勢是採用標準的web技術開發，避免了不一樣平臺原生開發體系的學習，學習成本低， 上手快、 效率高，一次開發微信 wap app 所有搞定；

缺點：app 在 android 平臺性能上有一些損失， 可是相信硬件的發展會接近原生。

歡迎你們star學習交流：github地址 | 個人博客

參考文獻

1. PhoneGap3.4安裝視頻教程下載
2. Angular1官網
3. Angular中文社區
4. AngularJS Nice Things
5. phonegap 中文網
6. ionic官網