Item address. If the network is poor, go to the domestic mirroring accelerator

Front-end technology:

Angular4.x + ionic3.x + cordova

Project operation:


git clone [email protected]:EasyTuan/ionic-cordova-demo.git

# Domestic image accelerator :[email protected]: Easytuan/Ionic -cordova-demo.git

Install ionic and Cordova globally
npm install -g cordova ionic

Install project dependencies
npm install

Start the project in the browser
npm run serve

# Add android platform
ionic cordova platform add android

# Usb connection to android phone to run
npm run dev

Copy the code

Project name: [AN Ionic3.x Project], ionic3.x mobile APP Demo.

1. How does it work

The node version [8.0.0]

1.1 Development Environment Configuration


Install Ionic and Cordova
npm install -g cordova ionic

Install project dependencies
npm install

Copy the code

1.2 Development Process

1.2.1 command


Start the project in the browser
ionic serve

# Add android platform
ionic cordova platform add android

# Usb connection to android phone to run
ionic cordova run android

Copy the code

1.3 release


# packaged
npm run build

Copy the code

2. Service Introduction

2.1 Small program business entry

The entry address is SRC /app/app.module.ts

The directory structure

Ionic - conference - app / | | - resources / | | - SRC / | | - app / | | ├ ─ ─ app.com ponent. Ts | | └ ─ ─ app. The module. The ts | | └ ─ ─ App. The template. HTML | | └ ─ ─ main. Ts | | | ├ ─ ─ assets / | | ├ ─ ─ fonts / | | | | | ├ ─ ─ icon / | | | | | └ ─ ─ images / | | | | - Components / * component | | | | - pages / * page | | │ ├ ─ ─ services / * presents themes | | └ ─ ─ httpService. Ts. The SCSS * HTTP request package | | │ ├ ─ ─ Theme / * ionic theme configuration | | └ ─ ─ the variables. The SCSS * theme Sass variable | | | └ ─ ─ index. The HTML | ├ ─ ─ the editorconfig * code style profile ├ ─ ─ Git. Gitignore * ignore directory ├ ─ ─ LICENSE ├ ─ ─ the README. Md ├ ─ ─ config. The XML * Cordova configuration file ├ ─ ─ ionic. Config. The json * ionic configuration file ├ ─ ─ Package. json * Dependent configuration file ├── tsconfig.json * TypeScript configuration options ├── tslint.json * Define TypeScript rulesCopy the code

2.2 Functions have been completed

  • Bottom tabbar jump
  • Communication between components
  • Jump to secondary page
  • HTTP request communication
  • App icon and startup page configuration

Partial screenshots show

Home page display && store list

3. The other

Ionic development document address

ionicframework.com/docs/

4. Links

Full version of the project (based on MUI)

License

MIT