你的位置:首页 > 网页设计

[网页设计]Windows + Android + Cordova + ionic环境搭建


转自: http://dev.fjuts.com:83/blog/index.php/mobile/232.html

一、ANT安装

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

变量名:path 值:%ANT_HOME%\bin;(注意用前面的变量名要用英语的 ; 隔开,下文不再重复提醒)

5.dos命令窗口测试

ant -version
ant -h

二、Android SDK 安装

Android Studio下载地址:百度云盘
Android Studio会自行安装SDK,如需要更新其它版本的SDK,请自行“科学上网”解决问题。
配置环境变量:
变量名:ANDROID_SDK_HOME 值:SDK目录(E:\Android\Sdk)

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

4.DOS命令窗口测试

android -h
adb version
android list avd


三、NODE.JS安装

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


四、GIT安装(代码版本库管理软件)

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


五、Cordova + ionic 安装

DOS命令安装,耐心等待,不成功的请多次尝试。
npm install -g cordova ionic //安装

npm update cordova/ionic -g //更新,此代码不用运行,如果当Cordova有更新版本时使用。

安装路径:
C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova[ionic]
创建Cordova项目:
//在任意非中文目录下创建项目目录:如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


创建 ionic 项目:
//创建空白模板
ionic start myapp blank

//创建tabs模板
ionic start myapp tabs

//创建sidemenu模板
ionic start myapp sidemenu

其他的一些操作只要将上面Cordova 替换成 ionic 就能执行相同的操作。
浏览器调试:
//进入项目根目录执行
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:

选择完后,就会自动用默认浏览器打开调试页面
附上cordova的API:http://cordova.apache.org/docs/en/3.0.0/index.html
插件:http://plugins.cordova.io