天天看點

ionic開發介紹之環境搭建開發環境搭建

開發環境搭建

安裝Node.Js。用于安裝各種開發工具做準備;

安裝ionic構架和cordova庫,這裡分開安裝ionic和cordova是因為牆的不穩定的影響,通常不能一步就安裝成功。是以建議分開安裝,對于牆來說對于技術網站其實不太屏蔽,在情況好的情況下不影響正常安裝。當然如果你安裝的時候确實遇到了困難,可以考慮淘寶的npm伺服器或者翻過這堵牆。對于應用程式員來說這是基本技能。本文章所描述的步驟都是在Windows作業系統下完成。本人體驗實際安裝中ionic不太容易成功。經驗:下載下傳過程比較難受,有時候指令行一點都不動,不知道實事上還在下載下傳沒有,這時候可以打開“任務管理器”選擇“性能”然後點選下方的“資料總管”檢視“網絡”頁籤裡面的網絡通路情況,其中node的那一行就是node下載下傳的速度,從接收速度可以看到下載下傳的情況,若果指令在執行,但在此處沒有看到有node的那一行說明下載下傳失敗了。總是失敗就該考慮牆的問題了。(搭建安裝環境簡直就是煎熬,尤其第一次,無從下手,對于牆如果感覺無從下手,或者不想折騰,建議開始花錢買一個vpn,任何事物存在都是有原因的)

安裝ionic構架

打開指令行執行:

npm install –g ionic            //其中-g代表安裝ionic到計算機系統,而不是僅僅給目前目錄的項目

安裝cordova庫

npm install –g cordova        //其中-g代表安裝ionic到計算機系統,而不是僅僅給目前目錄的項目

接下來就要利用安裝好的開發環境開發ionic項目,注意執行一下指令請在管理者權限打開指令行來執行。

建立一個名字叫做demo的項目

ionic start demo

運作以上指令就會在指令執行目錄建立一個demo的工程檔案夾,指令會下載下傳一個工程模闆。下載下傳的時候容易費勁,按本文開頭的介紹解決問題,多試幾遍。成功後提示如下:

ionic開發介紹之環境搭建開發環境搭建

此時運作指令 cd demo 切換到生成的工作目錄,然後執行指令:ionic serve 即可在浏覽器檢視ionic app的效果。

ionic開發介紹之環境搭建開發環境搭建

此時項目目錄包括一下圖的檔案

ionic開發介紹之環境搭建開發環境搭建

如果你之後大算運作此程式在Android後iOS的時候,你需準備好要其各自平台的開發環境,本人是使用與Android的開發環境,需要準備Java,Apache Ant,Android SDK 并且在Windows環境變量裡分别設定路徑。具體執行性參考其他作者的文章。

在Android開發環境準備好的情況下,即可執行如下指令來加入Android開發平台。

ionic platform add android  

然後編譯Android平台下測的demo的項目,運作如下指令:

Ionic build android 編譯生産apk檔案

然後執行 下載下傳指令在手機上運作

ionic run android

或者執行仿真指令在Android虛拟機上安裝并運作程式

ionic emulate android

增加後Android平台後項目檔案夾下多了plagforms檔案夾

ionic開發介紹之環境搭建開發環境搭建

在整個開發環境搭建中或由于各種原因引起各種問題,在實踐中多查找相關問題的部落格來解決問題。