渐行渐进终有收获——ionic V3.10开发之路（三）

前言

这是关于 Ionic 开发踩坑的第三篇文章，前两篇分别是《Ionic V3.10 开发踩坑集锦（一）》和《Ionic V3.10 开发踩坑集锦（二）》。开发环境与上文保持一致，我们的 APP 主页使用最常见的底部 Tab，设置界面中退出登录会跳转到 Login 界面。

一开始使用的是 NavController 进行页面跳转，发现每次跳转页面都会重新加载整个页面，体验很差，决定使用 $state 进行路由跳转，效果好很多。

踩坑

坑一：$state.go 跳转页面报错

在使用 $state.go 跳转页面时，有时会遇到这样的报错：

Error: Could not resolve '$state' from 'ionic'

这是因为在 Ionic 3 中，$state 不再是 Ionic 的内置服务，需要单独安装 ionic-angular 模块才能使用。

解决方案：

npm install ionic-angular --save

然后在 app.module.ts 中导入该模块：

import { IonicModule } from 'ionic-angular';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  bootstrap: [MyApp]
})
export class AppModule {}

坑二：$ionicHistory.clearHistory() 失效

在使用 $ionicHistory.clearHistory() 清除历史记录时，有时会发现并没有起到作用，页面还是可以返回到上一个页面。

这是因为 $ionicHistory.clearHistory() 只会清除当前页面的历史记录，不会清除其他页面的历史记录。

解决方案：

如果想清除所有页面的历史记录，可以使用 $ionicHistory.clearCache() 方法。

$ionicHistory.clearCache();

坑三：ionic cordova run android 报错

在使用 ionic cordova run android 命令运行 Android 项目时，有时会遇到这样的报错：

Error: Could not find an open TCP connection on port 5039 for a debugger connection

这是因为 Android 调试桥 (adb) 没有正确连接到设备。

解决方案：

1. 确保设备已连接到电脑。
2. 确保已在设备上启用 USB 调试模式。
3. 在命令提示符中输入 adb devices 命令，查看设备是否已被识别。
4. 如果设备没有被识别，尝试重新连接设备或重新安装 adb 驱动程序。

坑四：打包后 APK 安装失败

在打包 Android 项目后，有时会遇到 APK 安装失败的情况。

这是因为打包后的 APK 文件可能包含一些与设备不兼容的代码或资源。

解决方案：

1. 确保打包时使用了正确的构建目标。
2. 确保项目中没有使用任何与设备不兼容的代码或资源。
3. 可以尝试使用不同的打包工具，如 apksigner 或 zipalign。

结语

以上就是我在使用 Ionic V3.10 进行开发时遇到的各种问题和解决方案。这些问题涵盖了开发环境的搭建、代码的编写、调试，以及最终的打包发布。相信这些经验能够帮助大家避免在开发中踩坑，少走弯路。

当然，在开发过程中遇到的问题远不止这些，这些只是其中比较常见的一部分。如果大家在开发中遇到了其他问题，欢迎在评论区留言，我会尽力为大家解答。