您的位置：首页 > 运维架构 > 网站架构

使用ionic框架构建移动应用

2016-09-05 14:08 615 查看
本篇文章主要讲解如何使用ionic框架来完整的构建一个跨平台的移动应用，如果你以前接触过node和H5+开发,那么使用ionic框架将会更容易上手。

首先要安装node和VS2015(可以再微软的官方网站下载)，你可以使用以下命令来检测本地环境是否安转node：

node -v
我的版本号是
v5.3.0


下面详细讲解下在windows平台上使用ionic框架的过程(以下命令均在cmd命令窗口中执行)：

安装cordova和ionic
npm install -g cordova ionic
安装完成后使用以下命令检测是否安装成功：
cordova -v
我的版本号是6.3.1
ionic -v
我的版本号是2.0.0-beta.22。cordova和ionic的版本号一定要匹配，如果不匹配的话后面的操作是无法继续的。
ionic安装成功后就可以开发ionic之旅了，以下命令是创建一个空的ionic项目
ionic start myApp blank
myApp是ionic项目的名称，默认会在当前目录下创建myApp文件夹作为项目的根目录，blank是项目的模板名称，也可以是tabs等其他模板。
生成android和IOS项目代码
cd myApp;
ionic platform add andrlid;
ionic platform add ios;
切换到myApp项目的根目录，执行上述两个命令，将会根据blank模板生成android和ios两个平台的源代码
如果你本地有完整的andrioid或者IOS开发环境，可以使用以下命令打包安卓项目：
ionic build andrioid/ios
也可以在浏览器上开发测试，以下命令是启动一个本地的web服务，并打开一个浏览器访问我们的ionici项目:
ionic serve
下面的截图是我本机上的执行情况：

，通过浏览器访问:http://192.168.10.41:8100,就可以访问到我们刚才创建的myApp项目

下面讲解下ionic插件的开发和管理，首先通过npm安装plugman模块：
npm install -g plugman


     可以通过plugman -v 命令来查看版本号，我的plugman版本号是1.3.0

创建一个新的插件：
cd myApp;
cd plugins;
plugman create --name xx --plugin_id com.xx.xx --plugin_version 0.0.1
执行成功后，执行以下命令，添加插件的android和ios代码模板：
cd xx;
plugman platform add --platform_name android;
plugman platform add --platform_name ios;
xx是上步中在plugins中创建的插件目录，执行成功后，开发者需要分别在src目录和www目录中填充插件功能的本地化实现和js接口。
安装一个git上已有的插件，需要用户提前安装好git命令行工具：
ionic plugin add 插件的git地址
补充一下，插件的安装和创建都要在生成android和Ios项目之前执行，即上述的第三步之前，不然生成的andrioid和ios项目中不会部署新安装的插件代码。

最后分析下ionic项目的目录结构，其中android和ios项目的目录结构不在本篇讨论范围内：

以下截图是按照上述步骤生成的myApp根目录截图：


platforms目录是存放使用上述第三条命令生成的andrioid和ios项目的地方


plugins目录是用来存放codova插件的地方:

,其中的test插件是我们自定义的插件，其余的插件是ionic默认集成的插件，这些默认集成的插件我们在项目中都可以直接使用。
www目录就是我们的开发目录，使用ionic开发app写的源代码应该都放在这个目录下面(插件除外)：

，打开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></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>

这就是一个标准的angularjs项目入口文件，其中ionic.bundle.js中已经集成了angularjs和ui-router等lib库，无需额外再引用。
cordova.js是引用cordova插件的入口，在当前目录中还未生成，不同的平台cordova.js文件也不同，最后在生成的android和Ios项目中可以看到。
下面看下生成的android项目的目录结构：



在该目录可以看到已经生成了cordova.js，cordova_plugins.js和plugins目录，这三个文件(文件夹)缺一不开，并且相对目录不要随便移动，
不然引用不到plugins中的插件。打开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></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" class="platform-android platform-cordova platform-webview">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
在body标签上已经添加了class:class="platform-android platform-cordova platform-webview",相应的在ios平台和浏览器平台上也会添加相应的class,不同的平台class不同，这点尤其要注意。
下一篇文章将会介绍下在ionic平台上开发跨平台应用要注意的几点。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航