1. 程式人生 > >混合開發(Hybrid App)之 Ionic【一】-- 認識Ionic,搭建開發環境,建立專案

混合開發(Hybrid App)之 Ionic【一】-- 認識Ionic,搭建開發環境,建立專案

寫在前面

目前市面存在的移動開發方式有原生應用、混合應用、原生應用三種,對於這種方式可以做以下對比。

    

認識ionic

ionic 是一個用來開發混合手機應用的,開源的,免費的程式碼庫,具有以下特點。

1.ionic 基於Angular語法,簡單易學。
2.ionic 是一個輕量級框架。
3.ionic 完美的融合下一代移動框架,支援 Angularjs 的特性, MVVM ,程式碼易維護。
4.ionic 提供了漂亮的設計,通過 SASS 構建應用程式,它提供了很多 UI 元件來幫助開發者開發強大的應用。
5.ionic 專注原生,讓你看不出混合應用和原生的區別
6.ionic 提供了強大的命令列工具。

7.ionic 效能優越,執行速度快。

安裝 ionic 

step1.安裝node.js 

建議安裝最新版本,下載地址:https://nodejs.org/en/  ,下載安裝完成後,會預設包含 npm 包,可使用終端命令

node -v
npm -v
檢視 node 和 npm 的版本

step2.安裝 ionic 前的準備

由於牆的原因,在之前的基礎上直接安裝 ionic ,一般會報錯,可以採用下面的方法解決。

1.使用淘寶映象和cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

以後所有的npm可用cnpm代替

,如: cnpm install ionic

step3. 安裝 ionic 和 cordova

cnpm install -g ionic cordova

安裝好可以用 命令  “ionic -v” 檢視 ionic 版本(截止現在的版本為 2.1.13)

新建專案

1.進入要存放新建專案的目錄

cd desktop

2.新建專案

使用命令 ionic start<project-name> <optional-template>

<project-name>:專案名,<optional-template>:可選模板(sidemenu:側滑、tabs:底部tab切換、blank :空白。不寫預設為 tabs 預設

ionic start myApp --v2

注意:如果不使用--v2,那麼將按照ionic1的版本建立使用,同時也使用Angular1

3.進入專案

cd myApp
4.增加平臺支援

iOS:

ionic platform add ios 
android:
ionic platform add android
執行專案

1.使用命令執行

ionic build ios
ionic emulate ios #會開啟ios的模擬器
ionic run andoird #真機測試,需要先platform add andoird和build android
ionic serve #也可以先在瀏覽器裡看效果,如果chrome安裝了livereload外掛,可以實現程式碼編輯時介面即時變化

2.直接編輯iOS或Android工程

可以直接用xcode或其他IDE來編輯 /platforms/xxxx/ 下的工程,但要注意的是,應該以專案根目錄下的 /www/ 檔案為主,而不要編輯/platforms/ios/www/ 裡的檔案。 執行下面的命令會自動用 /www/ 覆蓋 /platforms/ios/www 裡的檔案

cordova prepare ios

圖:檔案目錄

釋出應用 在生成之前,去掉不需要的外掛

cordova plugin rm org.apache.cordova.console 

參考文章: