前端技術:
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圖示以及啟動頁的配置
部分截圖展示
首頁展示 && 店鋪列表
3. 其他
ionic開發文件地址