【初探IONIC】不會Native可不可以開發APP？

範大腳腳發表於2017-11-23
APP
Hybrid技術流行已經有一段日子了，樓主的關注點也一直圍繞著移動端圍繞著Hybrid相關展開，Hybrid已經是大大提升開發效率的開發方式了，但是仍然需要至少一個IOS與Andriod，那麼可不可以只使用H5相關的知識就能做一個APP出來呢？答案是可以的。
什麼是cordova？
cordova為一移動開發框架，他讓我們可以僅僅專注前端程式碼，然後通過一個開發框架編譯形成一個可安裝的APP，因為前端程式碼的特性，所以這種APP是跨平臺的，可以最大程度的提升開發效率，因為只需要前端人員，其成本節約也是不可忽視的！
PS：很多時候一些朋友也會說到phoneGap，其實phoneGap就是指cordova
其實cordova與Hybrid是一致的，只不過Hybrid中的IOS和Andriod Webview容器是我們Native同事開發的，而cordova打包後的Webview容器是公司開發的，這裡所謂跨平臺，其實是有一個公司做出了這種平臺性產品做出了支撐。
這裡又會引出另一個問題，哪個好？
孰優孰劣得看應用場景，這個和是否使用外面提供的第三方的前端UI外掛是一致的，外面的外掛大而全，但是效能方面可能差點，自己做的話，定製化需要或者效能方面可能更好點，就目前情況來說，稍微有點實力的公司都會由自己的Native團隊做Hybrid Webview容器殼，一些創業團隊或者剛起步的移動團隊會使用Cordova試水。
PS：Cordova最適合的場景是前端接外包！！！
整個架構的話依舊跳不出這張圖，基礎應用使用H5開發，Native提供介面，互動會有一個phone gap bridge層。
IONIC
Ionic是一個基於Cordova的移動開發框架，他的一大優勢就是提供了很多UI，這樣對於開發者來說就比較省心了，其次Ionic使用的angularJS作為配套框架（強依賴），所以對於前端來說是很不錯的一個體驗。
當然，Ionic在一些Andriod機上表現不是很好，因為是內嵌資源，作為APP來說載入速度較快還無所謂，但是同一套程式碼如果要用做H5站點的話，angularJS的尺寸就是很大一個制約。
這裡做完了簡單介紹，我們還是簡單實踐一把，體驗下他的威力。
更多的學習教程：http://www.runoob.com/ionic/ionic-tutorial.html
簡單實踐
安裝Ionic
我們去git上下載原始檔（release中）：https://github.com/driftyco/ionic/tree/master/release
我們在目錄下新建一個demo資料夾，新增index.html：
複製程式碼
 1 <!doctype html>
 2 <html  ng-app=”ionicApp”>
 3 <head>
 4     <meta charset=”UTF-8″>
 5     <title>ionic demo</title>
 6     <link href=”../css/ionic.min.css” rel=”stylesheet” type=”text/css” />
 7     <script src=”../js/ionic.bundle.min.js” type=”text/javascript”></script>
 8     <script type=”text/javascript”>
 9         angular.module(`ionicApp`, [`ionic`]).controller(`MyCtrl`, function ($scope) {
10         });
11     </script>
12 </head>
13 <body ng-controller=”MyCtrl”>
14     <ion-header-bar class=”bar-positive”>
15     <h1 class=”title”>Hello World!</h1>
16     </ion-header-bar>
17     <ion-content>
18         <p>我的第一個 ionic 應用。</p>
19     </ion-content>
20 </body>
21 </html>
複製程式碼
從這裡可以看出Ionic幾個特點：
① 強依賴angularJS（前面說過了）
② body部分依賴於IScroll，至於IScroll會有什麼優勢與劣勢，我們在之前討論過：
http://www.cnblogs.com/yexiaochai/p/3762338.html
http://www.cnblogs.com/yexiaochai/p/3764503.html
③ 有自己一套UI體系
第一眼的感覺是：
① 該框架比較完善，開發效率必然很高
② 不能肯定是否適合客戶端產品，因為js與css尺寸皆很大
③ 視覺樣式比較固定，如果一個公司有自己的規範可能不太適合
④ 因為angular與IScroll固有的特點，做出來的應用可能體驗不會太好
Ionic安裝
上面我們在瀏覽器簡單感受了下Ionic，接下來我們需要將之放到移動裝置上執行，這裡的第一步是環境安裝。
進行這個操作前，得保證電腦具有Node環境，然後執行命令列：
npm install -g cordova ionic
然後我們隨便找一個目錄，建立我們第一個專案myAPP：
ionic start myApp tabs
這裡需要安裝Andriod開發環境，不然的話，下面幾個命令會報錯，如果有Andriod環境的話，就能成功執行了：
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
如果正常的話，技能彈出模擬器：
如果有心做Ionic應用，IOS&Andriod環境都是需要安裝的，可能還需要使用eclipse，這裡各位看看文件吧，這裡不多說。
結語
因為我這邊想要對Hybrid做更深入的瞭解，所以今天花了時間來簡單瞭解了下Ionic，也只是很簡單的瞭解，如果真的要生產應用各位可以去上面的網址認真學習吧，以我的經驗，有angular的基礎的話，學習週期在一週左右便可入坑開發了！！！
後面我們將更加深入的研究各大公司Hybrid一些實現，有興趣的朋友可以持續關注。
本文轉自葉小釵部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/p/5220979.html，如需轉載請自行聯絡原作者


相關文章