Windows + Android + Cordova + ionic环境搭建

jopen 9年前

废话不多说,直接上干货:

一、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命令窗口测试

</tr> </tbody> </table> </div> </div>

二、Android SDK 安装

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

变量名:ANDROID_SDK_HOME    值:SDK目录(E:\Android\Sdk)

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

4.DOS命令窗口测试

1
2
</div> </td>
ant - version
ant - h
</tr> </tbody> </table> </div> </div>

三、NODE.JS安装

  1. 下载地址:https://nodejs.org/
  2. 按PC平台下载相应的安装包,直接双击安装既可,环境变量都会自行配置,不用手动操作。
  3. DOS测试命令
1
2
3
</div> </td>
android - h
adb version
android list avd
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

来自: http://my.oschina.net/liucao/blog/598566