iOS 项目集成 Cordova

创建完成后，目录结构如下：

创建完成后，目录结构如下：

在我们刚才创建好的 cordovaDemo 文件目录下，为我们的 cordova 添加适用平台

cordova 适用的平台 cordova platform add ios / amazon-fireos / android / blackberry10 / firefoxos / wp8 / windows8 / amazon-fireos

命令 cordova platform add ios

我们可以使用 命令 build ios

也可以使用 目录中 找到 platforms>ios>HtoolCordova.xcworkspace 运行

运行结果

1、添加 cordova.xcodeproj 到 原有的APP 项目中。

2、添加 www 目录到工程中，记得此处使用 create folder references。

3、添加 config.xml 到工程中。

4、选择工程的Build Settings->Other Links, 设置 -Objc -all_load

5、添加 Build Phases->Link Binary With Librarys添加 libCordova.a , MobileCoreServices , AssetsLibrary

此时编译下原有的 APP 查看有没有报错。

我们创建一个webviewViewController 继承自 CDVViewController ,

运行可能会报错，我们需要把头文件修改成 #import <Cordova/CDV.h> 即可

运行此时的APP，我们会去加载www文件夹中的 index.html 文件

如果我们需要访问外部链接，需要在我们的 viewWillAppear 中添加 请求

此时便可以访问外部链接，但是不在在内部APP访问，而是跳转到 手机的浏览器，修改我们上面导入的 config.xml 文件即可，在内部访问URL。

运行结果如下

官方文档： 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。

---