After making a wave of Cordova, I have a little bit of understanding of Hybrid. Ionic is a better choice for fast development. Its underlying packaging and communication mechanism is based on a Cordova implementation, while its upper layer implements its own UI component, which can be used in conjunction with Angular or React, and it claims to support Vue in the future.

Environment to prepare

If Cordova is already installed, then ionic installs will do; otherwise you will need to install it all together.

npm install -g ionic cordova

Create a project

Create a new Ionic project using the Start command.

ionic start my-app

It is also possible to support incoming templates, as well as project types (see Ionic Start for details).

Here we create an app based on the Angular tabs navigation.

ionic start myapp tabs --type=ionic-angular

You can also start with a more complete template.

ionic start myapp super --type=ionic-angular

Try both of them.

Run the project

Run the Web version in a browser

When I tried NPM start to call Ionic /app-scripts serve to start the project, I found that the @ionic/app-scripts module could not be found, so I tried to reinstall the module, and the node-gyp module reported the error again:

Error: Can't find Python executable "python", you can set the PYTHON env variable.

After querying node-gyp, there are two official solutions

I used the first option:

npm install --global --production windows-build-tools

PS: You must run the command line as a system administrator.

Then re-install @ionic/app-scripts and rerun the project. No problems.

npm uninstall @ionic/app-scripts
npm install --save-dev @ionic/app-scripts
npm start

Support for Android and iOS

ionic cordova platform add ios
ionic cordova platform add android

Android debug

First check whether the device is connected properly

D:\robin\frontend\hybrid\ionic\ionic-blog> adb devices
List of devices attached
5fdba1e7        device

Run the app using the command provided by Ionic CLI

// ionic cordova run android-l is short for livereload

At this point note on the phone agree to “continue to install”, otherwise it will not succeed. You will see a success message when the installation is successful.

CMD build Android --device [app-scripts] [16:05:33] lint finished in 3.95s > native run.cmd Android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device --forward 8100:8100 --forward 35729:35729 --forward  53703:53703 [native-run] Selected hardware device 5fdba1e7 [native-run] Forwarded device port 35729 to host port 35729 [native-run] Forwarded device port 8100 to host port 8100 [native-run] Forwarded device port 53703 to host port 53703 [native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk... [native-run] Starting application activity io.ionic.starter/io.ionic.starter.MainActivity... [native-run] Run Successful

You can also type Chrome ://inspect in the Chrome browser for debugging.

The actions on the phone will sync upChromeOn the browser.

Breakpoint debugging is also supported.

Ios debugging

I’m not going to try iOS, no device…

Starting link

Scan or search the Tusi blog for the latest posts!