AngularJS全棧工程獅進階

前言      

      學習了一段時間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。”

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

            

      自己想到了三種方法:

    1.頁面重新整理

      頁面重新整理語句如下:$state.go("tab.bill_check", {}, { reload: true });

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

      回到頁面頂部:<a href="javascript:scrollTo(0,0);">返回頂部</a>

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

      有時實踐是最好的老師，進過測試，第一種想法斃掉。第二種想法斃掉。繼續嘗試第三種想法。

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

      實踐表明Ionic無法做到監聽軟鍵盤消失按鈕，其它按鈕均可以監聽到，為什麼呢?也無法判斷軟鍵盤消失。至此問題擱置於此....

學習一隅

美文美圖