ionic3 Bug收集

1、ion-input、ion-textarea等输入框不能放在ion-row>ion-col中，否则底部会出现大片空白区域。

只能放在ion-item中

<ion-row>
      <ion-col col-3 class="bg-light text-center">签发人意见</ion-col>
      <ion-col col-9 class="exxcontent">
        <ion-textarea placeholder="请输入签发人意见" [(ngModel)]="rcontent"></ion-textarea>
      </ion-col>
    </ion-row>

改成：

<ion-row>
      <ion-col col-3 class="bg-light text-center">签发人意见</ion-col>
      <ion-col col-9 class="exxcontent">
        <ion-item no-padding no-lines>
            <ion-textarea placeholder="请输入签发人意见" [(ngModel)]="rcontent"></ion-textarea>
        </ion-item>        
      </ion-col>
    </ion-row>

打包到安卓手机上，底部还是会出现大片的空白，不知道是什么原因。
最后没找到问题原因，就改用原生的textarea代替。加上ion-textarea的class。

2、date管道在ios中失效

date管道支持的时间字符串格式：
a、2018/10/12 13:21:12
b、时间戳
自定义一个管道，对时间格式化：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'dateIosFormat',
})
export class DateIosFormatPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string) {
    if(typeof value!="undefined"){
      value=value.replace(/-/g,'/');
      let arr=value.split(":");
      arr.pop();
      value=arr.join(":");
    }
    return value;
  }
}

3、在mac上执行ionic cordova resources ios，生成闪屏和图标时，有3个文件始终生成不了。

Default-Landscape-736h.png
Default-Landscape@~ipadpro.png
Default@2x_universalanyany.png
提示：

✖ Generating platform resources - failed!
Error: encountered bad status code (400) for https://res.ionic.io/api/v1/transform
body: {"Error":"source image 2048x2732 too small for Default-Landscape@~ipadpro.png, requires at least 2732x2048 source file"}

并且，在xcode中执行调试，也一直报错，其中一个提示(另一个没记录)：

distill failed for unknow reasons

最后使用ionic2生成的ios闪屏和图标包替换后，

4、关闭启动时的菊花加载

打开config.xml
加入代码：

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

5、禁止屏幕上下拖拽

打开config.xml
加入代码：

<preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />

6、ios下跨域问题

打开config.xml
加入代码：

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

基于ios系统ionic 项目开发跨域问题：https://blog.csdn.net/u012365780/article/details/80449682

7、ios下点击事件延时

熟悉前端的应该都知道，某些元素在click事件会有300ms的延迟，在ionic里也是只有button和a可以立即响应的。如果要给其他的元素比如div增加click事件，给该元素加上tappable属性即可解决。

8、ios启动速度慢

打包时，加上--prod --release参数

ionic cordova build android  --prod --release 
ionic cordova build ios  --prod --release

9、safari浏览器/ios移动端 不兼容position:fixed

1、想办法使用position:absolute替换。例子：https://blog.csdn.net/grsghh/article/details/61416953
2、结合js滚动事件，想解决方案。

10、ios下build打包报错：

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Deve
解决方案：
重置下xcode安装目录，具体目录地址说过访达查看
sudo xcode-select --switch /Users/macbook/Downloads/Xcode.app/Contents/Developer/

11、ios下build打包报错：

Cordova needs ios-deploy version 1.9.2 or greater, you have version 1.9.1. Please download, build and install version 1.9.2 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'
解决方案：
sudo cnpm install -g ios-deploy

12、报错：

generating plarform resources-failed
Error code 65 for command: xcodebuild with args:
解决方案：
sudo ionic cordova platform remove ios
sudo ionic cordova platform add ios
闪屏尺寸至少2732*2732

13、Mac修改文件权限：You don’t have permission to save the file

1、从互联网上或者其他途径拿过来的工程代码，往往会报下面的提示：

(1)打开文件的时候出现窗口提示You don’t have permission to save the file “project.xcworkspace” in the folder “****.xcodeproj”.
(2)进入Xcode时出现窗口提示Could not add write permission to the file because you do not own it. Try modifying the permissions of the file in the Finder or Terminal.

而且会让你去选择是否locked，选择后提示不能unlocked，如下：

image.png

提没有写权限，并让你试图去finder或者终端中修改它。

2、参考解决方案如下了：
选中工程[文件夹]
点右键，在 “显示简介"——>"共享与权限"——>"-+"号。 添加本用户(就是你登录的那个账号)，授予读写权限，并点击下方的设置符号选择"应用到包含的项目"，操作如下图：

image.png

image.png

14、StatusBar头部状态栏背景和文字问题

image.png

image.png

要设置成深色底色，浅色文字。
app.component.ts

statusBar.styleBlackTranslucent();//安卓有效，ios未使

或者看这篇文章：https://segmentfault.com/a/1190000011836584
如果不需要头部区域，但是又希望状态条背景显示和主线是区域一直，可以在头部添加ion-header。

<ion-header></ion-header>

15、执行打包命令，没有得到apk安装包

执行下面命令后，没有在项目目录下发现apk安装包(\platforms\android\app\build\outputs\apk)

ionic cordova build android --release

考虑当前项目没有完整拷贝，是通过npm i命令下载的插件，可能是应为没有resources资源目录导致，先生成资源

ionic cordova resource

返回410报错

image.png

解决方案一

修改ionic官网线上的项目关联到本地项目，ionic cordova resources 命令总提示需要登录
参考文章：外文参考

解决方案二

找到之前的resource文件夹备份，拷贝到当前项目更目录，再build生成apk，成功！！！！

16、android6以下版本，引入自定义js函数失败

操作步骤：
1.index.html引入
2.新建*.d.ts文件
3.定义要用到的函数或者变量声明，比如：微信公众平台的declare var wx:any;declare var WeixinJSBridge:any;
4.在需要用的page页面的ts文件头部引入///<reference path="../../services/jweixin.d.ts"/>结果：
在android6以下，无法调用自定义的js函数，typeof 函数名 返回"undefined"。通用调用自定义变量，返回正常。

解决方案：1、如果是线上通用的js库，则可以看看是否存在ts版本，目前很多js库都已经支持ts版本。
例如crypto-js安装步骤：

npm i crypto-js --save
npm i @types/crypto-js --save
import * as CryptoJS from "crypto-js";
//调用
//private static key = CryptoJS.enc.Latin1.parse("2016-ppt+acc+r==");

2、如果是自定义方法，建议全部改成静态方法
在项目src目录下新建pubfunction.ts文件

import * as CryptoJS from "crypto-js";
export class PubFunction {
    /**
     *判断变量是否有值
     *
     * @static
     * @param {*} instr
     * @returns
     * @memberof PubFunction
     */
    public static ExistValue(instr) {
        if (typeof instr == "undefined") return false;
        if (instr == null) return false;
        if (instr.trim() == '') return false;
        return true;
    }
    
    ... ...
}