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，速度快很多，用过都说好！！
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
这样就能正确设置层级和禁止全屏播放了～～～
网友评论