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

時間 2019-11-05

標籤初探IONIC 不會 native 可不能夠開發 app 简体版

原文原文鏈接

前言

Hybrid技術流行已經有一段日子了，樓主的關注點也一直圍繞着移動端圍繞着Hybrid相關展開，Hybrid已是大大提高開發效率的開發方式了，可是仍然須要至少一個IOS與Andriod，那麼可不能夠只使用H5相關的知識就能作一個APP出來呢？答案是能夠的。javascript

什麼是cordova？

cordova爲一移動開發框架，他讓咱們能夠僅僅專一前端代碼，而後經過一個開發框架編譯造成一個可安裝的APP，由於前端代碼的特性，因此這種APP是跨平臺的，能夠最大程度的提高開發效率，由於只須要前端人員，其成本節約也是不可忽視的！css

PS：不少時候一些朋友也會說到phoneGap，其實phoneGap就是指cordovahtml

其實cordova與Hybrid是一致的，只不過Hybrid中的IOS和Andriod Webview容器是咱們Native同事開發的，而cordova打包後的Webview容器是公司開發的，這裏所謂跨平臺，實際上是有一個公司作出了這種平臺性產品作出了支撐。前端

這裏又會引出另外一個問題，哪一個好？java

孰優孰劣得看應用場景，這個和是否使用外面提供的第三方的前端UI插件是一致的，外面的插件大而全，可是性能方面可能差點，本身作的話，定製化須要或者性能方面可能更好點，就目前狀況來講，稍微有點實力的公司都會由本身的Native團隊作Hybrid Webview容器殼，一些創業團隊或者剛起步的移動團隊會使用Cordova試水。android

PS：Cordova最適合的場景是前端接外包！！！git

整個架構的話依舊跳不出這張圖，基礎應用使用H5開發，Native提供接口，交互會有一個phone gap bridge層。github

IONIC

Ionic是一個基於Cordova的移動開發框架，他的一大優點就是提供了不少UI，這樣對於開發者來講就比較省心了，其次Ionic使用的angularJS做爲配套框架（強依賴），因此對於前端來講是很不錯的一個體驗。npm

固然，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一些實現，有興趣的朋友能夠持續關注。

文中只是我的觀點，有誤的話請各位指正，不足請各位提出。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。