ionic+cordova 創建項目+打包


]

 

 

主要流程:

安裝node.js  -->  安裝jdk  -->  安裝AndroidSDK  -->  安裝cordova  -->  安裝ionic -->  創建項目  -->  編譯項目apk

一、安裝nodejs

百度網盤:鏈接:https://pan.baidu.com/s/1Xxfh2kv_2Wn9nbF5AX9NZQ  提取碼:turm  或   下載地址:https://nodejs.org/en/

 

查看nodejs版本:  node -v

查看npm版本:  npm -v

安裝淘寶鏡像 :  npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本:  cnpm -v

 

二、安裝jdk

百度網盤中已包含。或 下載地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html

下載8u111或8u112以上版本。安裝時建議安裝到C:\Java 目錄下。然后設置系統變量:

名稱:JAVA_HOME,值(根據你的安裝路徑改): C:\Java\jdk1.8.0_101

Path中添加 %JAVA_HOME%\bin

查看版本:  java -version

三、安裝sdk

右鍵X解壓

重命名為sdk

跟jdk放在一個父目錄,便於查找。C:\Program Files\sdk

 

配置環境變量

計算機——右鍵屬性——-高級系統設置——-環境變量

 網盤中已包含。

在系統變量中新建:

  變量名:ANDROID_HOME

  變量值:C:\Program Files\sdk

 

在Path變量中將

  ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

  添加到變量值最后(注意前面有分號)

檢查配置是否正確: 

     android -h

執行命令就代表安裝無誤。

SDK Manager.exe工具

打開界面上的Tools,選擇options,先配置國內鏡像:

域名千萬不要輸入http或者https協議前綴

  mirrors.neusoft.edu.cn

回到主界面,點packages再點reload

按照下面圖片進行勾選:

 

 

點右下角 install packages 來安裝,耐心等待即可。

在打包時可能會出現如下錯誤:

 

打開SDK Manager.exe繼續安裝你所需要的平台。圈起來的27與報錯圖片中的27對應,如果出現其他的錯誤,下載對應的平台就可以了。

 

四、安裝cordova

輸入以下命令安裝 Cordova

npm install -g cordova 

看一下版本號:

C:\Users\yxd>cordova -version 6.3.1

五、安裝ionic

輸入以下命令安裝 Ionic (如果剛才設置了淘寶鏡像源,可以使用 cnpm 代替 npm):

npm install -g ionic

需要注意的是,如果之前安裝過 Ionic 2 的 beta 版本,需要先卸載掉:

npm uninstall -g ionic 

然后重新安裝。

安裝完成后輸入以下命令看一下版本號:

C:\Users\yxd>ionic -version 2.1.0 

目前最新版本是2.1.0。如果是 beta 版本的話,請重新安裝,確保安裝最新版。

六、創建ionic項目

搜索node,點開紅框內的node.js command prompt ,不是下面的那個node.js

 

cd到要放置app的目錄下,執行:

  ionic start myapp tabs

解釋:

  myapp:項目名稱(自定義)

  tabs:ionic模板,還有blank

還有其他模板可以自己選擇,執行 ionic start myapp  下載需要時間,請耐心等待。

 

創建完成之后,cd到app目錄運行項目

執行:  ionic serve 啟動

瀏覽器地址欄:localhost:8100預覽項目

七、添加平台

cd 到app目錄下,執行  ionic cordova platform add android

 

添加完平台后app目錄下會多了一個 platforms 文件夾

 

八、下載gradle插件

 

打開:http://services.gradle.org/distributions/  選擇 gradle-2.14.1-all.zip   或者 百度網盤中包含該插件,可直接下載;

下載完不用解壓,直接拷貝到項目文件下的這個文件下:

注意:新項目沒有gradle這個文件夾,需要新建一個,文件名不要寫錯。

將下載壓縮包加壓到其他文件夾內,需要配置環境變量   path:  D:\Program Files\gradle\gradle-2.14.1\bin,根據你文件位置配置,如果不會不會百度。

修改配置:

找到下面路徑下的 GradleBuilder.js文件

用代碼編輯器打開 GradleBuilder.js:

將:    'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'    改為:  '../gradle/gradle-2.14.1-all.zip'

 

保存關閉。

九、打包

cd到app目錄下,執行:  ionic cordova build android

 

 打的apk包在畫紅線那個路徑下面。將apk文件發送到手機就可以安裝了

 

 

 

參考:https://yanxiaodi.gitbooks.io/ionic2-guide/content/tutorial;該地址有時刷新不出來,需要要多少試幾次。

   https://www.cnblogs.com/chenglu/p/8608121.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM