使用ionic框架构建移动应用

最新推荐文章于 2023-05-05 23:12:26 发布

jiayq_jiars_changcy

最新推荐文章于 2023-05-05 23:12:26 发布

阅读量662

点赞数

本文链接：https://blog.csdn.net/changcongying/article/details/52439738

版权

本篇文章主要讲解如何使用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平台上开发跨平台应用要注意的几点。

jiayq_jiars_changcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ionic框架构建移动应用

本篇文章主要讲解如何使用ionic框架来完整的构建一个跨平台的移动应用，如果你以前接触过node和H5+开发,那么使用ionic框架将会更容易上手。首先要安装node，你可以使用以下命令来检测本地环境是否安转node：node -v我的版本号是v5.3.0
复制链接

扫一扫