前言
先建一个ionic项目。
全局安装ionic/cordova
环境
npm install -g cordova ionic // 安装后可通过: cordova -v / ionic -v 查看版本
创建一个ionic项目
ionic start appName tabs // appName为项目名,tabs为ionic的一个基础项目,可选:{blank|tabs|sidemenu}
安装依赖:npm install
运行与调试项目
1) 在浏览器运行或是在ionic提供的实验室运行,对于一些需调用手机服务的功能(如选择照片)无法调试,不推荐
ionic serve // 在浏览器运行项目
ionic serve --lab // 在ionic lab中访问,会在浏览器打开
2)在模拟器中运行测试,试过使用Genymotion
,速度非常慢,也不推荐
$ ionic platform add {ios|android} // 添加平台ios/android,只需添加一次,位于```platforms/```
$ ionic build {ios|android} // 生成对应平台的项目,前提:已安装对应环境(安卓为JAVA_HOME+ANDROID_HOME)
$ ionic emulate {ios|android} // 在模拟器中运行
or:
ionic run {ios|android} // 在模拟器已启动且无手机连接电脑的情况下,此命令也会在模拟器上启动项目
3)真机测试
手机连接电脑,开启手机USB调试功能,在手机上安装测试应用进行测试。
ionic platform add {ios|android}
ionic run {ios|android}
ionic run android
此命令可加参数 -l -s -c
,可在命令行查看log,配合抓包工具(如fiddler
),进行调试
-l: -liveload 热更新,当文件改变,自动刷新页面
-s: -server 服务端
-c: -client 客户端
4) 自定义命令
在gulpfile.js中自定义任务启动项目
附开发相关链接
附:ionic前端开发官方文档相关链接