首页> 移动开发> 使用Ionic快速开发App(一)

[文章]使用Ionic快速开发App(一)

收藏
0 1763 0

【摘要】

Ionic基于Angular构建的一个用来开发混合手机应用的,开源的,跨平台,免费的移动端开发框架。本文通过一个使用Ionic1开发安卓APP的一个例子,给大家介绍如何从无到有使用Ionic1快速构建安卓APP

【正文】

一、Node.js开发环境配置

访问https://nodejs.org/

下载并安装Node.js(默认下一步)

验证:运行命令node -v


二、安装git brash

访问https://gitforwindows.org/

下载并安装git brash(根据自己的喜好选择工具)

验证:git --version


三、安装jdk并配置环境变量

访问:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下载并安装JDK(默认下一步)

配置环境变量pathclasspath

根路径:jdk的安装目录


新建CLASSPATH变量:

.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;


注意:变量值前面有一个点不要漏了

PATH变量添加值:

%JAVA_HOME%\bin

%JAVA_HOME%\jre\bin


新建_JAVA_OPTIONS变量

-Xmx512M


注意:这个创建JAVA虚拟机时的内存大小,若值过大时打包生成APP时将会报错。

验证:运行命令java -version


四、安装SDK并配置环境变量

访问

https://dl.google.com/android/installer_r24.4.1-windows.exe

下载安装安卓SDK(默认下一步)

注意:建议安装的磁盘可用空间要足够大,因为下一步下载的安卓开发工具包占用空间比较大。

设置环境变量

SDK安装根路径值:


PATH变量新增值

%ANDROID_HOME%\platform-tools

%ANDROID_HOME%\tools


五、 安装Gradle并配置环境变量

访问https://services.gradle.org/distributions/

下载:gradle-4.1-bin.zipgradle-4.1-all.zip版本

解压压缩包并配置环境变量完成安装


注意:解压文件放置的目录没有特别要求,但是建议在版本文件之外套一层文件目录gradle方便根据需要修改环境变量值。

设置环境变量


六、使用SDK Manger下载开发工具包

打开SDK Manger

安装默认选中的工具包

注意:默认工具包大约占用磁盘空间约16GB左右


七、安装Ionic

CMDgit brash上运行命令

npm install -g ionic

八、安装cordova

CMDgit brash上运行命令

npm install g cordova


九、使用Ionic1自带模板构建第一个APP

git brash上运行命令

项目的工作目录

cd E:/Workspaces/

注意:工作目录不能使用中文字符

在指定工作目录下创建我们的第一个项目myproject

ionic start myApp --type ionic1


模板可选三种:


  运行命令构建apk文件

ionic cordova build android  


  构建成功


十、参考文章问题及解决方案

参考文章

https://ionicframework.com/framework

https://gradle.org/install/

 http://ionicframework.com/docs/v1/

https://blog.csdn.net/weixin_36185028/article/details/54933166

https://www.cnblogs.com/luleixia/p/6589523.html

报错处理参考文章:

https://stackoverflow.com/questions/36198165/failed-to-find-android-home-environment-variable

https://blog.csdn.net/xuexiiphone/article/details/51252783

https://stackoverflow.com/questions/30342629/error-ionic-run-android-on-device

。。。。

十一、       【小结】

目前学领未来的移动端WEB虽然基于Ionic1开发,但是仅仅只是运用了它的一些皮毛,如路由、UI、弹窗等等,关于它更强的跨平台开发优势暂没有更多深入了解(坑点)。本文算是对Ionic实践的进一步探索,希望能给大家带来一些入门上的帮助。

移动开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}