配置android环境并运行ionic app项目

在之前写了博文ionic创建App,只是单纯的通过nodejs、ionic创建App(html5站点),而未结合cordova、android直接生成app,运行在手机端。现在我们来开始实现该功能。

第一步: 准备工作

1.  下载jdk

配置android环境并运行ionic app项目_第1张图片

配置android环境并运行ionic app项目_第2张图片

2.  下载android sdk、eclipse

配置android环境并运行ionic app项目_第3张图片

配置android环境并运行ionic app项目_第4张图片

3. 下载webstorm

配置android环境并运行ionic app项目_第5张图片

第二步: 配置android环境

在环境变量中添加

1.  JAVA_HOME配置android环境并运行ionic app项目_第6张图片

2.  ANDROID_HOME配置android环境并运行ionic app项目_第7张图片

3.  在Path中添加jdk的bin和jre/bin以及android sdk的platform-tools和tools配置android环境并运行ionic app项目_第8张图片

第三步:  添加android平台

在命令行中进入之前创建的项目目录

ionic platform add android

配置android环境并运行ionic app项目_第9张图片

配置android环境并运行ionic app项目_第10张图片配置android环境并运行ionic app项目_第11张图片

配置android环境并运行ionic app项目_第12张图片

第四步: 如果项目对应的ionic lib库版本低,需要更新。

进入项目目录

ionic lib update

配置android环境并运行ionic app项目_第13张图片

第五步: 将ionic项目导入到eclipse

1.  查看ionic项目jhonse_test

配置android环境并运行ionic app项目_第14张图片

2. 找到jhonse_test项目对应的android平台源码

配置android环境并运行ionic app项目_第15张图片

3. 打开eclipse

配置android环境并运行ionic app项目_第16张图片

4. 使用eclipse的导入功能

配置android环境并运行ionic app项目_第17张图片

5. 选择jhonse_test,并导入项目。

配置android环境并运行ionic app项目_第18张图片

配置android环境并运行ionic app项目_第19张图片配置android环境并运行ionic app项目_第20张图片

第六步: 通过ionic命令编译项目

ionic build android

备注: 在修改ionic项目的时候,一定要通过ionic build android 编译一下。

配置android环境并运行ionic app项目_第21张图片

第七步: 通过webstorm工具来修改ionic项目

配置android环境并运行ionic app项目_第22张图片

第八步: 再次编译ionic项目,并运行到模拟器中。

可以通过ionic命令:

ionic emulate android

也可以直接在eclipse中运行

配置android环境并运行ionic app项目_第23张图片

配置android环境并运行ionic app项目_第24张图片

配置android环境并运行ionic app项目_第25张图片

出现需要重启adb错误。

配置android环境并运行ionic app项目_第26张图片

配置android环境并运行ionic app项目_第27张图片

第九步: 查看效果

配置android环境并运行ionic app项目_第28张图片

转载请注明:Jhonse技术博客 - 关注技术资讯以及技术文章的IT博客 » 配置android环境并运行ionic app项目

你可能感兴趣的:(ionic,android,技术文章)