筆記:整理一些使用IONIC的筆記。

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

IONIC的安裝網上應該一搜都有,我這里主要說幾個,安裝時遇到的坑;

1.1 關于JDK環境

? ? ? java_home變量一定要放在環境變量里所有變量的最前面。還有如果以前電腦上安裝過JDK或配置過JDK的環境變量,

? ? ?安裝時會報找不到路徑的錯,但其實是路徑是以前配置的路徑。

? ? ?解決方法,windows+r 運行 ? 輸入REGEDIT ?回車 ?在注冊表里找到 ?SOFTWARE>software> 找到java 然后把原來的注冊表刪除。在運行命 ? ? ? ? ? 令;

? ? ?build android時還會報一個platform 25的錯, 打開sdkmanger 然后把里面關于25的全都更新一遍。

? ? ?25是版本,安裝時 直接點右邊的 accept license 一定要點這個,不然會報你沒接受許可的錯;

?1.2 安裝時最好使用淘寶鏡像(墻,你懂得)

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

? ? ?然后

? ? ? CNPM INSTALL -G IONIC,速度快很多,用過都說好?。?/p>

1.3 build android 很慢。

? ? 基本上前面步驟進行完了之后,運行 ionic serve 就能在瀏覽器看到APP啟動后的畫面了,

? ? 若是想在真機調試或者是模擬器,就到了添加Android平臺或IOS平臺了,這里記一下Android平臺的添加就好了。

? ? ?具體步驟自己搜索吧,主要說下關鍵的,到了ionic build android這一步時,非常的慢,這里你可以看到終端上他在

? ? 下載一個叫gradle-3.3-all.zip(版本號是我自己的,記住gradle就OK了),其實沒有多大,但我開著VPN也很慢。

? ? ?這里,我們直接復制一下URL到瀏覽器自己下載到本地。

? ? 然后進入項目文件夾下得>platform>android>叫gradle的文件夾。將你剛剛下的壓縮包放進去。

? ? (這里有個小TIPS,gradle這個文件夾,要運行一次ionic build android才會生成。)

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

? ? 這一段就是將路徑設置成已經下好這個包的路徑,這樣本地就很快了。

? ?2.IONIC 使用時的一些筆記

? ? ?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論壇的原回復

? 2.2 AVD的模擬器不支持CSS3 VIDEO 這個標簽

? ? ?本地視頻使用IFRAME,有聲無畫;

? ? ?在線地址的話,沒有問題。但在真機上都沒有問題的,包括video標簽。

? ?2.3 ionic 動畫 - WEB-ANIMATION

? ? ?關于WEB-ANIMATION使用


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

? ? 比較通俗易懂,英語大神忽略~~~~

? ? 下面是后面會報錯的解決辦法

? ? ?報錯 需要引入 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 ?安卓鍵盤彈出,打亂布局

進入你的項目文件夾,然后去:

platforms -> android -> AndroidManifest.xml

在該文件中搜索:

android:windowSoftInputMode="adjustResize"

并將其更改為:

android:windowSoftInputMode="adjustPan"

使用此設置您的鍵盤全部重疊,不向上或向下滾動或移動Div或輸入等。

下面是其他一些設置:

adjustNothing

忽略整個布局。如果它被打開,它必須被用戶關閉。

stateUnspecified

沒有指定軟鍵盤的狀態(無論是隱藏的還是可見的)。系統將選擇適當的狀態或依靠主題中的設置。這是軟鍵盤行為的默認設置。

stateUnchanged

軟鍵盤保持在最后的任何狀態,無論是可見的還是隱藏的,當活動出現在前面。

stateHidden

當用戶選擇活動時,即軟用鍵盤被隱藏 - 即用戶肯定地向前導航到活動,而不是因為離開另一個活動而返回到活動中。

stateAlwaysHidden當活動“ 主窗口有輸入焦點。

stateVisible

當正常情況下(當用戶正在導航到活動的主窗口)時,軟鍵盤是可見的。

stateAlwaysVisible

當用戶選擇活動時 - 即用戶肯定地導航到活動,而不是因為離開另一個活動而返回到活動中,軟鍵盤被顯示。

adjustUnspecified

無論活動的主窗口是否調整大小以為軟鍵盤騰出空間,還是窗口的內容是否使當前焦點在屏幕上可見,都是未指定的。系統將根據窗口的內容是否具有可以滾動其內容的任何布局視圖自動選擇其中一種模式。如果有這樣的看法,窗口將被調整大小,假設滾動可以使窗口的所有內容在較小的區域內可見。這是主窗口行為的默認設置。

adjustResize

活動的主窗口總是調整大小,為屏幕上的軟鍵盤騰出空間。

adjustPan

活動的主窗口沒有調整大小,為軟鍵盤騰出空間。相反,窗口的內容將被自動平移,以便當前的焦點從不被鍵盤遮住,用戶總是可以看到他們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。假設滾動可以使窗口的所有內容在較小的區域內可見。這是主窗口行為的默認設置。adjustResize活動的主窗口總是調整大小,為屏幕上的軟鍵盤騰出空間。adjustPan活動的主窗口沒有調整大小,為軟鍵盤騰出空間。相反,窗口的內容將被自動平移,以便當前的焦點從不被鍵盤遮住,用戶總是可以看到他們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。假設滾動可以使窗口的所有內容在較小的區域內可見。這是主窗口行為的默認設置。adjustResize活動的主窗口總是調整大小,為屏幕上的軟鍵盤騰出空間。adjustPan活動的主窗口沒有調整大小,為軟鍵盤騰出空間。相反,窗口的內容將被自動平移,以便當前的焦點從不被鍵盤遮住,用戶總是可以看到他們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。adjustResize活動的主窗口總是調整大小,為屏幕上的軟鍵盤騰出空間。adjustPan活動的主窗口沒有調整大小,為軟鍵盤騰出空間。相反,窗口的內容將被自動平移,以便當前的焦點從不被鍵盤遮住,用戶總是可以看到他們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。adjustResize活動的主窗口總是調整大小,為屏幕上的軟鍵盤騰出空間。adjustPan活動的主窗口沒有調整大小,為軟鍵盤騰出空間。相反,窗口的內容將被自動平移,以便當前的焦點從不被鍵盤遮住,用戶總是可以看到他們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。窗口的內容將被自動平移,以便當前焦點不會被鍵盤遮擋,用戶總是可以看到它們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。窗口的內容將被自動平移,以便當前焦點不會被鍵盤遮擋,用戶總是可以看到它們正在打字。這通常比調整大小更不理想,因為用戶可能需要關閉軟鍵盤以獲得并與窗口的模糊部分進行交互。

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

暫時先這些,以后會補充自己遇到的一些問題,以便自己以后查閱或幫到需要的同學。

3. 使用 --prod 構建 APP時報錯解決辦法

當構建好一個APP時,我發現啟動特別慢可能在15S左右,一番搜索后,發現在build android 的時候加上--prod可以壓縮整個APP的大小。

構建時報了一個錯,類似于這樣

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 一個懶加載報錯。最開始在添加頁面時,在app.moudule.ts中引入了HOME這個頁面。


刪除掉HOME的引入。構建完成后,在恢復成原樣,不然你設置的一些頁面導航就找不到了。

1.從ionic2升級到ionic3;

啟動報錯 animations ;

npm install @angular/animations@latest --save

將animation升級到最新

2.從xcode打開項目運行報錯Failed to load webpage with error: Could not connect to the server

通過 ionic cordova prepare ios 更新代碼庫

3.ios video標簽始終全屏播放解決辦法

video標簽 加上 playsinline? webkit-playsinline

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

這樣就能正確設置層級和禁止全屏播放了~~~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容