一個基於Ionic3.x cordova的移動APP demo

摘要： 專案地址 , 如遇網路不佳，請移步國內映象加速節點 前端技術: Angular4.x + ionic3.x + cordova 專案執行: git clone [email protected]:EasyTuan/ionic-cordova-demo.git # 國內...

ofollow,noindex">專案地址 , 如遇網路不佳，請移步國內映象加速節點

前端技術:

Angular4.x + ionic3.x + cordova

專案執行:

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

# 國內映象加速節點:[email protected]:easytuan/ionic-cordova-demo.git

# 全域性安裝ionic和cordova
npm install -g cordova ionic

# 安裝專案依賴
npm install

# 在瀏覽器中啟動專案
npm run serve

# 新增android平臺
ionic cordova platform add android

# usb連線安卓手機執行
npm run dev

複製程式碼

專案名：[A Ionic3.x project]，Ionic3.x的移動APP demo。

1. 如何執行

node版本[8.0.0]

1.1 開發環境配置

# 安裝ionic和cordova
npm install -g cordova ionic

# 安裝專案依賴
npm install

複製程式碼

1.2 開發過程

1.2.1 命令

# 在瀏覽器中啟動專案
ionic serve

# 新增android平臺
ionic cordova platform add android

# usb連線安卓手機執行
ionic cordova run android

複製程式碼

1.3 釋出

# 打包
npm run build

複製程式碼

2. 業務介紹

2.1 小程式業務入口

入口地址為src/app/app.module.ts

目錄結構

ionic-conference-app/
|
|-- resources/
|
|-- src/
||-- app/
||├── app.component.ts
||└── app.module.ts
||└── app.template.html
||└── main.ts
||
|├── assets/
||├── fonts/
|||
||├── icon/
|||
||└── images/
||
||-- components/* 元件
||
||-- pages/* 頁面
||
│├── services/* angular主題
||└── httpService.ts.scss* http請求封裝
||
│├── theme/* ionic主題配置
||└── variables.scss* 主題 Sass 變數
||
|└── index.html
|
├── .editorconfig* 程式碼風格配置檔案
├── .gitignore* git忽略目錄
├── LICENSE
├── README.md
├── config.xml* Cordova配置檔案
├── ionic.config.json* Ionic配置檔案
├── package.json* 依賴配置檔案
├── tsconfig.json* TypeScript配置選項
└── tslint.json* 定義 TypeScript 規則
複製程式碼