这周笨小葱接收到了一个项目任务,用ionic+angularJS写一个hybrid应用程序(也就是native+html混合移动应用)。初次接触andriod还是大三时候的事了吧,当时用google的手势识别类库写了个手势识别应用,之后就是写手游的时候涉及到了移动端开发。对于这两个新技术还是第一次听说。下面就让我们来,一步一步的将一个移动应用demo跑起来。(笨小葱这里是在windows操作系统上进行的)
安装部署
1.要安装ionic首先你得需要安装Node.js,简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快性能非常好。
Node.js官网:https://nodejs.org/en/ (下载之后双击安装就ok了)
(PS:安装之后cmd中使用node -v和npm -v来测试是否安装成功)
2.下面需要通过Node.js中集成的NPM工具来下载cordova和ionic。
Cordova是驱动PhoneGap的核心引擎
npm install -g cordova ionic( PS:这里很没有翻墙很可能下载不了或者很慢,这里可以配置淘宝镜像:
<span style="white-space:pre"> </span>npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)
好啦,下载完成后执行:cordova -v 和 ionic -v来查看一下版本,有版本号就说明安装成功了。
下面可以创建ionic应用啦:
创建应用
使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:
ionic start myApp tabs
创建完成后,会在当前目录下生成一个myApp的项目文件。进入myApp文件夹:
cd myApp
ionic serve //这个命令会起一个web容器,将myApp发布到web容器中.会自动打开网站访问地址的
到这里第一个ionic应用就搞定了。这里只有web项目。下面是如何将其打成apk,安装到android手机上。ios笨小葱还没试过。
打包成apk
首先打包apk肯定需要配置java_home和android_home。1.下载jdk1.7以上的版本。配置对应的JAVA_HOME(这里学过java的都会,不多说了)2.下载android sdk,不同的ionic版本对于android api的版本要求不一样,现在的最新版本要api22,这里笨小葱分享一个包含api22的。配置环境变量ADNROID_HOME = E:\android\adt-bundle-windows-x86_64-20140321\sdk然后在Path中配置: % ADNROID_HOM E%\tools;( 配置完成后,执行java -version 和android -v 不报错说明安装成功。)这里android开发环境已经配置完成了。就可以使用ionic打包成apk啦.cd myApp ionic build android //编译生成apk,存储在\myApp\platforms\android\build\outputs\apk目录下的android-debug.apk ionic emulate android //启动android模拟器运行myApp