Ionic+Angular 开发移动应用一:环境搭建

2017-04-27 10:48

欢迎交换友链: Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

介绍

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic 特点

  • ionic 基于Angular语法,简单易学。

  • ionic 是一个轻量级框架。

  • ionic 提供了适合移动APP的UI设计

  • ionic 性能优越,运行速度快。

准备

在有点windows、linux安装环境的经验和已配好一部分环境的情况下,这次环境安装还是耗费了一天,现在前端开发真是越来越多准备工作,安装一次就再也不想动了。

本文讲叙述在win7和ubuntu下的配置过程。

安装ionic

$ npm install -g
$ ionic info
******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

Your system information:

 You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed //mac下再装 npm install ios-deploy -g
ios-sim version: Not installed  //mac下再装 npm install ios-sim -g
OS: Windows 7
Node Version: v7.6.0
Xcode version: Not installed


******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

cordova

$ npm install -g  cordova
$ cordova -v  // 必须运行一下,待会会问是否匿名跟踪日志,必须回答才能生效
? May Cordova anonymously report usage statistics to improve the tool over time? (t/n)

安卓SDK

为了打包成安卓APP

下载地址: http://tools.android-studio.o...
备用下载: http://pan.baidu.com/s/1bYhyai 密码: m3rg

windows:

先下载java jdk安装 java 环境,1.8以上版本,添加java环境变量:

  • 系统变量添加(不是“Administrator的用户变量”):

    JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121
    # 安装地址,之前有配过其他版本java,直接改这里JAVA_HOME的地址,path就不用管了

    CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    # %JAVA_HOME% 前面有个 .;
  • PATH添加:

    %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

解压android-sdk压缩包,放到一个空间较大的磁盘,找到SDK Manager更新SDK Manager,安装默认选择的13个包,再点击每个包变成打钩状态,再install。安装很久,有十几G。

添加环境变量:

  • 系统变量添加(不是“Administrator的用户变量”):

    ANDROID_HOME=C:\android-sdk-windows // 压缩包解压地址
  • PATH添加:

    %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

tools目录运行android命令,platform-tools目录运行adb命令

ubuntu

参考 https://gist.github.com/wenzh...

安装java环境

$ sudo apt-get install openjdk-8-jre-headless
# $ java -version
# 安装andoid-sdk用

$ sudo apt-get install openjdk-8-jdk
# javac -version
# 打包android应用用

解压安卓SDK压缩包,进入tools文件,运行(要安装很久):

android update sdk --no-ui

添加环境变量,命令行输入:

$ vi ~/.bashrc

vim命令: crtl+end-到底部,i-输入,ESC-退出输入,:x -保存退出,:q! -不保存退出vim, :w -保存文档,但不退出vim

添加:

# andoid
export ANDROID_HOME=/home/laker/Downloads/android-sdk-linux #前面压缩包解压地址
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
$ source ~/.bashrc

Ionic Lab

Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,可以用 Ionic Lab 编译,运行,和模拟运行Ionic的应用程序。
支持Window、Mac OS X、Linux。已于16年12月停止维护。
备用下载: http://pan.baidu.com/s/1i4GYflV 密码: ac14