自己使用ionic3开发移动端项目，已有2年多的时间，现在最新的ionic4终于正式发布了，连官方文档（https://ionicframework.com/docs）默认页面都换成了ionic4，需要查看ionic3文档可以通过Framework菜单下的Framework v3 来切换。
一、先来说一下ionic4与ionic3的区别（个人观点）：
1. 最大的改变就是路由机制了，原来的ionic3是通过push和pop来控制页面的跳转和关闭，而现有版本的ionic4采用的Angular（以下简称ng）的路由机制，可以完全使用ng的路由来控制页面跳转，并且可以使用ng中的所有的路由守卫（Activate，Deactivate，Resolve等）。
在执行跳转和关闭时，现有ionic4版本提供了5种方法：navigateForward，navigateBack，navigateRoot，back， pop；这里重点说一下back和pop的区别：back相当于window.history.back()，而pop类似于原ionic3中的pop方法，会移除视图栈最顶部的视图层；当然也可以在a链接或按钮中使用routerLink来实现跳转，ion-tabs组件中的路由比较特殊，具体实现可以参考 https://ionicframework.com/docs/api/tabs。
2. modal、popover、toast、loading、alert等组件的create方法都改为返回Promise的方式，可以使用async和await的方式来实现；向modal和popover组件传递及接收参数的方式也与原来略有不同，以modal组件为例：
调用modal，使用componentProps来传递参数
modal组件中使用输入属性或navParams来接收参数
具体操作可参考 https://ionicframework.com/docs/api/modal
3. 远程获取数据需要进行跨域设置，原来的ionic3不存在这个问题，但 ionic4 在运行时相当于开启了一个localhost:8100的本地服务，数据请求都是以此地址发出的，所以需要服务端设置CORS；如果实在不想进行设置的话，可以不使用 ng 的 httpClient 了，而改用 ionic-native 中的 http 来进行数据请求，具体用那种方式可根据自己的项目需求来定，本人采用的是第一种方式。
4. 新增了 prepare 命令，在使用 ionic cordova platofrm add android/ios 构建 android 或 ios 平台后，如果修改了代码，在 ionic3 中只要执行ionic build 就可以应用改变，但在 ionic4 中需要行执行 ionic cordova prepare android/ios 命令才能将改变应用到平台中，当然在打包之前还是一样要执行 ionic build --prod 命令。
二、现在开始说一下自己在使用ionic4调试和打包过程中遇到的坑，各位有则改之，无则加勉：
开发环境和相关工具：
node v10.15.1 npm v6.9.0
ionic v4.12.0
cordova v8.1.2
Mac系统10.14或以上版本（ios和android打包均可）或 Windows系统（仅限Android）
Android Studio 3.2 + JDK 1.8
XCode 10.1 + Apple开发者账号（官方推荐使用XCode9，但2019年4月之后苹果要求必须使用XCode10.1或以上版本来发布产品）
Android平台（坑比较少）
在实现APP版本检测并自动或手动下载APK文件更新时，下载的APK在高版本的Android系统下可能会出现无法正常打开并安装的问题；这是因为Android 8以上系统增加了安装权限限制，需要在 config.xml 配置文件的 <platform name="android"> 中，做如下修改：
<config-file parent="/manifest" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
</config-file>
修改之后，就会在安装APK时出现权限申请的提示了。
如果在项目中需要使用 iframe，应该注意：直接将 url 链接字符串地址绑定到 src 属性上时，即使使用了 https 也会出现报错无法访问的情况，必须注入 Angular 的 DomSanitizer，并调用其 bypassSecurityTrustResourceUrl 方法，将 url 字符串做为参数传入，此方法会返回一个 SafeResourceUrl（安全链接对象），将这个对象绑定到 iframe 的 src 属性上就可以正常访问了（在 ios 平台下，除此以外还需要做其它处理，后面会有说明）。
IOS平台（坑非常多）
1. 先说一下Mac系统下的权限问题（一直使用 Mac 系统做为开发环境的土豪可以略过，有些小伙伴一直使用 windows 初次使用MAC系统可能会遇到如下问题），如果有些命令因为权限问题不能正常执行，可以通过在命令前加 sudo 前缀来执行；但本来不加 sudo 前缀就可以正常执行的命令，就不要再加额外 sudo 了，因为这可能会使通过此命令自动生成的文件和文件夹出现未知的权限问题，出现这种情况可以通过命令行执行：
sudo chmod -R 777 你的文件夹名
来重新获取权限。
另外说一下，如果实在买不起苹果，又想调试 iOS 平台，可以考虑使用 VMware-workstation 15 及以上版本安装一个 Mac 虚拟机（你问我为什么非要 VM15 及以上？因为 VM15 及以上版本才能安装 macOS 10.14 及以上版本的系统，而 macOS 10.14 及以上版本的系统才能安装 XCode9.4.1 及以上版本，新版的 ionic4 构建的 iOS 平台要在 XCode9.4.1 及以上版本才能正常运行，哎妈！好累！）。
使用 Mac 虚拟机调试项目和在真实的苹果机上没有太大区别（当然虚拟机对硬件的要求会比较高，不然会很卡，如果你用的是老爷机，基本就可以放弃治疗了），关于 VMware 具体如何安装就不赘述了，百度一下有很多教程。
2. 在Mac系统下想正常执行 ionic cordova run ios 命令，必须先安装 ios-sim 和 ios-deploy：
npm install -g ios-sim
npm install -g ios-deploy
如果无法正常安装 ios-deploy，你可能需要如下操作：
打开 XCode，菜单选择 Preferences > Location > Command Line Tools，选择你的 XCode 版本，然后再执行：
sudo npm install -g ios-deploy --unsafe-perm=true
应该就可以正常安装了。
3. 在ios模拟器或真机调式项目时，如果遇到启动后一直停留在启动页的情况，可以尝试使用以下方式解决：
⑴ 首先查看整个ionic项目的各个文件夹（尤其是 plugin 和 www）是否有读写权限，如果没有则开启权限；
⑵ 重新执行 ionic cordova prepare ios 命令，如果还不行，执行 ionic cordova platform remove/add ios 删除再重新添加 ios 平台；
4. 在调用接口、在线资源或外部链接时尽量使用 https 链接，避免 http，因为有可能出现无法正常连接的情况；如果必须要使用 http 的话，需要在已经生成的 ios 平台中修改 -Info.plist 文件（在ios平台的Resources文件夹中），添加 App Transport Security Settings 选项，在此选项下增加 Allow Arbitrary Loads 并将值设置为 Yes；如果需要访问一些特殊的链接地址，需要检查 ionic 项目的 config.xml 配置文件中的 allow-intent 标签是否有对应的匹配项。
5. 如果表单在 ios 下无法输入中文，一般是因为 ios 平台的语言设置（默认只支持英文）问题，需要在 config.xml 配置文件中的 <platform name="ios"> 中添加如下代码，将语言设置为支持中文：
<config-file parent="CFBundleDevelopmentRegion" target="*-Info.plist">
<string>China</string>
</config-file>
<config-file parent="CFBundleLocalizations" target="*-Info.plist">
<array>
<string>English</string>
<string>Chinese</string>
</array>
</config-file>
然后重新构建 ios 平台，这段代码的作用是在 ios 平台的 -Info.plist 文件中的将 Localization native development region 设置为 China，并且添加一个 Localizations 选项，值为数组，默认会有一个 English，再添加一个值设置为 Chinese(simplified)
其实还有一种修改方式，就是直接修改 ios 平台中的 -Info.plist 文件（在 ios 平台的Resources文件夹中），但每次重新构建后都要重新配置，所以不推荐这种方式。
6. 调用相机时秒退的问题，原因是没有进行权限请求设置，导致调用相机时，直接崩溃，解决办法是：需要在 config.xml 配置文件中的<platform name="ios"> 中添加如下代码：
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>需要获取调用相机权限</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
<string>需要获取手机相册权限，读取图片</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" arget="NSLocationWhenInUseUsageDescription">
<string>需要获取定位信息</string>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
<string>需要获取手机相册权限，保存图片</string>
</edit-config>
同样需要重新构建 ios 平台，就会自动在平台的 -Info.plist 文件中生成相应的配置了。
7. 在 iOS 中使用 iframe 应该注意的问题：
即使使用了 DomSanitizer 的 bypassSecurityTrustResourceUrl 方法，还是会出现 iframe 加载页面时一片空白的问题，这是因为在 iOS 下 iframe 加载外部页面需要对链接地址设置授权，具体做法为在 config.xml 配置文件中添加如下配置，使 iframe 可接受任意链接地址：
<access orgin="*" />
<allow-navigation href="*" />
注： <access orgin="*" /> 在新版ionic4中是默认配置，如果有就不用再加了。
另外一个问题就是，在 ios 中 iframe 加载页面可能会出现超宽的问题（就是 iframe 的宽度超过了 100%），导致页面无法完全显示，出现这种情况时可以尝试使用以下方法处理（仅限 iOS）：
给 iframe 外面套上一层 div，将该 div 样式设置为：
{
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
给 iframe 设置如下的属性和样式：
<iframe [src]="safeResourceUrl" frameborder="0" height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;">
</iframe>
值得注意的是，在 Android 下并不存在超宽的问题，加入以上这些设置后会导致在 Android 平台下 iframe 内容无法滚动，这主要是因为将 iframe 中的 scrolling 属性设置为 no 的原因（其它属性和样式影响并不大），因此为了兼容，需要通过 ionic 的 Platform 对运行平台进行判断，在 Android 平台时，应该将 iframe 的 scrolling 属性设置为 yes。
8. 上架 AppStore 时遇到的问题
在 XCode 中执行 Product -> Archive 时，有时 Archive 选项为灰色不可点击，这时将调试机型选择为 Generic iOS Device（通用iOS设置）就可以了。
在 Archive 的过程中，如果出现类似 Code signing is required for product type 'Application' in SDK 'iOS 12.0' 的错误，可以按以下步骤进行处理：
选择 Build Settings -> signing -> Code Signing Identity，设置为 iOS Develper，
然后执行 clean，重启 XCode（重要）
以上便是我在使用新版 ionic4.12 开发项目以及调试打包过程中遇到的各种坑，在此做一个经验总结，以做备忘之用，也希望对看到此篇文章的小伙伴有所帮助，希望大家少走一些弯路，少踩一些坑。
网友评论