1，還是筆記，不是教程，可能有些亂，如果能幫到你，我很高興

IONIC的安裝網(wǎng)上應(yīng)該一搜都有，我這里主要說(shuō)幾個(gè)，安裝時(shí)遇到的坑；

1.1 關(guān)于JDK環(huán)境

? ? ? java_home變量一定要放在環(huán)境變量里所有變量的最前面。還有如果以前電腦上安裝過(guò)JDK或配置過(guò)JDK的環(huán)境變量，

? ? ?安裝時(shí)會(huì)報(bào)找不到路徑的錯(cuò)，但其實(shí)是路徑是以前配置的路徑。

? ? ?解決方法，windows+r 運(yùn)行 ? 輸入REGEDIT ?回車 ?在注冊(cè)表里找到 ?SOFTWARE>software> 找到j(luò)ava 然后把原來(lái)的注冊(cè)表刪除。在運(yùn)行命 ? ? ? ? ? 令；

? ? ?build android時(shí)還會(huì)報(bào)一個(gè)platform 25的錯(cuò)， 打開(kāi)sdkmanger 然后把里面關(guān)于25的全都更新一遍。

? ? ?25是版本，安裝時(shí) 直接點(diǎn)右邊的 accept license 一定要點(diǎn)這個(gè)，不然會(huì)報(bào)你沒(méi)接受許可的錯(cuò)；

?1.2 安裝時(shí)最好使用淘寶鏡像（墻，你懂得）

? ? ?npm install -g cnpm --registry=https://registry.npm.taobao.org

? ? ?然后

? ? ? CNPM INSTALL -G IONIC，速度快很多，用過(guò)都說(shuō)好??！

1.3 build android 很慢。

? ? 基本上前面步驟進(jìn)行完了之后，運(yùn)行 ionic serve 就能在瀏覽器看到APP啟動(dòng)后的畫(huà)面了，

? ? 若是想在真機(jī)調(diào)試或者是模擬器，就到了添加Android平臺(tái)或IOS平臺(tái)了，這里記一下Android平臺(tái)的添加就好了。

? ? ?具體步驟自己搜索吧，主要說(shuō)下關(guān)鍵的，到了ionic build android這一步時(shí)，非常的慢，這里你可以看到終端上他在

? ? 下載一個(gè)叫g(shù)radle-3.3-all.zip（版本號(hào)是我自己的，記住gradle就OK了），其實(shí)沒(méi)有多大，但我開(kāi)著VPN也很慢。

? ? ?這里，我們直接復(fù)制一下URL到瀏覽器自己下載到本地。

? ? 然后進(jìn)入項(xiàng)目文件夾下得>platform>android>叫g(shù)radle的文件夾。將你剛剛下的壓縮包放進(jìn)去。

? ? （這里有個(gè)小TIPS，gradle這個(gè)文件夾，要運(yùn)行一次ionic build android才會(huì)生成。）

? ? 然后命令行里黏貼 set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-3.3-all.zip（壓縮包名改成自己的）

? ? 這一段就是將路徑設(shè)置成已經(jīng)下好這個(gè)包的路徑，這樣本地就很快了。

? ?2.IONIC 使用時(shí)的一些筆記

? ? ?2.1 引用第三方（jquery）

? ? ? ?First of all, install JQuery in your ionic2 project:

? ? ? ?$ npm install jquery --save

? ? ? ?After that, install JQuery global derectory to typings (so you can import it):

? ? ? ?$ npm install -g typings

? ? ? ?$ typings install dt~jquery --global --save

? ? ? ?Then, you can import JQuery ib your "home.ts":

? ? ? ? import? $ from 'jquery'

? ? ?上述是IONIC論壇的原回復(fù)

? 2.2 AVD的模擬器不支持CSS3 VIDEO 這個(gè)標(biāo)簽

? ? ?本地視頻使用IFRAME，有聲無(wú)畫(huà)；

? ? ?在線地址的話，沒(méi)有問(wèn)題。但在真機(jī)上都沒(méi)有問(wèn)題的，包括video標(biāo)簽。

? ?2.3 ionic 動(dòng)畫(huà) - WEB-ANIMATION

? ? ?關(guān)于WEB-ANIMATION使用

? ??www.joshmorony.com/using-the-web-animations-api-in-ionic-2/，可用瀏覽器翻譯在看，

? ? 比較通俗易懂，英語(yǔ)大神忽略~~~~

? ? 下面是后面會(huì)報(bào)錯(cuò)的解決辦法

? ? ?報(bào)錯(cuò) 需要引入 BrowserAnimationsModule；

? ? 1.npm install @angular/animations@4.0.0 --save

? ? 2.in app.module.ts:

? ? import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

? ? and

? ? imports: [

? ? BrowserModule,

? ? BrowserAnimationsModule,

? ? HttpModule,

? ?],

3.Change declarations at the page:

import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations'

2.4 ?安卓鍵盤彈出，打亂布局

進(jìn)入你的項(xiàng)目文件夾，然后去：

platforms -> android -> AndroidManifest.xml

在該文件中搜索：

android:windowSoftInputMode="adjustResize"

并將其更改為：

android:windowSoftInputMode="adjustPan"

使用此設(shè)置您的鍵盤全部重疊，不向上或向下滾動(dòng)或移動(dòng)Div或輸入等。

下面是其他一些設(shè)置：

adjustNothing

忽略整個(gè)布局。如果它被打開(kāi)，它必須被用戶關(guān)閉。

stateUnspecified

沒(méi)有指定軟鍵盤的狀態(tài)（無(wú)論是隱藏的還是可見(jiàn)的）。系統(tǒng)將選擇適當(dāng)?shù)臓顟B(tài)或依靠主題中的設(shè)置。這是軟鍵盤行為的默認(rèn)設(shè)置。

stateUnchanged

軟鍵盤保持在最后的任何狀態(tài)，無(wú)論是可見(jiàn)的還是隱藏的，當(dāng)活動(dòng)出現(xiàn)在前面。

stateHidden

當(dāng)用戶選擇活動(dòng)時(shí)，即軟用鍵盤被隱藏 - 即用戶肯定地向前導(dǎo)航到活動(dòng)，而不是因?yàn)殡x開(kāi)另一個(gè)活動(dòng)而返回到活動(dòng)中。

stateAlwaysHidden當(dāng)活動(dòng)“ 主窗口有輸入焦點(diǎn)。

stateVisible

當(dāng)正常情況下（當(dāng)用戶正在導(dǎo)航到活動(dòng)的主窗口）時(shí)，軟鍵盤是可見(jiàn)的。

stateAlwaysVisible

當(dāng)用戶選擇活動(dòng)時(shí) - 即用戶肯定地導(dǎo)航到活動(dòng)，而不是因?yàn)殡x開(kāi)另一個(gè)活動(dòng)而返回到活動(dòng)中，軟鍵盤被顯示。

adjustUnspecified

無(wú)論活動(dòng)的主窗口是否調(diào)整大小以為軟鍵盤騰出空間，還是窗口的內(nèi)容是否使當(dāng)前焦點(diǎn)在屏幕上可見(jiàn)，都是未指定的。系統(tǒng)將根據(jù)窗口的內(nèi)容是否具有可以滾動(dòng)其內(nèi)容的任何布局視圖自動(dòng)選擇其中一種模式。如果有這樣的看法，窗口將被調(diào)整大小，假設(shè)滾動(dòng)可以使窗口的所有內(nèi)容在較小的區(qū)域內(nèi)可見(jiàn)。這是主窗口行為的默認(rèn)設(shè)置。

adjustResize

活動(dòng)的主窗口總是調(diào)整大小，為屏幕上的軟鍵盤騰出空間。

adjustPan

活動(dòng)的主窗口沒(méi)有調(diào)整大小，為軟鍵盤騰出空間。相反，窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前的焦點(diǎn)從不被鍵盤遮住，用戶總是可以看到他們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。假設(shè)滾動(dòng)可以使窗口的所有內(nèi)容在較小的區(qū)域內(nèi)可見(jiàn)。這是主窗口行為的默認(rèn)設(shè)置。adjustResize活動(dòng)的主窗口總是調(diào)整大小，為屏幕上的軟鍵盤騰出空間。adjustPan活動(dòng)的主窗口沒(méi)有調(diào)整大小，為軟鍵盤騰出空間。相反，窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前的焦點(diǎn)從不被鍵盤遮住，用戶總是可以看到他們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。假設(shè)滾動(dòng)可以使窗口的所有內(nèi)容在較小的區(qū)域內(nèi)可見(jiàn)。這是主窗口行為的默認(rèn)設(shè)置。adjustResize活動(dòng)的主窗口總是調(diào)整大小，為屏幕上的軟鍵盤騰出空間。adjustPan活動(dòng)的主窗口沒(méi)有調(diào)整大小，為軟鍵盤騰出空間。相反，窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前的焦點(diǎn)從不被鍵盤遮住，用戶總是可以看到他們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。adjustResize活動(dòng)的主窗口總是調(diào)整大小，為屏幕上的軟鍵盤騰出空間。adjustPan活動(dòng)的主窗口沒(méi)有調(diào)整大小，為軟鍵盤騰出空間。相反，窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前的焦點(diǎn)從不被鍵盤遮住，用戶總是可以看到他們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。adjustResize活動(dòng)的主窗口總是調(diào)整大小，為屏幕上的軟鍵盤騰出空間。adjustPan活動(dòng)的主窗口沒(méi)有調(diào)整大小，為軟鍵盤騰出空間。相反，窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前的焦點(diǎn)從不被鍵盤遮住，用戶總是可以看到他們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前焦點(diǎn)不會(huì)被鍵盤遮擋，用戶總是可以看到它們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。窗口的內(nèi)容將被自動(dòng)平移，以便當(dāng)前焦點(diǎn)不會(huì)被鍵盤遮擋，用戶總是可以看到它們正在打字。這通常比調(diào)整大小更不理想，因?yàn)橛脩艨赡苄枰P(guān)閉軟鍵盤以獲得并與窗口的模糊部分進(jìn)行交互。

所有這些信息可以在這里找到：http ://developer.android.com/guide/topics/manifest/activity-element.html#wsoft 23

暫時(shí)先這些，以后會(huì)補(bǔ)充自己遇到的一些問(wèn)題，以便自己以后查閱或幫到需要的同學(xué)。

3. 使用 --prod 構(gòu)建 APP時(shí)報(bào)錯(cuò)解決辦法

當(dāng)構(gòu)建好一個(gè)APP時(shí)，我發(fā)現(xiàn)啟動(dòng)特別慢可能在15S左右，一番搜索后，發(fā)現(xiàn)在build android 的時(shí)候加上--prod可以壓縮整個(gè)APP的大小。

構(gòu)建時(shí)報(bào)了一個(gè)錯(cuò)，類似于這樣

Error: Type HomePage in D:/cbe/src/pages/home/home.ts is part of the declarations of 2 modules: AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src/pages/home/home.module.ts! Ple

ase consider moving HomePage in D:/cbe/src/pages/home/home.ts to a higher module that imports AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src/pages/home/home.module.ts. You c

an also create a new NgModule that exports and includes HomePage in D:/cbe/src/pages/home/home.ts then import that NgModule in AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src

/pages/home/home.module.ts.

這是IONIC 一個(gè)懶加載報(bào)錯(cuò)。最開(kāi)始在添加頁(yè)面時(shí)，在app.moudule.ts中引入了HOME這個(gè)頁(yè)面。

刪除掉HOME的引入。構(gòu)建完成后，在恢復(fù)成原樣，不然你設(shè)置的一些頁(yè)面導(dǎo)航就找不到了。

1.從ionic2升級(jí)到ionic3；

啟動(dòng)報(bào)錯(cuò) animations ；

npm install @angular/animations@latest --save

將animation升級(jí)到最新

2.從xcode打開(kāi)項(xiàng)目運(yùn)行報(bào)錯(cuò)Failed to load webpage with error: Could not connect to the server

通過(guò) ionic cordova prepare ios 更新代碼庫(kù)

3.ios video標(biāo)簽始終全屏播放解決辦法

video標(biāo)簽 加上 playsinline? webkit-playsinline

將<preference name="AllowinlineMediaPlayback" vlue="true"> 添加到你的config.xml

這樣就能正確設(shè)置層級(jí)和禁止全屏播放了～～～