Ionic:一款用web技术开发类似原生App的神乎其技的html5框架
来源:互联网 发布:安卓金手指软件 编辑:程序博客网 时间:2024/05/22 10:50
Ionic:一款用web技术开发类似原生App的神乎其技的html5框架
一、Ionic框架简介
Ionic是一个专注于用web开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了与AngularJS和Sass。这个框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。(跨平台,既可以编译成安卓应用也可以编译成IOS应用,缺点就是性能有点不如原生的。)
二、windows下用Ionic开发Android项目的环境搭建(重点)
首先有几个概念需要明确 =》
Node.JS
Java JDK
Apache Ant
Android SDK
Cordova and Ionic
以上如果你有不了解的,赶快去查阅。
步骤(我用了5步):
1、下载Node.JS for Windows并安装
官方下载地址:https://nodejs.org/
然后根据你的电脑情况是32位还是64位,选择对应版本。
2、在命令行安装Cordova and Ionic
npm install -g cordova
npm install -g ionic
分两步安装,安装过程需要耐心等待。
3、下载JDK并配置好Java运行环境
这个很容易,写过java程序的应该都会。下载jdk后添加环境变量即可。因为太简单,所以不多说。
4、下载Apache Ant 并将其bin目录路径添加进Path路径
下载地址:http://download.csdn.net/detail/mymyway/2867553
像jdk一样,下载了之后要添加环境变量。
5、下载Android SDK 并配置好SDK运行环境
尽可能的选择全面一点的sdk,开始我用的经典版不行。后来就找了系统一点的(快1G),但打包时还是提示版本不够我就又更新了其中的几个包文件。
下载完成并安装然后向系统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”这个文件夹,就把ADT也一并安装了吧。然后运行tools目录下的android.bat文件,然后出现如下界面,勾选Android SDK Platform-tools 然后安装。(总之如果有学安卓的小伙伴,就让他来帮你把安卓安卓环境搞定,这是最省事的。)
三、创建Ionic项目打包成apk并运行
首先在创建项目之前,通过命令行进入到你要创建项目的父级目录(此处略去200字):
1、开始创建APP
在控制台输入
ionic start myApp tabs
创建了一个名为myApp的实例项目
2、进入创建的APP目录
在控制台输入
cd myApp
3、选择配置Android环境
在控制台输入
ionic platform add android
如果是想开发IOS应用就将android改成ios
4、打包生成APP
在控制台输入
ionic build android
5、运行APP
简单一点的方法就是,你直接把生成的sdk文件拖到安卓手机,然后跟平常下载的应用一样安装就可以了。你也可以在电脑上虚拟环境运行。(需要先新建虚拟机/连接手机,新建方法:打开Android SDK安装目录下的AVD Manager.exe选择新建)
在控制台输入
ionic run android
未亲测,网上看到这中方法可以。如果出现问题,采用真机安装该app应用。
如想了解更多可进入Ionic官网:
http://www.ionicframework.com/getting-started/ 进行拓展阅读。
- Ionic:一款用web技术开发类似原生App的神乎其技的html5框架
- [HTML5之APP实战]基于ionic开发的一款KTV移动应用
- 原生APP和Web APP的区别
- 原生APP和Web APP的区别
- 一款类似Ext的轻量级实现UI的JS框架
- ionic—基于web的移动端app开发框架(CSS篇1)
- 纯HTML5 APP与原生APP的差距在哪?
- 纯 HTML5 APP与原生APP的差距在哪?
- 纯HTML5 APP与原生APP的差距在哪?
- 框架的概念及用反射技术开发框架的原理
- 框架的概念及用反射技术开发框架的原理
- APP WEB HTML5 开发框架
- H5开发的web APP和原生APP的区别
- atitit.html5 vs 原生 app的区别与选择
- HTML5定稿,为什么是原生App的颠覆
- 关于移动原生APP好还是HTML5更好的问题
- HTML5实现APP和原生方式的差距
- 原生app与Web app的连接使者WebView
- 华为OJ(成绩排序)
- priority_queue优先队列容器
- HDU 3836--Equivalent Sets【求有向图最少增加多少边使图强连通 && Scc缩点新建图】
- 《蛛丝和梅花》小赏
- 位运算 实现加法
- Ionic:一款用web技术开发类似原生App的神乎其技的html5框架
- PHP:echo print var_dump()和print_r()的区别
- System.getProperty("user.dir"); 获得系统属性
- 第15章 Hibernate的映射技巧
- hdu5371 Hotaru's problem
- 字符串hash函数
- hdoj 1969 Pie
- 技术路线
- [转]使用 Vagrant 打造跨平台开发环境