了解 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
网友评论