首页 > 代码库 > Android开发学习--Ionic+Cordova 环境搭建
Android开发学习--Ionic+Cordova 环境搭建
我们看 Ionic 能给我们提供什么? 一个样式库，你可以使用它 来 装饰你的 HTML 网页 ，看起来 想 移动程序的 界面，什么 header 、content、footer、grid、list。这貌似没什么 实质性的东西， sencha touch ，jq 都能提供 。一个用 AngularJS 写的 工具库，姑且叫它 组件库吧。Ionic的 grid 设计的比较合理，比 bootstrap的 更强大。当然它 还包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router，适应移动平台的模块库。
Apache Cordova 提供用 javascript 访问 移动平台 的 API 。
其内部是用每个 平台下的 web view 组件，运行 程序，然后实现了 每个平台下的 一套 CordovaLib 供你写的程序调用，然后你就可以 调用 摄像头、磁盘等的api。
1. 安装node环境
nodeJs环境的安装很简单，去官网下载最新版的NodeJs直接安装即可。
Node官网： https://nodejs.org/
安装完成后配置环境变量,计算机->属性->高级系统设置->环境变量->用户变量->(选中PATH变量)->编辑->在变量值后加入node路径,与其他变量值用;隔开
配置完成后在cmd中输入 npm -v 回车。如果出现版本号说明安装成功。
(未成功自行百度配置node环境)
2. 安装jdk并且配置环境变量
jdk下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安装完成以后配置环境变量：
JAVA_HOME（安装路径有空格会无效）(系统变量):
JDK的安装路径，这个环境变量本身不存在，需要创建，其值为：jdk在你电脑上的安装路径。
PATH(系统变量)：
PATH属性已存在，可直接编辑。作用是用于配置路径，简化命令的输入，其值为：%JAVA_HOME%\bin。
CLASSPATH（系统变量）：
用于编译时JAVA类的路径，注意这里设置的是两个值，(.;)表示的是JVM先搜索当前目录。其值为：.;%JAVA_HOME%\lib\tools.jar。
配置完毕后，通过cmd运行以下命令：java -version， 如果出现返回信息，则设置成功。
3. 安装Android SDK.
下载地址1： http://developer.android.com/sdk/index.html 这个地址被墙了。需要FQ使用。
下载地址2：http://www.android-studio.org/ 这是Android studio中文社区地址
这里可以只下载Android SDK 不需要一并下载 Android Studio。下载完成并安装然后向用户变量Path中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。例如：
C:\Program Files (x86)\Android\android-sdk\tools;
C:\Program Files (x86)\Android\android-sdk\platform-tools;
如果发现Android SDK安装目录中并没有 “ platform-tools”这个文件夹，应该运行tools目录下的android.bat文件，然后出现如下界面，勾选Android SDK Platform-tools 然后安装。
环境变量配置完成以后在cmd中输入 android并且回车。如果出现android sdk manager则说明安装成功。
4. 安装 Apache ant.
ant下载地址： http://ant.apache.org/bindownload.cgi
环境变量：
Windows下ANT用到的环境变量主要有2个： ANT_HOME 和 PATH。
eg：
1. 设置ANT_HOME指向ant的安装目录(系统变量)。
设置方法：ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6
2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%\bin; %ANT_HOME%\lib添加到x变量的path中。
设置方法：PATH = %ANT_HOME%\bin; %ANT_HOME%\lib
安装如果不成功可以把%ANT_HOME%换成真实的路径。
如: D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib
安装完成以后在cmd中输入 ant -version 验证是否安装成功。
5.使用npm下载ionic
C:\Users\lemon>npm install -g ionic
C:\Users\lemon\AppData\Roaming\npm\ionic -> C:\Users\lemon\AppData\Roaming\npm\node_modules\ionic\bin\ionic
C:\Users\lemon\AppData\Roaming\npm
`-- ionic@3.5.0
6.用npm命令安装cordova
C:\Users\lemon>npm install -g cordova
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
C:\Users\lemon\AppData\Roaming\npm\cordova -> C:\Users\lemon\AppData\Roaming\npm\node_modules\cordova\bin\cordova
C:\Users\lemon\AppData\Roaming\npm
`-- cordova@7.0.1
7.创建项目
C:\Users\lemon>ionic start todo blank
[WARN] Git CLI not found on your PATH. You may wish to install it to version control your app.
See installation docs for git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Use --no-git to disable this warning.
√ Creating directory .\todo - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template blank (https://github.com/ionic-team/ionic2-starter-blank/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
? ? ? ? Your Ionic app is ready to go! ? ? ? ?
Run your app in the browser (great for initial development):
ionic serve
Run on a device or simulator:
ionic cordova run ios
Test and share your app on a device with the Ionic View app:
http://view.ionic.io
8.配置平台
C:\Users\lemon\todo>ionic cordova platform add android
? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? Yes
> npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
√ Running command - done!
> cordova platform add android --save
√ Running command - done!
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: io.ionic.starter
Name: MyApp
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Discovered plugin "cordova-plugin-console" in config.xml. Adding it to the project
Installing "cordova-plugin-console" for android
Adding cordova-plugin-console to package.json
Saved plugin info for "cordova-plugin-console" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "ionic-plugin-keyboard" in config.xml. Adding it to the project
Installing "ionic-plugin-keyboard" for android
Adding ionic-plugin-keyboard to package.json
Saved plugin info for "ionic-plugin-keyboard" to config.xml
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...
√ Copying default image resources into ./resources/android - done!
用IDE打开如下所示：
那我们来运行它
安卓环境中：
ionic platform add android //加入到安卓中
ionic build android //打包
ionic run android //真机
ionic emulate android //虚拟机
ios也一样，将android改成ios
另外
ionic serve //在浏览器上运行，自动会打开浏览器
暂时总结到这块
Android开发学习--Ionic+Cordova 环境搭建
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。