Ionic 2 开发大全 #20
Description
搭建开发环境
环境安装
1.Windows 平台
npm install -g cordova ionic
# 安装ant
# 系统环境变量中配置android sdk路径
2.iOS 平台
sudo npm install -g cordova ionic
sudo npm install -g ios-sim
ionic platform add ios # 添加ios平台
ionic build ios # 构建ios项目
ionic emulate ios # 模拟器运行
ionic run ios # 连接真机后直接运行
模拟器运行
- 支持模拟器运行
- npm install -g ios-sim
- 列出 iOS 设备类型
- ios-sim showdevicetypes
- 模拟器运行
- ionic emulate ios --target="iPad-Air"
- 开启 livereload 和 consolelogs： ionic emulate ios -l -c
- 开启日志(Logging)
- consolelogs：ionic emulate ios -c
- serverlogs：ionic emulate ios -s
命令行
1.初始化项目
- ionic start myApp [template name] --v2
- template name: blank、sidemenu、tabs
- ionic start myApp -a "My Awesome Ionic App"
- -a: appname
- ionic start myApp -i com.mycompany.appname
- -i: app id
2.添加构建的平台
- ionic platform add [platform name]
- platform name: ios、android、windows
- ionic platform remove [platform name]
3.插件管理
- ionic plugin add [plugin id] # 添加插件
- ionic plugin rm [plugin id] # 移除插件
- ionic plugin ls # 列出已安装的插件
4.ionic 生成器
- ionic g [page|component|directive|pipe|provider|tabs]
5.预览应用程序
- ionic serve
- ionic serve -l 在浏览器中同时预览 iOS、Android、Window 平台
6.获取命令行信息
- ionic info
IDE
Visual Studio Code 插件：
- Auto Import
- Debugger for Chrome
- Document This
- Material Theme
- Beautify
- Auto Rename Tag
- Git History
- HTML Snippets
- Path Intellisense
- Angular 2 TypeScript Snippets - Johnpapa
- Angular 2 TypeScript Emmet
- Ionic 2 Commands with Snippets
- ESLint
- Code Runner
- HTML CSS Class Completion
- JavaScript(ES 6) code snippets
- REST Client
2.WebStorm
开发调试
1.Browser 调试工具
- Augury - Rangle.io 开发的 Angular 2 调试工具
2.模拟器/真机调试
- Safari 真机调试
- GapDebug Genuitec 开发的调试工具
Chrome 插件
- OneTab - 节省高达95%的内存，并减轻标签页混乱现象
- Proxy SwitchyOmega - 轻松快捷地管理和切换多个代理设置
- QR Code Generator - 二维码生成器
- Octotree - Code tree for GitHub
- CORS Toggle - Allow/Disable Cross Domain Request.
- Augury - Rangle.io 开发的 Angular 2 调试工具
- Postman - 功能超级强大 HTTP Client
抓包工具
- Fiddler for Windows - Fiddler是一个 HTTP 协议调试代理工具
- Fiddler-AddOns - Fiddler 插件
- Fiddler CertMaker for iOS and Android - HTTPS 证书生成插件
- HTTPS以及Fiddler抓取HTTPS协议 - APP HTTPS 抓包
- Charles for Mac Mac下HTTP 协议调试代理工具
其他工具
- Shadowsocks
官方资源
英文资源
中文资源
Ionic 2 - 博客(英文)
Angular 2 - 博客(英文)