360SDN.COM

ionic之路

来源:  2017-06-24 08:38:34    评论:0点击:

来源:http://blog.csdn.net/The_Oringinal_Leon/article/details/52770795?locationNum=5&fps=1
    Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类似前端开发的BootStrap,目标是封装html5移动跨平台开发的最佳实践,就像Twitter Bootstrap在前端开发中做的一样。Ionic框架很先进,js部分是基于AngularJS框架,大量使用了css3,css生成基于Sass,构建工具基于最新的gulp,版本升级基于bower,原生层无缝封装了cordova。

    我认为,Bootstrap是针对前端跨平台推出的框架,ionic主打移动前段跨平台,两者都用到了CSS,如果在ionic框架下使用Bootstrap,恐有冲突,且加载过多框架,影响速度,也务必要。

    另外,还有jQuery,angularjs有自己的一套框架,jquery应该是另一套,ionic框架的js部分是基于angularjs的,有很完整的动作方案,所以在ionic当中使用JQuery也有待商榷。

按着草鸟教程,一步一步放下走,进行到Android build时,卡住了,说没有ANDROID_HOME,环境变量什么的,是不是得先装好android SDK啊?

参考链接:http://www.itwap.net/ArticleContent.aspx?id=26

需要装一些东西

  • 1.JDK
  • 2.Apache Ant
    环境变量要配好
  • 3.Android SDK
  • 4.NodeJS
  • 5.NodeJS提供的npm安装Ionic和Cordova

打包过程遇到些问题,先不管,ionic应该是开发跨界,做好了webApp再用cordova打包成相应的Android App和iOS App

我现在最重要的是搞懂,ionic的开发阶段,项目结构如何,运行机制,UI组件使用,CSS使用。

ionic serve就可以在浏览器中运行 我创建的myApp就是一个ionic项目,先把它搞懂,然后在按照任务需求去做一个App,在这过程中寻求打包问题的解决。

Cordova干什么用的?
Ionic 底层打包使用 Cordova ( 和 Phonegap 一样 ) 底层打包用 Cordova 是不错的。 Ionic 是一个全堆栈的混合应用开发框架,可以理解成 Ionic = Cordova + AngularJS + Ionic UI

今天的任务:务必把菜鸟的ionic部分吃掉!

ionic 创建 APP 使用 HTML、CSS 和 javascript 来构建

问题:
.controller(”,function(){})和.controller(”,[function(){}])的区别?

ionic icon 比对表:cheatsheet.html

-ionic手势

1.长按 on-hold
用法:button添加on-hold属性,赋值function。

2.单击 on-tap
用法:button添加on-tap属性,赋值function。

3.双击 on-double-tap
用法:button添加on-double-tap属性,赋值function。

4.触碰 on-touch
用法:button添加on-touch属性,赋值function。

5.抬手 on-release
用法:button添加on-release属性,赋值function。

6.拖拽 on-drag
用法:button添加on-drag属性,赋值function。

7.滑动 on-swipe on-swipe-up/right/down/left

8.ionicGestureon(eventType,callback,element)
off(eventType, callback, $element)
没看懂什么意思,不知道怎么用,也没搜到怎么用,碰到再说吧。

-ionic头部和底部

是不是这一个意思

<ion-nav-view>
  <ion-view>
    <ion-header-bar>
       导航条
    </ion-header-bar>
    <ion-content>
       身子
    </ion-content>
    <ion-footer-bar>
       底部条
    </ion-footer-bar>
  </ion-view>
</ion-nav-view> 

问题:里写html代码是怎么一回事?

-$ionicModal

A modal will broadcast ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ events from its originating scope

model,这是ionic的一个专有概念,模态窗口。

模态窗口的写法:
1.写模态子页面
2.controller里注入$ionicModal服务
3.调用fromTemplate 或 fromTemplateUrl接口,将子窗口页面加工成model并引入当前作用域
4.主页面控件调用modal.show()方法,调出模态窗口
5.调用modal.hide()方法,隐藏模态窗口

Angular的核心为路由服务
AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面。

-ionic 导航

当用户在你的app中浏览时,ionic能够检测到浏览历史。通过检测浏览历史,实现向左或向右滑动时可以正确转换视图。

采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务,URLs可以用来控制视图。

AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面。

此外,每个状态无需绑定到一个URL,并且数据可以更灵活地推送到每个状态。

-缓存问题

通常情况下,视图都被缓存了能提升性能。当跳出视图时,他的元素被保留在Dom中,并且它的作用域也从 $watch 中移除。

当我们跳到一个已经被缓存了的视图,视图会被激活,它的作用域被重新连接上,Dom中也保存了他的元素。这也允许保持以前的视图滚动位置

缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个,并且这并不是唯一可以定制的,应用程序可以显式状态来设置视图应不应该被缓存。

注意,因为我们是缓存这些视图,我们没有破坏作用域。相反, 它的作用域也从 $watch 中移除。

因为接下来的观看作用域并没有被摧毁和重建,控制器也没被再次加载。如果app/controller需要知道什么时候进入或离开一个视图,在视图事件从 ionView 作用内发出, 例如 $ionicView.enter, 可能是有用的。

全局禁用缓存

$ionicConfigProvider 可以用于设置最大允许缓存的视图数量,通过设置为0来禁用所有缓存。

$ionicConfigProvider.views.maxCache(0);

在STATE PROVIDER中禁用缓存

$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})

通过属性禁用缓存

<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>

$ionicNavBarDelegate
看来ionic当中,也是有代理概念的

在后退按钮上显示上一个标题,也用$ionicNavBarDelegate。

<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-icon">
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
</ion-nav-back-button>
</ion-nav-bar>



function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}

问题:nav-clear?

nav-transition
就是窗口切换的风格
设置使用的过渡类型,可以是:ios, android, 和 none。

<a nav-transition="none" href="#/home">Home</a>

-$ionicHistory

这个应该会经常用到,应该也是一个ionic的全局service
$ionicHistory 用于跟踪用户在 app 内的浏览记录。

-ionic 平台

问题:没有例子,没太明白。

-ionic 对话框

-ionic 滚动条

ion-infinite-scroll
当页面滚动到底部时,可以出发加载数据的方法。

$ionicScrollDelegate

-ionic 侧栏菜单

好多坑啊,但是都爬过去了。

关键点:menu的概念、路由、调用

菜鸟教程-ionic–>End!


为您推荐

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