Introduction to ionic

Time:2021-4-7

1. Introduction to ionic

Ionic is a powerful HTML5 mobile application framework based on Angualr and Cordova, which can quickly create a cross platform mobile application. It can quickly develop mobile app, mobile web page, wechat public platform application, mixed app and web page

2. The relationship between ionic and Cordova, Angualr

Ionic = Cordova + Angualr +Ionic css
Ionic is completely based on Google’s angular framework, and has done some encapsulation on the basis of Angualr, so that we can develop mobile projects more quickly and easily. Ionic calls native functions based on Cordova. Cordova provides native functions using JavaScript. Ionic also encapsulates a beautiful CSS UI library

3. Introduction of ionic development tools

(1).webstrom
(2) . visual studio code (recommended)

4. Installation and operation of ionic

1. Nodejs needs to be installed
2. Install NPM install – G Cordova ionic
3. Create project: ionic start myapp tabs / blank / sidemenu
4. CD to the project CD myapp just created
5. Run the project ionic serve

5. What should I do if the installation of ionic fails sometimes?

1. Check your nodejs version
2. Install cnpm

npm install -g cnpm --registry = https://resistry.npm.taobao.org
   In the future, all NPM can be replaced by cnpm

3.cnpm install -g cordova ionic

6. Ionic3. X directory structure analysis

1.mode_ Modules: node all kinds of dependent packages
2. Resource: Android / IOS resources (icon and startup page)
3. SRC: development work directory, pages, styles, scripts and pictures are all placed in this directory
4. WWW: static files
5. Platforms: generate Android or IOS installation package path
6. Plugins: plug in folder. There are various plug-ins installed by Cordova
seven config.xml : configuration file packaged as app
eight package.json : configure the metadata of the project and the dependencies needed to manage the project
nine tsconfig.json : the root directory of a typescript project, specifying the root file and compilation options used to compile the project
ten tslint.json : format and verify typescript

7. Compile project

ionic cordova platform add browser
ionic build browser –prod –release