• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

ionic 安装使用

JavaScript 开心洋葱 3046次浏览 0个评论

ionic是什么?
ionic 安装使用

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。

 

安装

下载后解压压缩包,包含以下目录:

css/               =>     样式文件

fonts/             =>     字体文件

js/                =>     Javascript文件

version.json       =>     版本更新说明

 

你也可以在 Github 上下载以下资源文件:https://github.com/driftyco/ionic(在release 目录中)。

 

 

HelloWord示例:

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>开心洋葱ionic教程(75271.com)</title>
    <link href="http://www.75271.com.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.75271.com/static/ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
    angular.module('ionicApp', ['ionic'])

    .controller('MyCtrl', function($scope) {

    });
    </script>
    <style>
    body {
    cursor: url('http://www.75271.com/static/img/finger.png'), auto;
    }
    </style>
</head>
<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
    <h1 class="title">Hello World!</h1>
    </ion-header-bar>

    <ion-content>
                <p>我的第一个 ionic 应用。</p>
    </ion-content>

    </body>
</html>

 

命令行安装

 

首先您需要安装 Node.js,我们在接下来的安装中需要使用到其 NPM 工具,更多 NPM 介绍可以查看我们的NPM 使用介绍。

然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考Android 和 iOS 官方文档来安装。

Window 和 Linux 上打开命令行工具执行以下命令:

$ npm install -g cordova ionic

 

Mac 系统上使用以下命令:

sudo npm install -g cordova ionic

 

 

创建应用

$ ionic start myApp tabs

 

创建Android应用

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

 

创建iOS应用

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

 

Ionic Lab

Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,Ionic Lab 将会满足你的需求。

Ionic Lab 为开发者提供了一个更简单的方法来开始,编译,运行,和模拟运行Ionic的应用程序。

Ionic Lab 支持的平台有:Window、Mac OS X、Linux,下载地址为:http://lab.ionic.io/,下载后直接安装即可。通过以上界面你可以完成以下操作:创建应用/预览应用/编译应用/运行应用/上传应用/运行日志查看,整个操作界面如下所示:

ionic 安装使用

 

参考:

ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。

ionic官网 http://ionicframework.com/

ionic 官方参考文档:http://ionicframework.com/docs/

ionic lab IDE下载 http://www.75271.com/138.html

 


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明ionic 安装使用
喜欢 (0)

您必须 登录 才能发表评论!

加载中……