1. 程式人生 > >ionic +cordova環境搭建

ionic +cordova環境搭建

    因為自己主要研究的是angularjs這個框架,為了更好的發揮它的使用,也為了讓自己更好的依賴angular,所以在選擇webapp上我選擇了ionic(cordova+angualr+ionic css) ,實際上它是依託angularjs的一個ui庫。關鍵的是cordova可以提供javascript呼叫native功能,ionic封裝了angular

 一、ionic環境的配置,

 在環境的配置上 ionic-china 上已經講的很清楚,但是太於簡單了,理想下的情況是會一步到底的,我在安裝上遇到了一些問題,網上看的雜七雜八的,害的我裝了又卸,都沒有說出一些關鍵的問題,由於今天完成了一個tabs模板的apk打包,就總結一下,安裝過程。

  1.jdk的安裝

 jdk 1.8.0 (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
        安裝好之後環境變數配置:
         新建系統變數JAVA_HOME 和CLASSPATH 
         變數名:JAVA_HOME 
         變數值:C:Program FilesJavajdk1.8.0
         變數名:CLASSPATH 
         變數值:.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar;
        變數名:Path 
        變數值:%JAVA_HOME%bin;%JAVA_HOME%jrebin;

2.android sdk(http://dl.google.com/android/installer_r24.3.4-windows.exe)

     新建變數名               變數值 
    ANDROID_HOME     D:\webapp\androidsdk(你sdk的路徑)
    然後在path裡新增(注意前面的分號)   
   ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools(ps:在ionic-china裡有詳細的sdk配置)

   在sdk工具裡只需要勾選3個Android SDK Platform-tools、Android SDK Build-tools、API2+下的SDK Platform 


3 cordova 和ionic 安裝

 把npm換成淘寶的cnpm

 cnpm install -g cordova ionic  (解除安裝為npm install -g ionic)

 不過這裡需要注意下cordova 還是安裝低版本的吧cnpm install -g [email protected],

 我問題就出在這裡,這裡要感謝一下這篇文章(https://www.2cto.com/kf/201710/689801.html)看到與可能版本有問題,我就試著裝了6.0.0的cordova 發現以前會一直停在npm i running command 上


現在成功就入git這步,

在ionic cordova platform add android上會出現


 我選擇了no 不然還是要等很久或者不成功 ,當時想到我下了sdk 在在安裝就是多餘的,就選了no ,就成功了。

 二.下面是一些命令

npm install -g cnpm --registry=https://registry.npm.taobao.org(npm映象源指向淘寶) 
cnpm install -g cordova ionic(安裝cordova ionic) 
cnpm update -g cordova ionic(更新cordova ionic) 
ionic -help(檢視幫助) 
ionic -v(檢視版本) 

ionic start myApp blank(空專案) 
ionic start myApp tabs(帶導航條) 
ionic start myApp sidemenu(帶側滑選單) 

ionic  cordova platform add android(新增android平臺) 
ionic  cordova platform remove android(移除android平臺) 
ionic cordova  build android(編譯專案apk) 
ionic  cordova emulate android(執行專案apk 手機連線在手機執行 模擬器連線在模擬器執行) 
ionic run android (相當於build + emulate) 
ionic serve(開啟服務除錯) 

在進入ionic cordova build 上花了好多時間,等了很久就成功了,ionic cordova build android(第一次編譯要下載gradle-2.2.1-all.zip和jar 如果gradle-2.2.1-all.zip下載太慢看了別人(http://blog.csdn.net/zsmurf/article/details/51151819)直接下載個gradle-2.2.1-all.zip(http://services.gradle.org/distributions/gradle-2.2.1-all.zip) 放到C:\Users\Administrator\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b 下不用解壓,不用慢慢的等了,

就可以打包成apk,我在手機上安裝了能執行。

 網上講了很多大多是為了讓專案在模擬器下執行,就配了一些雜七雜八的東西,後面我也會遇到

 現在就可以開啟我的ionic的征途了

(2017.12.3 早上,在自己的筆記本試了,發現不是cordova的版本問題,在npm i 停很久報錯,可以繞開這裡,通過ionic start myapp tabs  --no-deps,意思不先安裝npm packages  ,成功之後在cd myapp 執行cnpm install --save,就可以成功了)