360SDN.COM

ionic:用HTML5做原生应用开发

来源:  2017-06-24 08:41:45    评论:0点击:

原生应用通常跑起来会更快、更平稳,带给用户的体验也更出色。然而Web设计者/开发者也一直在寻找着一种工具,将原生应用的体验带到Web技术中。Ionic是一个前端的框架,帮助开发者使用HTML5、CSS3和JavaScript做出原生应用。

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

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

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

ionic 特点

  • 1.ionic 基于Angular语法,简单易学。
  • 2.ionic 是一个轻量级框架。
  • 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
  • 4.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  • 5.ionic 专注原生,让你看不出混合应用和原生的区别
  • 6.ionic 提供了强大的命令行工具。
  • 7.ionic 性能优越,运行速度快。

学习本教程前你需要了解?

学习本教程前你需要了解以下基础知识:


ionic 相关内容

ionic 官方网站:http://ionicframework.com/

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

Github 地址:https://github.com/driftyco/ionic

 


Install Ionic

npm install -g cordova ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal. Follow the  Android and  iOS platform guides to install required tools for development.

Start an App

ionic start myApp tabs

Create an Ionic App using one of our ready-made app templates, or a blank one to start fresh. Check out the Market for more designs.

For v1 projects, use the --type ionic1 flag.



Start an App

ionic start myApp tabs




  • $ ionic start myApp blank
  • $ ionic start myApp tabs
  • $ ionic start myApp sidemenu

	



  • Run your App

                   
     cd myApp
    ionic serve
                  

    Much of your app can be built right in the browser with ionic serve. We recommend starting with this workflow.

    When you're ready to deploy your app to a real device, check out our Deploying guide.

     

    ionic 安装

    本站实例采用了ionic v1.3.2 版本,使用的 CDN 库地址:

    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    

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

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

    css/               =>     样式文件
    fonts/             =>     字体文件
    js/                =>     Javascript文件
    version.json       =>     版本更新说明
    

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

    接下来,我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。

    实例

    <ion-header-bar class="bar-positive"> <h1 class="title">Hello World!</h1> </ion-header-bar> <ion-content> <p>我的第一个 ionic 应用。</p> </ion-content>

    尝试一下 »

    点击 "尝试一下" 按钮查看在线实例。

    本教程着重讲解 ionic 框架的应用,大部分实例在浏览器中运行 ,移动设备上运行可以在接下来的命令行安装教程中详细了解。

    注意:在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。


    命令行安装

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

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

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

    $ npm install -g cordova ionic
    

    Mac 系统上使用以下命令:

    sudo npm install -g cordova ionic
    

    提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。

    如果你已经安装了以上环境,可以执行以下命令来更新版本:

    npm update -g cordova ionic
    

    sudo npm update -g cordova ionic
    

    创建应用

    使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:

    $ ionic start myApp tabs
    

    运行我们刚才创建的ionic项目

    使用 ionic tool 创建,测试,运行你的apps(或者通过Cordova直接创建)。

    创建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
    

    如果出现"ios-sim was not found."错误,可以执行以下命令:

    npm install -g ios-sim

    如果一切正常会弹出模拟器,界面如下所示:


    Ionic Lab

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

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

    Ionic Lab 支持的平台有:Window、Mac OS X、Linux,下载地址为:http://lab.ionic.io/,下载后直接安装即可。整个操作界面如下所示:

    通过以上界面你可以完成以下操作:

    • 创建应用
    • 预览应用
    • 编译应用
    • 运行应用
    • 上传应用
    • 运行日志查看

     

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权