Windows + Android + Cordova + ionic环境搭建

jopen 8年前

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

一、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