您的位置：首页 > 编程语言 > Java开发

在eclipse上搭建Ionic环境

2016-07-21 15:20 225 查看

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

如果电脑在安装了node.js的条件下我们使用命令：npm install -g
cordova 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文件)

之后我们导入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：运行结果：

好啦，我们现在就可以尝试ionic漂亮的界面了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航