在eclipse上搭建Ionic环境

首先简单介绍一下Ionic：他是使用HTML5、CSS和JavaScript来开发混合式的APP框架。我们只需要编码一次便可以按照条件打包成Android或者IOS的应用。

如果电脑在安装了node.js的条件下我们使用命令：npm install -gcordova ionic 变可以安装ionic了，而且我们可以使用方便的使用cordova插件：使用命令步骤：

$ ionic start myApp tabs //从官网中下载一个带tabs模板的demo
$ cd myApp //进入MyApp目录
（进入目录以后我们可以使用Crosswalk来优化我们的demo，有点是速度提升，确定是生成的安装包比较大）
$ionic platform add android//执行添加android平台
$ionic build android//编译android项目
等到完成后会在myApp\platforms\android\build\outputs\apk的目录下生成apk包。

但是现实总是残酷的，一些电脑因为权限或者网络的问题安装了node.js也安装不了ionic。我的遇到过，但我们在不使用到cordova插件的情况下我们可以只使用ionic来搭建所需环境：

我们下载ionic库：http://download.csdn.net/detail/u014104286/9582392

我们在eclipse中创建一个版本17或以上的Android应用，在assets下创建一个www的文件夹，再在www的文件下创建名为lib的文件夹把下载的包解压，复制release下的文件到lib中，创建一个index.html的文件里面写入代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Insert title here</title>
<link href="lib/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>

</head><body>	<div class="bar bar-header bar-postitive">		<button class="button button-icon icon ion-navicon"></button>		<h1 class="title">头部</h1>		<button class="button">编辑</button>	</div>	<div class="bar bar-footer bar-balanced">		<button class="button button-icon icon ion-navicon"></button>		<h1 class="title">低部</h1>		<button class="button">选项</button>	</div></body></html>

得到以下的工程文件：(以后使用angluJS也可以在www\lib\js\angluar\中找到angluar.js文件)

在eclipse上搭建Ionic环境

之后我们导入cordova.jar ：http://download.csdn.net/detail/u014104286/9582403，build到创建的Android项目中，修改MainActivity.java文件：

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
         loadUrl("file:///android_asset/www/index.html");
    }
}

之后就像一般的Android程序一样，Run As ——Android Application：运行结果：

在eclipse上搭建Ionic环境
好啦，我们现在就可以尝试ionic漂亮的界面了。

秒客网

在eclipse上搭建Ionic环境

相关文章