項目地址
如遇網(wǎng)絡(luò)不佳，請移步國內(nèi)鏡像加速節(jié)點
前端技術(shù):
Angular4.x + ionic3.x + cordova
項目運行:
git clone git@github.com:EasyTuan/ionic-cordova-demo.git
# 國內(nèi)鏡像加速節(jié)點: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 開發(fā)環(huán)境配置
# 安裝ionic和cordova
npm install -g cordova ionic
# 安裝項目依賴
npm install
1.2 開發(fā)過程
1.2.1 命令
# 在瀏覽器中啟動項目
ionic serve
# 添加android平臺
ionic cordova platform add android
# usb連接安卓手機運行
ionic cordova run android
1.3 發(fā)布
# 打包
npm run build
2. 業(yè)務(wù)介紹
2.1 小程序業(yè)務(wù)入口
入口地址為 src/app/app.module.ts
目錄結(jié)構(gòu)
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 * 代碼風(fēng)格配置文件
├── .gitignore * git忽略目錄
├── LICENSE
├── README.md
├── config.xml * Cordova配置文件
├── ionic.config.json * Ionic配置文件
├── package.json * 依賴配置文件
├── tsconfig.json * TypeScript配置選項
└── tslint.json * 定義 TypeScript 規(guī)則
2.2 已完成功能
- 底部tabbar的跳轉(zhuǎn)
- 組件間的通信
- 二級頁面的跳轉(zhuǎn)
- http請求通信
- app圖標(biāo)以及啟動頁的配置
部分截圖展示
首頁展示 && 店鋪列表
3. 其他
ionic開發(fā)文檔地址
