在ionic中使用内嵌模块，点击出黑屏是怎么回事

黑屏原因我给人理解是缺少一个父容器背景去包裹我们的目标页面，所以在尚未加载到目标页面的时候就显示黑屏。

我的解决方案是添加父容器。如果大家指导ionic的tabs就应该知道什么是父容器了。

安装cordova插件管理工具，plugman

在终端中输入：

npm install -g plugman

安装命令与安装结果如下：

2

新建一个插件myEcho，用d出框来显示我们的内容。

plugman create --name <pluginName>--plugin_id <pluginID>--plugin_version <version>[--path <directory>] [--variable NAME=VALUE]

把其中的<pluginName>替换为 myEcho

<pluginID>替换为 com.lulee007.myEcho

<version>替换为 0.0.1

[--path <directory>] [--variable NAME=VALUE] 这两个是可选参数，这里不写了。这样会在当前目录下（desktop）创建一个新的目录myEcho

在终端中输入：

plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

执行命令后会在当前目录下生成一个文件夹，我这里的目录是在桌面下的myEcho.

3

向myEcho项目中添加一个android平台

plugman platform add --platform_name <platform>

把<platform>替换为 android

接着在终端中继续输入：

cd myEcho

然后输入：

plugman platform add --platform_name android

这时候查看我们的myEcho目录下的 src会新增一个目录android里面会有一个java文件：myEcho.java

END

官方文档： Installing Ionic - Ionic Documentation

1.删除旧版本ionic

npm uninstall -g ionic

2.安装新版本

npm install -g @ionic/cli

值得注意的是，ionic的资源包变为了ionic/cli

在cmd或终端进入合适的目录，然后运行命令：

ionic start 项目名称 tabs

然后选择项目类型（Angular、React、Vue），这里选择的是Angular，回车

大概意思是是否集成capacitor，这里暂时先选NO，等待安装node_modules

是否创建ionic账号，选择NO，项目创建完成，然后进入创建的项目目录下，输入命令启动服务：

ionic serve  

启动成功！

3-1-1 添加安卓平台

ionic capacitor add android

没有www文件。尝试运行一下ionic build，然后再次运行添加平台命令，项目中多了android文件夹

因为官方并没有提供直接打包的命令，需要借助android studio来打开安卓项目，在项目中运行命令：

npx cap open android

这样直接启动android studio并打开该安卓项目

对于android studio的安装和android_SDK以及安卓模拟器的配置可以自行了解学习一下，我这里是已经搭建好的安卓开发环境。

点击运行按钮，就可以在模拟器上运行该程序

每次对ionic项目做更改需要把这些更新同步到安卓项目中，需要运行命令：

ionic capacitor copy android

3-1-2 添加iOS平台

在项目目录下运行命令： 

ionic capacitor add ios

报错了，大概是因为cocoapos没有安装或者版本过低，尝试更新一下cocoapos

打开终端，输入sudo gem install cocoapods来升级CocoaPods；

如果遇到

ERROR: While executing gem ... (Gem::FilePermissionError)

You don't have write permissions for the /usr/bin directory.

这个错误的话就改用sudo gem install cocoapods -n /usr/local/bin命令即可。

接下来删除ios文件夹，重新添加ios平台，

根据提示，用xcode打开该ios项目

npx cap open ios

点击运行按钮，在iOS模拟器上查看效果

使用cordova添加平台和以前的ionic版本是一样的，首先尝试添加一下android平台:

ionic cordova platform add android

发现报错了，提示在capacitor的项目中不可以使用cordova，如果使用cordova需要禁用capacitor：

ionic integrations disable capacitor

禁用成功。

再次添加安卓平台，提示是否集成cordova，输入y

然后又又又报错了。

这是什么鬼，以前用cordova添加平台没有遇见过，我猜测可能是跟capacitor添加的android文件冲突，于是删除android文件夹再试一次。

果然添加成功！

再尝试一下cordova能不能打包成功:

ionic cordova build android

打包也成功了。

接着又尝试了一下用cordova添加和打包iOS，跟处理android平台的方式一样，先把ios文件夹删除，再进行添加和打包 *** 作，都成功了。

事实证明，新版的ionic版本既可以集成最新的capacitor，也兼容集成cordova。

---