Windows + Android + Cordova + ionic环境搭建

原文：https://my.oschina.net/liucao/blog/598566

废话不多说，直接上干货：

一、ANT安装

  1. Apache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发。
  2.  下载地址：http://ant.apache.org/bindownload.cgi
  3. 解压，并放在非中文的目录下。（我的目录：E:\Program Files\Java\apache-ant-1.9.4）
  4. 配置环境变量：

变量名：ANT_HOME    值：既ANT的放置目录（如:E:\Program Files\Java\apache-ant-1.9.4）

变量名：path       值：%ANT_HOME%\bin;（注意用前面的变量名要用英语的  ;  隔开，下文不再重复提醒）

5.dos命令窗口测试

 
1
2
ant - version
ant - h

二、Android SDK 安装

  1. Android Studio下载地址：百度云盘
  2. Android Studio会自行安装SDK，如需要更新其它版本的SDK，请自行“科学上网”解决问题。
  3. 附SDK离线版：百度网盘
  4. 配置环境变量：

变量名：ANDROID_SDK_HOME    值：SDK目录（E:\Android\Sdk）

变量名：path      值：%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;

4.DOS命令窗口测试

 
1
2
3
android - h
adb version
android list avd

三、NODE.JS安装

  1. 下载地址：https://nodejs.org/
  2. 按PC平台下载相应的安装包，直接双击安装既可，环境变量都会自行配置，不用手动操作。
  3. DOS测试命令
     
    1
    npm - v

     

四、GIT安装（代码版本库管理软件）

  1. 下载地址：http://git-scm.com/download/
  2. 下载相应PC平台的安装包，直接双击安装既可。
  3. DOS测试命令
     
    1
    git -- version

     

五、Cordova + ionic 安装

    1. DOS命令安装，耐心等待，不成功的请多次尝试。
       
      1
      2
      3
      npm install - g cordova ionic //安装
       
      npm update cordova / ionic - g    //更新，此代码不用运行，如果当Cordova有更新版本时使用。

      安装路径：
      C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova[ionic]
    2. 创建Cordova项目：
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      //在任意非中文目录下创建项目目录：如E:\cordova
      //按住SHIFT+鼠标右键，点“在此处打开命令窗口”
       
      cordova create myapp com . yourname . myapp MyApp
       
      //myapp为目录名；com.yourname,myapp为项目路径；MyApp为项目名
      //此时就会有  E:\cordova\myqpp
       
      cd myapp    //进入到项目目录
       
      //添加平台：
      cordova platform add ios
      cordova platform add android
       
      //移除平台：
      cordova platform rm android
       
      //编译平台：
      cordova build android
      [实为： ]
      cordova prepare android
      cordova compile android
       
      //查看平台：
      cordova platfrom list
       
      //添加插件：（更多插件：http://plugins.cordova.io/）
      cordova plugin add org . apache . cordova . device                    //设备API
      cordova plugin add org . apache . cordova . network - information    //网络（事件）
      cordova plugin add org . apache . cordova . battery - status        //电池（事件）
      cordova plugin add org . apache . cordova . device - motion      //加速器
      cordova plugin add org . apache . cordova . device - orientation      //罗盘
      cordova plugin add org . apache . cordova . geolocation          //定位
      cordova plugin add org . apache . cordova . camera                  //摄像头
      cordova plugin add org . apache . cordova . media - capture      //媒体文件处理
      cordova plugin add org . apache . cordova . media                    //媒体文件处理
      cordova plugin add org . apache . cordova . file                          //文件访问
      cordova plugin add org . apache . cordova . file - transfer            //文件传输
      cordova plugin add org . apache . cordova . dialogs                  //对话框
      cordova plugin add org . apache . cordova . vibration                //震动
      cordova plugin add org . apache . cordova . contacts                //联系人
      cordova plugin add org . apache . cordova . globalization        //全球化
      cordova plugin add org . apache . cordova . splashscreen        //闪屏
      cordova plugin add org . apache . cordova . inappbrowser              //打开新的浏览器窗口
      cordova plugin add org . apache . cordova . console                  //调试控制台
       
      //查看已安装：
      cordova plugin ls
       
      //删除插件：
      cordova plugin rm org . apache . cordova . console
       
      //更新Cordova:
      npm update - g cordova
       
      //更新平台项目：
      cordova platform update android
       
      //Cordova帮助：
      cordova help

       
    3. 创建 ionic 项目：
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      //创建空白模板
      ionic start myapp blank
       
      //创建tabs模板
      ionic start myapp tabs
       
      //创建sidemenu模板
      ionic start myapp sidemenu
       
      其他的一些操作只要将上面 Cordova 替换成 ionic 就能执行相同的操作。
    4. 浏览器调试：
       
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      //进入项目根目录执行
      ionic serve
       
      //出现在如下提示，选择以什么地址显示1、IP;2、localhost;这里按个人意愿随意选择
      Multiple addresses available .
      Please select which address to use by entering its number from the list below :
      1 ) 192.168.0.103
      2 ) localhost
      Std in before prompt
      Address Selection :
       
      选择完后，就会自动用默认浏览器打开调试页面
    5. 附上cordova的API：http://cordova.apache.org/docs/en/3.0.0/index.html
    6. 插件：http://plugins.cordova.io

 

posted on 2016-10-25 17:02  杭州糊涂虫  阅读(127)  评论(0)    收藏  举报

导航