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

so丶簡單發表於2018-09-07

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

前端技術:

Angular4.x + ionic3.x + cordova

專案執行:


git clone git@github.com:EasyTuan/ionic-cordova-demo.git

# 國內映象加速節點:git@gitee.com: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 規則
複製程式碼

2.2 已完成功能

  • 底部tabbar的跳轉
  • 元件間的通訊
  • 二級頁面的跳轉
  • http請求通訊
  • app圖示以及啟動頁的配置

部分截圖展示

首頁展示 && 店鋪列表

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

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

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

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

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

3. 其他

ionic開發文件地址

ionicframework.com/docs/

4. 友情連結

專案完整版本(基於mui)

License

MIT

相關文章