ionic问题总结

跟着ionic走了几个项目，也碰到了不少问题，准备慢慢开始整理出来，这篇文章不出意外的话，应该会不定时更新：

1、如何不让splash页面自动消失

config.xml页面配置：

<preference name="AutoHideSplashScreen" value="false"/>

component的ready之后

// spalsh关闭 setTimeout(function () {     Splashscreen.hide(); }, 1000)

2、部分安卓低版本手机会无法安装或者打开app

需要安装插件

ionic plugin add cordova-plugin-crosswalk-webview --save

笔者下过2.1.0的一个版本结果高版本的手机装了打不开，后面下了2.3.0的版本，才正常运作。不确定是插件原因还是app原因，不过我都是指定到2.3.0版本的，防止出现类似情况。

注：安装这个插件以后有一个弊端会造成打出来的apk愣生生大了十几兆，因此最好能跟产品经理沟通确认好这个问题，否则就不能玩耍了。


3、ionic上，如果用到ion-input和ion-textarea，需要在外面套ion-list和ion-item，这样，软键盘才能在focus到input和textarea上时自动将页面上推，否则会盖住输入框

4、处理app在安卓手机启动慢的问题：

分为两种情况：

情况1：打包时候没有在命令行添加--prod，很简单，只需要在命令末尾添加这句，不仅打的包会小，而且启动速度也很快

情况2：这种比较复杂了，笔者遇到的情况是，添加的安卓平台默认是5.2.0，导致启动巨慢，处理方法是，

1）先手动把根目录下plugins文件夹删掉

2）然后再把安卓平台删掉： ionic cordova platform remove android（没有装ionic3的童鞋，命令里面不需要加cordova）

3）再添加平台，不过要指定一个版本：ionic cordova platform add android@6.1.0

4）重新编译apk就好

5、如果错安装了ionic3想降级到2怎么办？

npm uninstall -g ionic  // 卸载ionic

npm cache clean   // 清干净

npm install -g ionic@2 // 回滚

6、升级ionic3以后编译ionic2的项目遇到了报错

笔者是由于npm5.0版本导致的问题

先降级npm到4.0版本：

npm install -g npm@~4.0.0

再删node_modules

重装项目node_modules

7、安卓启动app总提示application error解决方法：

在config.xml中加：

<preference name="loadUrlTimeoutValue" value="700000" />

8、android 退出再进入没显示splash：在config.xml中加：

<preference name="SplashShowOnlyFirstTime" value="false" />

9、当安装了ionic-plugin-keyboard插件时，会导致一个问题：

在iOS手机上当弹出软件盘时，软键盘最上“完成”的toolbar不见了，这是由于这个插件默认将这个bar隐藏掉了，处理方法是：

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false)

10、如果有不是a或者button标签绑定了click事件，会出现一段延迟，导致体验感不好，这时候可以在绑定了click事件的标签上面加个属性“tappable”，就可以避免这个现象。

11、当两个页面的header高度不一的时候，由于iOS上页面切换的动画效果是从左往右或从右往左，这个时候会导致header的渲染出现UI问题，折中办法是把app的页面切换动画改成安卓手机效果就不会出现了：

在app.module.ts中加入：

pageTransition: 'md-transition'

即：

...

imports: [
IonicModule.forRoot(MyApp, {
backButtonText: '',
pageTransition: 'md-transition'
}),
CloudModule.forRoot(cloudSettings),
HttpModule
]

...

12、input输入框自动focus/blur：

import { ViewChild } from '@angular/core';

import { TextInput } from 'ionic-angular'

@ViewChild('input') input:TextInput

//自动focus

this.input.setFocus()

//自动blur

this.input._native._elementRef.nativeElement.blur()

注：由于笔者项目用的不是最新版ionic，所以不支持setBlur方法，只能用原生自带的，据说新版支持this.input.setBlur()，但是还没亲测过，有兴趣的童鞋可以用最新框架试一下