[ 登录注册 ]

博客

Android开发学习--Ionic+Cordova 环境搭建

2017-07-14 10:48:34 admin 返回上一页

标签:get   sdn   cto   www   trap   rect   min   rms   git   

 我们看 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%in。 
CLASSPATH(系统变量):
 用于编译时JAVA类的路径,注意这里设置的是两个值,(.;)表示的是JVM先搜索当前目录。其值为:.;%JAVA_HOME%lib ools.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)Androidandroid-sdk ools;
C:Program Files (x86)Androidandroid-sdkplatform-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:devapache-ant-1.9.6-binapache-ant-1.9.6
2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%in; %ANT_HOME%lib添加到x变量的path中。
设置方法:PATH = %ANT_HOME%in; %ANT_HOME%lib
安装如果不成功可以把%ANT_HOME%换成真实的路径。
如:     D:devapache-ant-1.9.6-binapache-ant-1.9.6in;D:devapache-ant-1.9.6-binapache-ant-1.9.6lib
安装完成以后在cmd中输入 ant -version 验证是否安装成功。
技术分享
 
5.使用npm下载ionic
C:Userslemon>npm install -g ionic
C:UserslemonAppDataRoaming pmionic -> C:UserslemonAppDataRoaming pm ode_modulesionicinionic
C:UserslemonAppDataRoaming pm
`-- [email protected]
 
6.用npm命令安装cordova
C:Userslemon>npm install -g cordova
npm WARN deprecated [email protected]: Use uuid module instead
C:UserslemonAppDataRoaming pmcordova -> C:UserslemonAppDataRoaming pm ode_modulescordovaincordova
C:UserslemonAppDataRoaming pm
`-- [email protected]
 
7.创建项目
C:Userslemon>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 . odo - 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 @[email protected]
√ 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:Userslemon odo>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 @[email protected]
√ 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: platformsandroid
Package: io.ionic.starter
Name: MyApp
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with [email protected]
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 环境搭建

标签:get   sdn   cto   www   trap   rect   min   rms   git   


文章来源:http://www.bozhiyue.com/anroid/boke/2017/0714/1484323.html
返回上一页    返回分类 上一篇:   下一篇:
相关