Java環(huán)境配置

1 安裝jdk

1.1 官網(wǎng)下載jdk安裝包進(jìn)行安裝

Java SE Development Kit 8 Downloads

1.2 或者找到j(luò)dk解壓包進(jìn)行安裝（推薦）

2 配置JAVA_HOME

環(huán)境變量

JAVA_HOME： [jdk路徑]?//不要存在中文或空格

path：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

CLASSPATH:?.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

Android 環(huán)境配置

1 下載 android studio (推薦 解壓包)

Android Studio 中文網(wǎng)

下載后解壓或安裝

2 下載 Android sdk?(推薦 解壓包)

Android SDK

下載后解壓或安裝?

3 配置ANDROID_HOME

環(huán)境變量

ANDROID_HOME： [android sdk 路徑]? //不要存在中文或空格

path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

4 配置GRADLE_HOME

Android環(huán)境在配置完第三步實際上已經(jīng)可以使用了，但是因為現(xiàn)在Android項目都是依賴gradle進(jìn)行package管理的，又因為長城原因，gradle在進(jìn)行聯(lián)網(wǎng)下載的時候是比較困難的，所以我們還需要配置一下gradle

gradle

選擇你需要的版本進(jìn)行下載解壓；

環(huán)境變量

GRADLE_HOME： [gradle 解壓目錄]?//不要存在中文或空格

path：?%GRADLE_HOME%\bin

安裝Node.js

1 下載安裝Node.js

node.js

雙擊進(jìn)行安裝

2 安裝Node.js的目的

使用Node.js的包管理（npm）安裝Cordova ionic 和ionic工程的依賴包

能夠起一個Node.js的服務(wù)，使ionic的調(diào)試更加便利

3 映射到淘寶鏡像

在國內(nèi)鏈接npm的服務(wù)器非常不穩(wěn)定，所以我們最好是配置一下國內(nèi)的鏡像。映射到淘寶鏡像的方式為：

打開 CMD，執(zhí)行以下命令

$ npm config set registry https://registry.npm.taobao.org

配置淘寶源（持久化）

執(zhí)行以下命令檢查registry配置是否成功

$ npm config list

安裝 Cordova 和 Ionic

1 Cordova 是干嘛的

Cordova 是時下最流行的h5頁面同手機(jī)原生系統(tǒng)進(jìn)行交互的解決方案

cordova官網(wǎng)

而且Cordova的官方插件庫中也提供有豐富的基礎(chǔ)插件

cordova插件庫

2 Ionic3又是啥

ionic3是一套App混合開發(fā)框架

3 安裝

cmd中執(zhí)行一下命令

// [i]? install的意思 [-g] 指全局安裝 [cordova / ionic] 安裝對象?

$ npm i -g cordova? ?

$ npm i -g ionic

安裝完成后執(zhí)行以下命令檢查

$ cordova -v

$ ionic -v

若均正常顯示版本號，則安裝成功

搭建ionic3 測試工程

1 了解ionic官網(wǎng)

ionic 官網(wǎng)首頁

ionic 開發(fā)文檔

2 創(chuàng)建工程

$ ionic start [<name>] [<template>] [options]

name： 項目名稱

template： 模板，可以是官方推薦模板，也可以是github上的自定義模板

? ? 常用官方模板有：

? ? ? ? blank ： 空白模板，只包含首頁

? ? ? ? tabs ：包含底邊導(dǎo)航欄的模板

? ? ? ? sidemenu ：包含策劃menu導(dǎo)航欄的模板

? ? ? ? super ：超級模板（基本功能都包含的模板）

options：參數(shù)

? ? 常用參數(shù)有：

? ? ? ? --type=ionic1 / ionic-angular 默認(rèn)是ionic-angular 也就是ionic3

? ? ? ? --cordova 指明是一個cordova項目

? ? ? ? --no-link 告訴ionic 不要再問我要不要連ionic的開發(fā)平臺，因為一般我們不會用到ionic開發(fā)平臺的功能

? ? ? ? --bundle-id=package-name 你的項目包名，唯一確定一個app

在你的資源管理器中創(chuàng)建工作空間目錄，控制臺中cd到你的工作空間目錄下，執(zhí)行上面一條命令。

等待命令執(zhí)行完成，3-5分鐘

3 項目預(yù)覽

項目創(chuàng)建完成后，首先需要cd到剛剛創(chuàng)建的項目目錄下

然后，我們可以簡單的通過執(zhí)行下面一條命令進(jìn)行項目預(yù)覽。

$ ionic serve

這條命令會在本地起一個node serve，然后將你的工程編譯到其中，你可以通過訪問 locahost:8100 進(jìn)行預(yù)覽。

只是一個實時編譯的過程，意思是只要你對項目做了修改并保存，他會立即反應(yīng)到node服務(wù)中。

可以通過 在控制臺中鍵入 CTRL+C 停止預(yù)覽

4 添加平臺

ionic3是用來開發(fā)多平臺app的，所以我們需要在ionic中添加所需的平臺來滿足這個需求。

ionic3的添加平臺命令完全繼承了cordova的CLI，其可支持添加三種平臺：android iOS?browser

命令如下：

ionic cordova platform add android[@version]

ionic cordova platform add ios[@version]

ionic cordova platform add browser[@version]

刪除平臺命令如下：

ionic cordova platform rm android

ionic cordova platform rm ios

ionic cordova platform rm browser

我們也可以通過以下命令來確定我們所安裝的平臺

ionic cordova platform list

通過以下命令來check 我們所安裝的平臺是不是最新的版本

ionic cordova platform check

通過以下命令來升級對應(yīng)的平臺版本

ionic cordova platform update [android / ios / browser]

5 進(jìn)行編譯-打包（debug）

開發(fā)階段建議進(jìn)行debug方式進(jìn)行打包，這讓我們可以非常方便得進(jìn)行調(diào)試

打包命令分兩種：

一種為直接編譯到手機(jī)或模擬器上（前提是手機(jī)開了usb調(diào)試，或者電腦裝了模擬器）

ionic cordova run android

另一種為編譯出app的安裝包，以Android為例：導(dǎo)出的apk目錄為 [項目路徑]\platforms\android\build\outputs\apk

ionic cordova build android

注：在第一次編譯android apk的時候可能會出現(xiàn)這個錯誤?Could not reserve enough space for 2097152KB objectheap 。這是因為gradle在下載jar包的時候因為沒有配置jvm的運(yùn)行時內(nèi)存而導(dǎo)致的， 解決方案有兩種： 一種是在編譯前首先使用Android Studio打開，因為Android Studio中默認(rèn)是配置過jvm的運(yùn)行內(nèi)存的，所以問題就解決了，另一種是不需要Android Studio

配置環(huán)境變量：

_JAVA_OPTIONS ：?-Xmx512M

?然后，關(guān)掉控制臺，重新打開并運(yùn)行 build命令， 問題解決

切記！！！ 成功執(zhí)行一次后，將配置的這個參數(shù)刪掉，因為如果不刪掉，在我們做其他開發(fā)啟動eclipse的時候會報錯