找回密码
当前位置：Mikel > 开发笔记 > 正文

[转载]Cordova 3.x 基础（10） -- UI框架Ionic Framework - Fish Where The Fish Are - ITeye技术网站

2015-01-10 分类：开发笔记 / Android 阅读(1096) 评论(0)

[转载]Cordova 3.x 基础（10） — UI框架Ionic Framework – Fish Where The Fish Are – ITeye技术网站.

Ionic是Drifty继Codiqa（基于 Web 的 JQuery Mobile构建工具）和Jetstrap（基于 Web 的 Twitter Bootstrap 构建工具）之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。

http://ionicframework.com/

Demos http://codepen.io/ionic/public-list
Showcase http://showcase.ionicframework.com/
Forum http://forum.ionicframework.com/
Documentation http://ionicframework.com/docs/
Learn Ionic http://learn.ionicframework.com/
Ionic Crash Course https://www.youtube.com/watch?v=C-UwOWB9Io4
Ionic Tutorial http://ccoenraets.github.io/ionic-tutorial/
Structure of an Ionic App http://mcgivery.com/structure-of-an-ionic-app/

Book:
Manning: Ionic in Action

ngCordova：Cordova API的AngularJS 扩展
Ionicons：免费的icon font
Ionic Creator：在线可视化工具

https://github.com/ecofic/ngCordovaMocks：ngCordovaMocks
https://github.com/driftyco/ionic-cordova-android-vagrant：Ionic Cordova Android Vagrant

官方Blog上推荐的Built with Ionic应用：

目前版本发布的速度很快，具体可以参考https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

需要注意的是：

  • 目前还是Beta版
  • 面向Hybrid Mobile App而不是Mobile Web App
  • 只支持iOS 6+ / Android 4+

和JQuery Mobile不同的是Ionic只关注的是UI部分，类似的还有Twitter Bootstrap, Foundation, Ratchet, Topcoat 等。可以看看官方对框架的解释：Where does the Ionic Framework fit in?。熟悉Bootstrap的还可以试试基于Angularjs和Bootstrap 3的 Mobile Angular UI with Bootstrap 3。

来源：http://coenraets.org

  • 采用Sass/Gulp、基于AngularJS、零jQuery、最小化DOM操作
  • 非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区

Ionic提供了很多Directive指令（使用JavaScript来实现语义化标签，类似于jsp的taglib）实现丰富的UI控件、大量的常用icon （Icon Pack）、使用AngularUI Router模块来记录页面路由、采用Hammer.js做多点触控、通过AngularJS的扩展做UI交互、左右滑动菜单、下拉更新、自定义主题（核心CSS基于Sass）…….。官方网站也提供了很详细的使用说明。

安装ionic

引用
$ npm install -g cordova gulp ionic

新建项目

引用
$ ionic start myApp blank  新建一个空白页面
$ ionic start myApp tabs  新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面

运行项目

引用
$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

另外项目用到gulp来做自动化项目构建。

其中start一个项目的时候是从github上下载seed工程后展开使用，所以也可以通过Cordova CLI创建一个工程后删除www文件夹，从github上下载seed工程后解压覆盖www文件夹即可。

也可以从http://code.ionicframework.com/手动下载。


–> 2014/05/19
安装或更新时候的错误：

①提示以下错误是因为没有安装Python：

引用
gyp ERR! configure error
gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:113:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:81:11
gyp ERR! stack     at Object.oncomplete (fs.js:107:15)

②如果安装的是python3比如python-3.4.0，会提示以下错误，安装python-2.7.6就OK啦。

引用
gyp ERR! configure error
gyp ERR! stack Error: Python executable “python” is v3.4.0, which is not supported by gyp.
gyp ERR! stack You can pass the –python switch to point to Python >= v2.5.0 & < 3.0.0.
gyp ERR! stack     at failPythonVersion (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:118:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:107:9
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:635:7)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at maybeClose (child_process.js:735:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:802:5)

【原因】
查看了一下CLI的源代码，ionic引入了vinyl-fs的依赖，用于npm\node_modules\ionic\lib\ionic \serve.js中，vinyl-fs的vfs.watch(‘www/**/*’)，而它又有子依赖：vinyl-fs@0.1.4 -> glob-watcher@0.0.6 -> gaze@0.6.4。gaze的源码是C++的，需要做本地编译，node-gyp是Node.js本地代码编译构建工具，查看它的安装说明，需要Python2不支持Python3，还需要Visual Studio C++的支持。再查看ionic-cli的修改历史记录，发现是为了支持Livereload才引入了vinyl-fs。

本地测试：

（1）启动Python
进入工程的www文件夹，执行“python -m SimpleHTTPServer 8000”后，在Chrome或Safari中输入“http://localhost:8000”就可以测试了。

（2）启动Gulp
项目用到gulp来做自动化项目构建

修改gulpfile.js

Js代码  收藏代码
  1. var gulp = require(‘gulp’),
  2.   connect = require(‘gulp-connect’);
  4. gulp.task(‘connect’, function() {
  5.   connect.server({
  6.     root: ‘www’,
  7.     livereload: true
  8.   });
  9. });
  11. gulp.task(‘html’, function () {
  12.   gulp.src(‘./www/*.html’).pipe(connect.reload());
  13. });
  15. gulp.task(‘watch’, function () {
  16.   gulp.watch([‘./www/*.html’], [‘html’]);
  17. });
  19. gulp.task(‘default’, [‘connect’, ‘watch’]);
引用
$ cd myApp
$ npm install -g gulp
$ npm install
$ gulp

访问： http://localhost:8080

（3）其他HTTP server
还有很多其他的Simple HTTP server，比如：http-server 就是一个NodeJS 下很好用的HTTP Server

引用
npm install http-server -g

基本使用：

Html代码  收藏代码
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset=“utf-8”>
  5.     <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
  6.     <!– Ionic的CSS –>
  7.     <link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>
  8.     <!– 包含了Ionic核心JS、AngularJS、Ionic的AngularJS扩展、ngAnimate/ngSanitize/ui.router模块 –>
  9.     <script src=“lib/ionic/js/ionic.bundle.js”></script>
  10.     <SCRIPT LANGUAGE=“JavaScript”>
  11.     <!–
  12.       // 创建一个AngularJS模块并告诉Angular初期化它
  13.       angular.module(‘starter’, [‘ionic’]);
  14.     //–>
  15.     </SCRIPT>
  16.   </head>
  17.   <body ng-app=“starter”>
  18.     <ion-header-bar class=“bar-positive”>
  19.       <h1 class=“title”>header</h1>
  20.     </ion-header-bar>
  21.     <ion-content padding=“true”>
  22.       <h1>Hello wrold!</h1>
  23.     </ion-content>
  24.     <ion-footer-bar align-title=“left” class=“bar-assertive”>
  25.       <h1 class=“title”>footer</h1>
  26.     </ion-footer-bar>
  27.   </body>
  28. </html>
  • 整体是 SPA（Single Page Application)
  • 除过index.html外的所有页面（放入templates文件夹下）通过Ajax加载
  • 基于Angular UI做页面路由
  • Controller中做事件绑定和数据绑定
  • View复杂的处理使用Directive・Filter
  • Model中的共通处理委托给Service、Factory

单纯使用CSS（ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大）：

Html代码  收藏代码
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset=“utf-8”>
  5.     <meta name=“viewport” content=“initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>
  6.     <link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>
  7.   </head>
  8.   <body>
  9.     <div class=“bar bar-header bar-positive”>
  10.       <h1 class=“title”>header</h1>
  11.     </div>
  12.     <div class=“scroll-content has-header has-footer”>
  13.       <div class=“card”>
  14.         <div class=“item item-divider”>
  15.           I’m a Header in a Card!
  16.         </div>
  17.         <div class=“item item-text-wrap”>
  18.           This is a basic Card with some text.
  19.         </div>
  20.         <div class=“item item-divider”>
  21.           I’m a Footer in a Card!
  22.         </div>
  23.       </div>
  24.       <div class=“card”>
  25.         <div class=“item item-divider”>
  26.           I’m a Header in a Card!
  27.         </div>
  28.         <div class=“item item-text-wrap”>
  29.           This is a basic Card with some text.
  30.         </div>
  31.         <div class=“item item-divider”>
  32.           I’m a Footer in a Card!
  33.         </div>
  34.       </div>
  35.     </div>
  36.     <div class=“bar bar-footer bar-positive”>
  37.       <h1 class=“title”>footer</h1>
  38.     </div>
  39.   </body>
  40. </html>

AngularJS Chrome调试插件Batarang
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic Part 1、 Part 2、 Part 3
http://www.zhouwenbin.com/tag/ionic/
http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (810)ASP.NET MVC (618)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (209)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (59)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类目录

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏