5年与ionic再相识--ionic构建混合式移动开发工程

好久没做过移动端开发了，最近又要启动，上次做的时候好像还是5年前吧，最早用的cordova+jqmobile，后来转向ionic，当时还是angular2，后来听说ionic升级了几次，变化都挺大的，年初疫情在家，看了几天angularjs7，算是做个准备吧，废话少说，先看官网。

建立一个ionic工程的基本流程
先create，然后添加相应的platform，然后开发页面，编译，copy到相应的platform中，如果需要插件再加，编译，打包调试。

但是在使用cli的过程中，发现现在新加入了capacitor，这个是ionic官方团队在维护的一个项目，用来整合页面和原生的部分，以及在开发过程中更方便的用cli来完成一些操作，基本上是照着替代cordova的思路走的，后面会详细介绍。

以下整理用capacitor和cordova分别构建工程
使用capacitor

ionic start myapp tabs
cd myapp
npx cap init myapp com.myapp
ionic build
npx cap add android
npx cap open android

最后这步，会直接把你已安装好的android studio启动起来，工程也自动导进来，包括启动配置也都好了，是不是很方便？
接下来就可以在src目录进行开发，然后编译，同步到android工程，不过这样很麻烦，有没有调试热加载，不用每次都打包更新到手机？答案是肯定的！
ionic capacitor run android -l --host=192.168.1.40
通过这个命令，会在本地启动一个web，然后到android studio中run或debug，会打开模拟器或直接安装到手机（手机连接），app启动后会连到host指定的地址，每次src下页面或js发生变化，会增量编译更新，手机上可以马上看到效果，因为此时的app里嵌入的是一个url，页面都是在电脑端的。
此时，可以通过chrome://inspect，进入调试页面，和手机看到的实时同步，js，css调试都很方便。

使用cordova
ionic start myapp tabs
cd myapp
ionic cordova prepare android //会自动准备基本的插件，并提示完成android platform的add安装
根目录下的config.xml中，可以修改app的name和id

刚才那个开发在线调试，是不是很香？是的，cordova也可以，只是可能会有点坑。
ionic cordova run android -l --host=192.168.1.40
如果你运气好，上面命令运行完毕，你的模拟器或手机app就直接打开了，并显示相应的页面，然后就可以用chrome://inspect进行调试了
如果提示ERR_CLEARTEXT_NOT_PERMITTED，接着往下看，到config.xml中找到如下段落

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:networkSecurityConfig="@xml/network_security_config" />
    <application android:usesCleartextTraffic="true" />
</edit-config>

把这个加上
<application android:usesCleartextTraffic="true" />
重新编辑，打包，启动，应该就可以了

上述对比完，cordova后续这么麻烦要设置cleartext，还有存在的意义吗？答案也是肯定的。why?

我有那么多时间专门为了对比而对比capacitor和cordova吗？都是踩坑踩出来的啊！
刚开始用cordova，create，然后platform add，android工程也生成了，可用android studio导入就是启动不起来，这是这报错，就是那报错，当时也没注意cli的提示，后来发现了capacitor，一路顺畅，然后看了官方的介绍，决定用capicitor，建工程，建版本库，准备各种插件的基础调用，问题来了，在测试cordova-file插件的时候，read之后的回调怎么都回不来，在andorid工程里下断点，FileUtil中读取返回都正常，但promise就是不响应，后来google发现大家都在提polyfill.js和cordova.js的顺序问题，大部分把cordova.js放到polyfill.js后面就解决了，到此分析，应该是js中有些冲突，但是通过capacitor构建的android工程中，index.html中根本就没有cordova.js,这怎么调？？？问题是cordova.js到哪儿去了？没有这个，plugin怎么能工作？带着一系列疑问，翻了下capacitor构建的android工程代码，原来是通过JsInjector，将cordova.js和其他一系列需要的js，在app显示index.html页面时，动态注入到index.html的head中的。

到此，选择cordova，还是capacitor，自己看着办吧，用capacitor，可能还有有其他插件，面临同样的潜在的js冲突，基本思路是找替代方案，比如File插件的read回调不响应，可以换capacitor官方提供的Filesystem，而且是不用安装的，默认带的就有，而cordova，因为已经很成熟了，插件也比capacitor官方的多，只是在开发调试过程中会有那么一点点不够完美（比如不会自动导入android studio并生成配置，在线调试是通过命令行，不是android studio，不能给java下断点，也可能是我不知道，有知道的留言告诉我）。

对了，上面说的那个cleartext，capacitor启动的时候，会自动在配置项里加上，这点很方便，个人还是很倾向capacitor。