ionic项目的启动与调试方式

前端之家收集整理的这篇文章主要介绍了ionic项目的启动与调试方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

先建一个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前端开发官方文档相关链接






猜你在找的程序笔记相关文章