初尝 Ionic 和 Capacitor

了解 Ionic 和 Capacitor

Ionic 是一个经久不衰的跨端 UI 开发框架，使用者可以用它结合 Html 等 web 相关技术来开发应用程序。
应用程序会涉及到系统或者是设备上的一些操作，比如：读写文件，在手机上获取定位信息等。这些功能是Cordova 来支持的。
而 Capacitor 更像是 Cordova 的替代品。
Ionic 目前支持 React 或 Angular 框架来开发 iOS， Android， 桌面应用（利用 Electron 来实现 Windows，Linux，Mac) 上的应用程序开发。

Ionic 安装和使用

参考 https://ionicframework.com/docs/intro/cli 可以很轻松的实现 Ionic 的安装

$ npm install -g @ionic/cli

安装后是初始化项目

$ ionic start <项目名> <参数>

项目名称可以自定义，这里的参数代表项目的初始化模板，可以从 “tabs”， “blank”，“sidemenu”中任选其一。

成功初始化项目后，可以启动项目验证一下，

$ cd <项目名>
$ ionic serve

Capacitor 的安装和使用

在项目的根目录下，可以安装 Capacitor

$ npm install --save @capacitor/core @capacitor/cli

成功安装后，需要初始化项目。

$ npx cap init

当成功初始化后，就可以利用 Capacitor 添加项目需要支持的平台了。

$ npx cap add android
$ npx cap add ios
$ npx cap add electron

这里一口气添加了三个平台的支持。

常见问题收集

• NPM 安装 Electron 慢
  这个问题需要设置代理去解决

• Electron 因为无法找到 path 文件而无法启动
  这个问题需要重新执行 Electron 的 install.js 脚本

• Electron 项目是空白的，资源无法加载

Note: For launch the app with electron, follow these steps:(forgive my English I am native french speaker)
First of all forget about the electron folder, do not touch it.
In your react/ionic directory which is your root directory for the app,add the following in your package.json file: "homepage": "./"
Now from your react/ionic directory which is your root directory for the app, navigate to the "public" directory and update your index.html file replacing with: "<base href="./" />"
Now run the following command and that is it...
a. ionic build && npx cap copy
b. npx cap open electron