After a run of Cordova, I have a slight understanding of Hybrid. Ionic is a better choice for rapid development. Its underlying packaging and communication mechanism is based on Cordova, and it has its own UI components on top that can be used with Angular or React. It also boasts Vue support in the future.

Environment to prepare

If you already have Cordova installed, install ionic separately.

npm install -g ionic cordova
Copy the code

Create a project

Create an Ionic project with the start command.

ionic start my-app
Copy the code

It also supports incoming templates, as well as project types, see Ionic Start.

Here we create an Angular Tabs navigation app.

ionic start myapp tabs --type=ionic-angular
Copy the code

It is also possible to start with a more complete template.

ionic start myapp super --type=ionic-angular
Copy the code

Try both.

Run the project

Run the Web version in your browser

Ionic /app-scripts/node-gyp/node-gyp/node-gyp/node-gyp/node-gyp/node-gyp/node-gyp

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

After querying Node-gyp, two solutions are provided

I chose the first option:

npm install --global --production windows-build-tools
Copy the code

Ps: You must run the cli as a system administrator.

Then re-install @ionic/app-scripts and re-run the project. No problem.

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

Supports Android and ios

ionic cordova platform add ios
ionic cordova platform add android
Copy the code

Android debug

First check whether the device is properly connected

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

Run the app using the commands ionic CLI provides

// -l = livereload ionic cordova run Android-lCopy the code

At this point note on the phone agree to “continue installation” **, otherwise it will not succeed. If the installation succeeds, a message is displayed indicating that the installation succeeds.

> cordova.cmd build android --device
[app-scripts] [16:05:33]  lint finished inCMD 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 SuccessfulCopy the code

You can also debug by typing Chrome ://inspect in the Chrome browser.

Actions on the phone are synced to Chrome.

Breakpoint debugging is also supported.

Ios debugging

Not ios, no device…

Starting link

Scan the code below or search the Tusi blog to read the latest articles right now!