- 需要先安装node.js环境,从官网下载最新的安装包进行安装,不要使用brew进行安装。
- 如果没有安装Andriod \ IOS 模拟器,需要先进行安装。
mac下需要安装Xcode,或者执行xcode-select --install
,然后再执行:$ npm install -g ios-sim $ npm install -g ios-deploy
- 安装最新版本的 cordova 和 ionic :
sudo npm install -g cordova ionic
- 如果出现报权限问题,可以执行如下命令:
npm config set unsafe-perm true
- 添加Android平台
添加android的时候可能会报错,解决的方法很简单,将ionic换成cordova即可:
cd myApp ionic platform add android //这行可能会报错 ionic build android ionic emulate android
cd myApp cordova platform add android //这行可能会报错 cordova build android cordova emulate android
- ngCordova安装
ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。- 进入到工程目录,使用bower工具安装
bower install ngCordova
- 然后将ng-cordova.js或者ng-cordova.min.js添加到index.html中的cordova.js引入之前,例如:
<script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script>
- 然后再angular中添加ngCordova依赖,
angular.module('myApp', ['ngCordova'])
- 进入到工程目录,使用bower工具安装
-
$ionicConfigProvider
var myApp = angular.module('reallyCoolApp', ['ionic']); myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(5); //配置android平台的缓存 $ionicConfigProvider.platform.android.views.maxCache(5); // note that you can also chain configs $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left'); });
-
views.transition(transition/string)
设置视图之间的过渡切换效果,默认是platform,可选值如下:platform: 根据平台动态选择相应的过渡效果,如果不是android或者ios,则默认是ios.
ios: iOS过渡效果.
android: Android过渡效果.
none: 无过渡效果. -
views.maxCache(maxNumber/number)
设置DOM中缓存的最大视图数目,如果超过限制,则移除最长时间没有显示的视图。DOM缓存中的视图会缓存scope和当前状态以及滚动的位置。缓存中的scope并不在 $watch 监听生命周期中,当视图重新显示的时候,会重新进入 $watch。如果 maximum cache 设置为 0, 离开的view会被立即从dom中移除, 下次再显示这个view的时候, 就会重新编译, 附加到dom上, 重新绑定到对应的元素.相当于是禁用缓存. -
views.forwardCache(value/boolean)
默认情况下,最近访问的视图会被缓存,当导航回到某个已经访问过的视图的时候,相同实例的数据和dom元素会被重新引用到。然而,当回退到上一个视图的时候,刚刚前进的视图会被清除掉,如果你再次前进到这个视图,就会创建一个新的DOM节点元素和控制器实例。基本上任何一个前进访问的视图每次都会被重置。这个设置选项中设置为true的时候就会缓存前进的视图,而且不会每次加载的时候不会重置。 -
scrolling.jsScrolling(value/boolean) 配置是使用js的scroll滚动还是使用原生的滚动。如果设置为false和在每个 ion-content中设置overflow-scroll=’true’一样的效果。
-
backButton.icon(value/string)
设置返回按钮的图标。 -
backButton.text(value/string)
设置返回按钮的文字。 -
backButton.previousTitleText(value/boolean)
设置是否将上一个view视图的title设置成返回按钮的文字,iOS是默认的true。 -
form.checkbox(value/string)
设置Checkbox的样式. Android 默认是方形square,iOS 默认是圆形circle. -
form.toggle(value/string)
设置Toggle元素的样式. Android默认是small,iOS默认是large. -
spinner.icon(value/string)
设置默认的spinner图标。可以是: android, ios, ios-small, bubbles, circles, crescent, dots, lines, ripple, or spiral. -
tabs.style(value/string)
设置tab的样式。 Android 默认是striped and iOS 默认是standard。可选的值是striped and standard. -
tabs.position(value/string) 设置Tab的位置. Android tab的位置默认在顶部,iOS 默认是在底部.可选的值是 top 和 bottom.
-
templates.maxPrefetch(value/integer)
设置根据在$stateProvider.state中定义的模板url预取的模板数量。 如果设置为 0,当导航到新的页面时候用户必须等待加载到该页面. 默认是 30. -
navBar.alignTitle(value)
设置导航条的标题的对其方式。 默认是center。可选值如下:platform: 根据平台动态选择标题的样式,ios默认显示为center,android默认是left,如果不是ios或android,则默认显示center。
left: 导航条标题显示在左边
center: 导航条标题显示在中间
right: 导航条标题显示在右边 -
navBar.positionPrimaryButtons(value/string) 设置导航条中主导航按钮的对其位置,默认是 left.
-
platform: 根据平台动态选择标题的样式,ios默认显示为left,android默认是right,如果不是ios或android,则默认显示left。
left: Left align the primary navBar buttons in the navBar
right: Right align the primary navBar buttons in the navBar. -
navBar.positionSecondaryButtons(value/string)
设置导航条中次导航按钮的对其位置,默认是 left. -
platform: 根据平台动态选择标题的样式,ios默认显示为right,android默认是left,如果不是ios或android,则默认显示right。
left: Left align the primary navBar buttons in the navBar
right: Right align the primary navBar buttons in the navBar.
-
-
ionic.Platform平台相关接口
angular.module('PlatformApp', ['ionic']) .controller('PlatformCtrl', function($scope) { ionic.Platform.ready(function(){ // will execute when device is ready, or immediately if the device is already ready. }); var deviceInformation = ionic.Platform.device(); var isWebView = ionic.Platform.isWebView(); var isIPad = ionic.Platform.isIPad(); var isIOS = ionic.Platform.isIOS(); var isAndroid = ionic.Platform.isAndroid(); var isWindowsPhone = ionic.Platform.isWindowsPhone(); var currentPlatform = ionic.Platform.platform(); var currentPlatformVersion = ionic.Platform.version(); ionic.Platform.exitApp(); // stops the app });
-
ready(callback)
设备准备就绪后触发回调函数, 如果设备本来已经就绪会立即触发回调函数。该方法可以在任何地方运行,不用包装在方法中。当APP中有WebView (Cordova), 设备就绪时就会调用回调。如果app是在web browser中, 会在window.load之后调用回调函数。 需要注意Cordova features (Camera, FileSystem, etc) 在web浏览器中都不会起作用。 -
setGrade(grade)
Set the grade of the device: ‘a’, ‘b’, or ‘c’. ‘a’ is the best (most css features enabled), ‘c’ is the worst. By default, sets the grade depending on the current device. -
device() Return the current device (given by cordova).returns: object The device object.
-
isWebView()
Returns: boolean Check if we are running within a WebView (such as Cordova). -
isIPad()
Returns: boolean Whether we are running on iPad. -
isIOS()
Returns: boolean Whether we are running on iOS. -
isAndroid()
Returns: boolean Whether we are running on Android. -
isWindowsPhone()
Returns: boolean Whether we are running on Windows Phone. -
platform()
Returns: string The name of the current platform. -
version()
Returns: number The version of the current device platform. -
exitApp()
Exit the app. -
showStatusBar(shouldShow/boolean)
Shows or hides the device status bar (in Cordova). Requires cordova plugin add org.apache.cordova.statusbar -
fullScreen([showFullScreen/boolean], [showStatusBar/boolean])
Sets whether the app is fullscreen or not (in Cordova).
-
-
ionic.Platform属性
-
boolean isReady
Whether the device is ready. -
boolean isFullScreen
Whether the device is fullscreen. -
Array(string) platforms
An array of all platforms found. -
string grade
What grade the current platform is.
-
- Header \ Footer
- Button
- List
- card卡片
- 表单
- Toggle选择
- checkbox
- radio
- range范围选择
- select下拉选框
- tabs组件
- color定制
---可以修改ionic.css,由于使用的sass,可以修改_variables.scss文件来扩展或修改配色。 - padding
padding: Adds padding around every side.
padding-vertical: Adds padding to the top and bottom.
padding-horizontal: Adds padding to the left and right.
padding-top: Adds padding to the top.
padding-right: Adds padding to the right.
padding-bottom: Adds padding to the bottom.
padding-left: Adds padding to the left. - 动画样式
- grid系统
---ionic的网格系统采用的是 CSS Flexible Box Layout Module标准,所有支持ionic的设备都支持flexbox。可以用row样式指定行,用col样式指定列。- 列宽
- 偏移量
- 响应式grid
指定列宽class 名称 | 偏移量class 名称 | 所占比例 |
---|---|---|
.col-10 | .col-offset-10 | 10% |
.col-20 | .col-offset-20 | 20% |
.col-25 | .col-offset-25 | 25% |
.col-33 | .col-offset-33 | 33.3333% |
.col-50 | .col-offset-50 | 50% |
.col-67 | .col-offset-67 | 66.6666% |
.col-75 | .col-offset-75 | 75% |
.col-80 | .col-offset-80 | 80% |
.col-90 | .col-offset-90 | 90% |
Responsive Class | Break when roughly |
---|---|
.responsive-sm | Smaller than landscape phone |
.responsive-md | Smaller than portrait tablet |
.responsive-lg | Smaller than landscape tablet |
- Tabs
- 通过tab栏切换不同的page,注意:不要将ion-tabs放在ion-content里面,会导致一个css错误。
- android和ios在默认样式上有一些不同的地方,官方文档中都有说明,tab位置,$ionicConfigProvider.tabs.position(value) 。
- Android 默认是顶部(top),Ios是底部 (bottom) 。
var myApp = angular.module('reallyCoolApp', ['ionic']); myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(5); // note that you can also chain configs $ionicConfigProvider.tabs.position("bottom"); });
<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <!-- Tab 1 content --> </ion-tab> <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline"> <!-- Tab 2 content --> </ion-tab> <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline"> <!-- Tab 3 content --> </ion-tab> </ion-tabs>
- ion-tab
作为ion-tabs的tab项,用于切换选择tab的内容,只有当tab被选中时,其对应的内容content才会存在。每个ion tab都有自己的查看历史。
ion-tab的属性如下:<!--用法--> <ion-tab title="Tab!" icon="my-icon" href="#/tab/tab-link" on-select="onTabSelected()" on-deselect="onTabDeselected()"> </ion-tab>
属性 | 类型 | 描述 |
---|---|---|
title | string | The title of the tab. |
href(optional) | string | The link that this tab will navigate to when tapped. |
icon(optional) | string | The icon of the tab. If given, this will become the default for icon-on and icon-off. |
icon-on(optional) | string | The icon of the tab while it is selected. |
icon-off(optional) | string | The icon of the tab while it is not selected. |
badge(optional) | expression | The badge to put on this tab (usually a number). |
badge-style(optional) | expression | The style of badge to put on this tab (eg tabs-positive). |
on-select(optional) | expression | Called when this tab is selected. |
on-deselect(optional) | expression | Called when this tab is deselected. |
ng-click(optional) | expression | By default, the tab will be selected on click. If ngClick is set, it will not. You can explicitly switch tabs using $ionicTabsDelegate.select(). |
-
$ionicTabsDelegate
是ion-tabs的一个api参数,通过这个可以选择切换不同的tab,可以通过$getByHandle 方法获取不同的tab的实例<body ng-controller="MyCtrl"> <ion-tabs> <ion-tab title="Tab 1"> Hello tab 1! <button ng-click="selectTabWithIndex(1)">Select tab 2!</button> </ion-tab> <ion-tab title="Tab 2">Hello tab 2!</ion-tab> </ion-tabs> </body>
function MyCtrl($scope, $ionicTabsDelegate) { $scope.selectTabWithIndex = function(index) { $ionicTabsDelegate.select(index); } }
-
ion-side-menus
是一个带有边栏菜单的容器,可以通过点击按钮或者滑动屏幕来展开菜单。在js中可以通过 $ionicSideMenuDelegate 来获取该组件对应的实例。为了自动关闭已打开的menu,可以通过在ion-side-menu-content中的按钮或link添加menu-close样式。<ion-side-menus> <!-- Center content --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> </ion-side-menu> <!-- Right menu --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }
- ion-side-menu-content 展示主要内容的容器。可以通过滑动屏幕来展开menu
<ion-side-menu-content edge-drag-threshold="true" drag-content="true"> </ion-side-menu-content>
- ion-side-menu 存放侧边栏的容器
<!-- side string Which side the side menu is currently on. Allowed values: ‘left’ or ‘right’. is-enabled(optional) boolean Whether this side menu is enabled. width(optional) number How many pixels wide the side menu should be. Defaults to 275. --> <ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
- menu-toggle 用于切换显示侧边栏菜单
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
- menu-close 关闭当前打开的menu
下面的例子是在一个menu栏里面的一项菜单,点击可以关闭menu
<a menu-close href="#/home" class="item">Home</a>
- $ionicSideMenuDelegate 用于指定控制 ionSideMenus 的实例,其有很多的方法,可以查看API
<body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> Content! <button ng-click="toggleLeftSideMenu()"> Toggle Left Side Menu </button> </ion-side-menu-content> <ion-side-menu side="left"> Left Menu! <ion-side-menu> </ion-side-menus> </body>
function MainCtrl($scope, $ionicSideMenuDelegate) { $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft(); }; }