IONIC安裝部署入門教程

         這周笨小蔥接收到了一個項目任務,用ionic+angularJS寫一個hybrid應用程序(也就是native+html混合移動應用)。初次接觸andriod還是大三時候的事了吧,當時用google的手勢識別類庫寫了個手勢識別應用,之後就是寫手遊的時候涉及到了移動端開發。對於這兩個新技術還是第一次聽說。下面就讓我們來,一步一步的將一個移動應用demo跑起來。(笨小蔥這裏是在windows操作系統上進行的)

            

         ionic是一個專注於用WEB開發技術,基於HTML5創建類似於手機平臺原生應用的一個開發框架。綁定了AngularJS和Sass。這個框架的目的是從web的角度開發手機應用,基於PhoneGap的編譯平臺,可以實現編譯成各個平臺的應用程序。
          ionic的開發添加androidios環境。
          ionic提供很多css組件和javascript UI庫。
          ionic可以支持定製android和ios的插件,也支持服務端REST的敏捷開發


安裝部署


        1.要安裝ionic首先你得需要安裝Node.js,簡單的說 Node.js 就是運行在服務端的 JavaScript。

             Node.js 是一個基於Chrome JavaScript 運行時建立的一個平臺。

             Node.js是一個事件驅動I/O服務端JavaScript環境,基於Google的V8引擎,V8引擎執行Javascript的速度非常快性能非常好。

             Node.js官網:https://nodejs.org/en/                       (下載之後雙擊安裝就ok了)


             (PS:安裝之後cmd中使用node -v和npm -v來測試是否安裝成功)


         2.下面需要通過Node.js中集成的NPM工具來下載cordovaionic

                 Cordova是驅動PhoneGap的核心引擎

             Cordova提供了一組設備相關的API,通過這組API,移動應用能夠以JavaScript訪問原生的設備功能,如攝像頭、麥克風等。
             Cordova還提供了一組統一的JavaScript類庫,以及爲這些類庫所用的設備相關的原生後臺代碼。
             Cordova支持如下移動操作系統:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada...

     cmd中執行命令下載:
 npm install -g cordova ionic
(PS:這裏很沒有翻牆很可能下載不了或者很慢,這裏可以配置淘寶鏡像:
<span style="white-space:pre">	</span>npm config set registry https://registry.npm.taobao.org 
	npm info underscore (如果上面配置正確這個命令會有字符串response)

好啦,下載完成後執行:cordova -v 和 ionic -v來查看一下版本,有版本號就說明安裝成功了。
 
	下面可以創建ionic應用啦:

創建應用

使用ionic官方提供的現成的應用程序模板,或一個空白的項目創建一個ionic應用:

 ionic start myApp tabs
創建完成後,會在當前目錄下生成一個myApp的項目文件。進入myApp文件夾:
 cd myApp
 ionic serve   //這個命令會起一個web容器,將myApp發佈到web容器中.會自動打開網站訪問地址的
到這裏第一個ionic應用就搞定了。這裏只有web項目。下面是如何將其打成apk,安裝到android手機上。ios笨小蔥還沒試過。

打包成apk

首先打包apk肯定需要配置java_home和android_home。
1.下載jdk1.7以上的版本。配置對應的JAVA_HOME(這裏學過java的都會,不多說了)
2.下載android sdk,不同的ionic版本對於android api的版本要求不一樣,現在的最新版本要api22,這裏笨小蔥分享一個包含api22的。
配置環境變量ADNROID_HOME = E:\android\adt-bundle-windows-x86_64-20140321\sdk
然後在Path中配置: %ADNROID_HOME%\tools;
( 配置完成後,執行java -version 和android -v 不報錯說明安裝成功。)
這裏android開發環境已經配置完成了。就可以使用ionic打包成apk啦.
cd myApp
ionic build android  //編譯生成apk,存儲在\myApp\platforms\android\build\outputs\apk目錄下的android-debug.apk
ionic emulate android //啓動android模擬器運行myApp





發佈了35 篇原創文章 · 獲贊 15 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章