最简单的混合APP开发框架——搭建你的第一个Ionic应用(二)

现在我们可以在浏览器上看到自己的APP了,但是在浏览器上的APP说到底还只是一个单页应用,最有成就感的应该是我们自己做的APP在真正的手机上跑起来,right?
那么,就让我们继续吧。
如何将我们的单页应用变成APP安装到真机上?

一)Android

配置android开发环境

  1. 安装ant。Apache Ant下载地址 最后不要忘记配置环境变量。
  2. 安装Java JDK 。因为android底层是采用java语言编译,因此需要在你的电脑配置java环境。JDK下载地址 下载安装完成之后不要忘记配置环境变量。
  3. 安装Android SDK。两种方法:
    1)下载Android Studio 然后在Android studio里面通过SDK Manager安装所有你需要的版本的SDK 。(tips:做好睡一觉之后再来看有没有下载完的准备)

SDK Manager如下所示:

SDK Manager

2)离线下载SDK。你也可以手动下载或者copy这些文件到你的电脑。友情提示:可以到网上搜百度云或者其他资源,毕竟百度云或者迅雷速度可能比从SDK Manager的速度要快。

最后,无论你用哪种方式,下载好sdk之后,你的电脑的sdk目录应该有这些文件:

这里写图片描述

不要忘记配置android sdk环境变量:
第一步:新建ANDROID_HOME变量,值是你的SDK文件在电脑的位置

第二步:在path变量里面,将sdk\tools文件和sdk\platform-tools文件添加进去。

这里写图片描述

扫描二维码关注公众号,回复: 4968052 查看本文章

如果你完成了上面的工作,接下来就简单了。

将你的手机通过USB连接到电脑,确认已经开启了可调试,然后在你的Ionic项目里面运行:ionic cordova run android
如果一切顺利,app会编译成功之后自动安装到你的手机上,接着自动打开app。如果没有找到连接的手机,那么会自动打开android adk里自带的android模拟器。
如果报了什么错,不要慌,八成是android环境没有配置好。

二)iOS

  • 首先你要有一台mac,安装Node到这台mac上,运行 npm install -g ionic cordova
  • 我猜你的Mac应该已经装了Xcode了,如果真的没有,下载安装Xcode7以上版本。登录开发者账号

  • 打开你的ionic项目,运行 ionic cordova build ios
  • 编译成功之后,在resources/ios下面找到 **.xcodeproj文件,使用Xcode打开。

这里写图片描述

  • 配置苹果开发者证书,看我的这篇博客
    你只需要生成证书的时候将那篇文章里面所有production版本换成develop版本。
    开发阶段不配置证书也可以,只要你在Xcode登陆了开发者账号,可以选择自动生成证书,那么你就什么都不要管了。不过最后发布到APP Store的时候你可能还要回来看我的那篇博客。

  • 连接手机,点击Xcode的运行,自动安装。

猜你喜欢

转载自blog.csdn.net/liujiawei00/article/details/76618558