基于ionic1.x移动端环境搭建基础

使用 Ionic 进行 Android 开发

环境配置

以下环境(JDKApache AntAndroid SDKNode.JS)已安装的跳过即可。IDE 可用 Visual Studio 2015 或者 Android Studio,也可用 WebStorm 。

JDK 环境

  1. 下载并安装 jdk(我的版本是 1.8.0

  2. Win + Pause 组合键打开 高级系统设置>高级,修改环境变量

  3. 新建 JAVA_HOME,值为 C:\Program Files\Java\jdk1.8.0_20\(JDK安装路径)

  4. 新建 CLASS_PATH,值为 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

  5. 在 path 后添加 ;%JAVA_HOME%\bin;

  6. Win + R 打开 cmd,输入 java,检测 jdk 是否安装成功

安装 Apache Ant

  1. 下载 apache-ant,我的是 apache-ant-1.9.6-bin.zip

  2. 解压,比如放在 C:\apache-ant-1.9.6

  3. 在环境变量中新建 APCHE_ANT,值为 C:\apache-ant-1.9.6

  4. 在 path 后添加 ;%JAVA_HOME%\bin;

  5. 在 cmd 下输入 ant 命令,检测是否安装成功

安装 Android SDK

  1. 下载 android sdk 并安装,我用的是这个 地址,版本为 r24.3.4

  2. 在环境变量中新建 ANDROID_HOME,值为 sdk 的安装目录(如果 exe 安装的,可能是 C:\Program Files\Android\android-sdk 这样,如果是解压的,可能是 D:\Program Files\adt\sdk )

  3. 在 path 后添加 platform-tools 和 tools 的目录,即 ;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

Node.JS 环境

  1. 下载并安装 node.js(我的版本是 v4.1.1

  2. 设置环境变量,在 path 后添加 nodejs 安装目录,比如 ;C:\Program Files\nodejs\;

安装 ionic

输入以下命令,将 cordova 和 ionic 包安装到全局环境中

npm install -g cordova ionic

由于 GFW,包可能下载不下来,那可以用下面这种方式(淘宝镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g ionic cordova 

开始 ionic 开发

使用 ionic tabs 模版创建一个 APP

ionic start myApp tabs

进入 APP

cd myApp

(在 www 子目录下,即可以开发普通 Web 应用的方式开发 IOS/Android 应用)

添加 Android 环境

ionic platform add android

打包生成 APK 文件

ionic build android

在 Android 模拟器或真机中模拟

ionic emulate android

可能遇到的错误

ionic build android

错误一
Error:Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at http://gradle.org/docs/1.12/userguide/gradle_daemon.html
-----------------------
Error occurred during initialization of VM
Could not reserve enough space for 1048576KB object heap
Java HotSpot(TM) Client VM warning: ignoring option MaxPermSize=256m; support was removed in 8.0

解决方案

  1. 定位到目录 C:\Users\<username>\.gradle
  2. 创建文件 gradle.properties,内容为 org.gradle.jvmargs=-Xmx512m
错误二
Error: Please install Android target: "android-22".

Hint: Open the SDK manager by running: C:\Program Files (x86)\Android\android-sdk\tools\android.BAT
You will require:
1. "SDK Platform" for android-22
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]
ERROR building one of the platforms: Error: cmd: Command failed with exit code 2

解决方案一:

打开 Android SDK Manager(sdk 管理工具,可以在 开始菜单-所有程序 中找到),在线安装 Android5.1.1(API 22)

解决方案二:

通过 这个地址 离线下载,改名为 android-22,放在 android sdk 安装目录的 platforms 下(比如我的是 C:\Program Files (x86)\Android\android-sdk\platforms)

错误三

卡死在这一步:

downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip

或者,等了很久之后,报错

1.java.net.unknownhostexception
2.java.net.socketexception:Connection reset

解决方案

直接用地址 http://services.gradle.org/distributions/gradle-2.2.1-all.zip 将 gradle-2.2.1-all.zip 下载下来,然后放在 C:\Users\<username>\.gradle\wrapper\dists\gradle-2.2.1-all\2m8005s69iu8v0oiejfej094b 目录下,再次运行命令

错误四
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':classpath'.
   > Could not resolve com.android.tools.build:gradle:1.0.0+.
     Required by:
         :android:unspecified
      > Failed to list versions for com.android.tools.build:gradle.
         > Unable to load Maven meta-data from https://repo1.maven.org/maven2/co
m/android/tools/build/gradle/maven-metadata.xml.
            > Could not GET 'https://repo1.maven.org/maven2/com/android/tools/bu
ild/gradle/maven-metadata.xml'.
               > Connection to https://repo1.maven.org refused

解决方案

在当前项目的目录下,查找 platforms\android\gradle.properties 文件(如果没有则新建),设置代理:

systemProp.http.proxyHost=10.19.110.31
systemProp.http.proxyPort=8080
systemProp.https.proxyHost=10.19.110.31
systemProp.https.proxyPort=8080

注意,代理地址如果是 ip 的话,不要写成 http://10.19.110.31 形式

ionic emulate android

错误一
ERROR : No emulator images (avds) found.
1. Download desired System Image by running: c:\Users\work\AppData\Local\Android\android-sdk\tools\android.BAT sdk
2. Create an AVD by running: c:\Users\work\AppData\Local\Android\android-sdk\tools\android.BAT avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver

解决方案

  1. 在命令行或控制台下输入 android avd
  2. 创建 emulator 并再次运行 ionic emulate android

在创建 emulator 时可能又会遇到下面的错误

错误二

在 Create new AVD 界面,出现以下提示导致 OK 按钮不可点

no cpu/abi system image available for this target

解决方案一

打开 Android SDK Manager,在线安装 Android5.1.1(API 22)下的一个组件 ARM EABI v7a System Image

解决方案二

通过 这个地址 离线下载,存放路径为 android sdk 安装目录的 system-images 下对应的 API 版本号文件夹下(比如我的是 android-22,就放在 C:\Program Files (x86)\Android\android-sdk\system-images\android-22\armeabi-v7a)

转载 http://huangtengfei.com/2016/01/start-ionic/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值