zoukankan      html  css  js  c++  java
  • ionic+angularjs开发hybrid App(环境配置+创建测试项目)

    本文使用的系统是win10

    因为后期需要使用nodejs 所以先把node装好

    https://nodejs.org/download/

    下载JDK并配置Java运行环境

    http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

    安装后配置环境变量 如下:

    新增JAVA_HOME:(自己的安装路径和版本)

     C:Program FilesJavajdk1.8.0_73

    (注意:JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径,此路径下包括lib,bin,jre等文件夹。)配置如图

    编辑path环境变量:

     

     %JAVA_HOME%in;

     

    在系统变量Path的值的最前面加入。否则可能在运行时,系统选择部署在前面的jre环境。(注意:Path使得系统可以在任何路径下识别java命令)

    新增CLASSPATH:

    .;%JAVA_HOME%lib

    注意: 点号表示当前目录,不能省略( CLASSPATH为java加载类(class or lib)路径,只有类在classpath中,java命令才能识别)

    测试环境是否配置成功:“开始”->“运行”,键入“cmd”,键入命令“java -version”,出现下图画面,说明环境变量配置成功。 (win键+R–>cmd –>回车)

    配置Apache-ant:(在path变量里编辑)

    下载Apache Ant 并将其bin目录路径添加进Path路径

    http://mirror.tcpdiag.net/apache/ant/binaries/

    下载完成后解压 ,如存放在C盘 Program Files目录下则Path中添加如下值 C:Program Filesapache-ant-1.9.4in;并添加path环境变量(添加方法和java配置path变量是一样的,注意以 ; 隔开每个环境变量的值,如上图path值)

    C:Program Filesapache-ant-1.9.4in

    测试Apache-ant是否配置好

    下载、配置Android Studio

    推荐:http://rj.baidu.com/soft/detail/27390.html?ald

    下载后进行安装,会提示选择SDK安装路径,我们主要使用的就是这个SDK。

    完成安装后

    增加ANDROID_HOME环境变量:

    C:UsersAdministratorAppDataLocalAndroidsdk

    在path变量中添加:

    %ANDROID_HOME%platform-tools;  
    %ANDROID_HOME%	ools;  

    如上 环境就配置好了

    创建一个ionic项目

    安装Ionic 和 Cordova(将cordova和ionic包安装到全局环境中)

    win+R–>cmd(管理员)

    根据网络环境,安装的时间有所不同

    npm install -g cordova ionic

    安装完成后,就可以创建一个Ionic项目(官方提供的)

    ionic start myApp tabs(底部导航)
    ionic start myApp blank(空白项目)
    ionic start myApp sidemenu(侧边导航菜单)

    启动ionic项目

    cd myApp(myApp为项目名称)
    ionic serve

    键入ionic server后,会自动在浏览器打开项目。

    编译成Android apk

    ionic build android

     

  • 相关阅读:
    第10组 Alpha冲刺 (2/6)
    第10组 Alpha冲刺 (1/6)
    第10组(72) 需求分析报告
    团队介绍及选题报告
    实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用
    第03组 Alpha冲刺 总结
    第03组 Alpha冲刺 (6/6)
    第03组 Alpha冲刺 (5/6)
    第03组 Alpha冲刺 (4/6)
    第03组 Alpha冲刺 (3/6)
  • 原文地址:https://www.cnblogs.com/jyichen/p/5471658.html
Copyright © 2011-2022 走看看