AngularJS + Ionic 開發移動端 Hybrid 項目實戰總結

一、前言

學習了一段時間AngularJS后，開始接觸移動端APP開發。為了響應公司開發需求，采用“Hybrid”混血開發方法。采用Ionic作為前端框架，對于小白來說，得一點一點的前進。

Ionic和AngularJS的完美融合，可以說是AngularJS的移動端解決方案(正如蒸蒸日上的React Native 是React的移動端解決方案一樣。只不過為Facebook所屬)，它的核心架構也是為開發專業應用創建的。

開發原生應用的好處在于用戶體驗好，缺點在于開發周期長、投入大。隨著技術的改進，一條捷徑應運而生。在移動開發領域，Hybrid架構正風靡一時。作為原生應用與Web應用的混血兒，簡單點說就是利用原生代碼做個殼，內部其實是個Web應用。

所謂‘殼’，其實就是一個瀏覽器內核，它負責加載頁面，并且通過一個統一的接口，將一些手機操作系統中的功能導出給Web應用，使Web應用也能實現原生應用的功能。這種方式的最大優點就是實現跨平臺，無論是Android、IOS還是手機瀏覽器，都可以使用同一套頁面、同一套JS和CSS。 對于公司，采用Hybrid架構意味著人才的專業化、人力成本的降低、開發周期的縮短。對于個人，采用Hybrid架構意味著技能的復用、職業空間的擴展。從原理上講，Hybrid架構無法趕上原生應用的效果，所以必須在效果、開發周期、人力成本之間做出權衡。隨著硬件性能越來越高，對于大多數應用來說，Hybrid已然足夠。以微信為例，主體功能通訊為原生，而開放給第三方的接口例如公眾號API，則為Web應用。更不必說各種網站的客戶端了，幾乎均為Hybrid。

二、問題分析

2.1 切換頁面返回頂部

個人推崇項目驅動學習方法，先上個問題:切換頁面時，如何回到之前頁面的頂部？如下圖一所示，現實是殘酷的，實際的情形如下圖二所示。

自己想到了三種解決方法:

1. 頁面刷新

頁面刷新語句如下:

$state.go("tab.bill_check",?{},?{?reload:?true?});

2. js語句實現回到頁面頂部。

回到頁面頂部:

返回頂部

3.由于頁面上移是由于軟鍵盤彈出造成的，軟鍵盤消失后頁面并未恢復原來形態。

實踐出真知，實踐是最好的老師，進過測試，第一、二種解決方案斃掉。繼續嘗試第三種想法。

首先需要實現當軟鍵盤歸位后頁面能夠回歸正常。那就需要實現監聽軟鍵盤按鍵了。

實踐表明Ionic無法做到監聽軟鍵盤消失按鈕，其它按鈕均可以監聽到，為什么呢?也無法判斷軟鍵盤消失。

2.2 路由問題分析

在查看藥品時，從藥品列表中可以通過點擊藥品列表獲取某一藥品詳情。提交訂單時，同樣可以查看藥品詳情。兩種情形下，從藥品詳情返回后，應分別返回至原來的頁面。如下圖所示。

現狀是第一次添加的藥品從提交訂單路由至訂單詳情，但卻不可以從藥品詳情返回至提交訂單頁面，而是返回到了藥品列表中，但是在第二次點擊后，卻可以正確返回至訂單提交頁面。

通過閱讀代碼發現并沒有手動添加返回路由的情況，返回的軌跡應該是Ionic內部實現的。但是兩次返回的路由卻不一致令人費解。反過來想想，最起碼問題是有規律可循的。所以問題還是應該可以得到解決的。

嘗試通過監聽返回鍵的方式進行，在相應的條件語句中加入監聽語句并進行判斷。返回鍵退出的代碼如下:

/*

Android返回鍵退出

*/

$scope.listenbackbutton = function() {

document.addEventListener(“plusready”, onPlusReady, false);

function onPlusReady() {

plus.key.addEventListener(“backbutton”, function() {

if (location.path() == '/tab/index') { if (plus.os.name == "Android") { ionicLoading.show({

template: “再次點擊返回鍵退出立馬送藥”

});

timeout(function() { ionicLoading.hide();

plus.key.removeEventListener(“backbutton”, function() {

});

return;

}, 1000);

plus.key.addEventListener(“backbutton”, function() {

localStorage.addrTag = ‘’;

localStorage.addrid = ‘’;

plus.runtime.quit();

});

} else {

outSet(“此平臺不支持直接退出程序，請按Home鍵切換應用”);

}

} else {

$ionicHistory.goBack();

}

});

}

}

$scope.listenbackbutton();

經過嘗試，發現問題。onPlusReady()?方法無法調用。即不可以正常調用擴展API。

三、學習一隅

Ionic官網：Cross-Platform Mobile App Development: Ionic Framework

Angular AngularJS Git

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。