Ionic学习笔记

时间 2019-11-11

标签 ionic 学习笔记繁體版

原文原文链接

overview

Ionic是一个基于Angular的HTML5应用框架，里面包含许多UI组件，JS可经过Cordova调用iOS、android等原生功能。它特别关注外观、交互、体验，特别适合于开发Hybrid模式的HTML5 APP。javascript

Ionic是一个轻量的手机UI库，具备速度快，界面现代化、美观等特色，为了解决其余一些UI库在手机上运行缓慢的问题。html

官方网站：http://www.ionicframework.com/ 中文网站：http://www.ionic.wangjava

学习笔记

###ion-refresher刷新后要通知框架android

使用<ion-refresher>在刷新完毕后，应当使用做用域的$broadcast()方法通知框架，以完成刷新后的动画ios

$scope.$broadcast("scroll.refreshComplete");

若是没有通知框架，那么它将一直在那显示刷新apache

###ionic框架的依赖注入方式npm

方式1：直接在ng-app注明是ionicapp

<html ng-app="ionic">

方式2：在js中手动依赖ionic框架

angular.module("myApp", ["ionic"]);

###ion-tabs的使用结构：ionic

<ion-tabs>
    <ion-tab>
        <ion-view>
            <ion-content>

不要捣乱顺序了，否则ionic计算布局时会出差错

###使用crosswalk来加速HTML5 APP

crosswalk是一个能让HTML5 APP应用交互加快的WEB引擎，它支持Android和Tizen系统。优势是使HTML5 APP运行速度加快；缺点是打包后的安装包体积增大；

在Ionic中集成crosswalk

ionic browser add crosswalk

卸载crosswalk:

ionic browser revert android
#或者
ionic browser remove crosswalk

###ionic环境安装

安装好JAVA、ant、android、ios等系统的环境

ant：连接地址 android: 连接地址 ios:连接地址 cmd安装：npm install -g cordova ionic

附环境变量文件设置：

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home
export ANT_HOME=/Users/luozt/apache-ant-1.9.6
export ANDROID_HOME=/Users/luozt/Library/Android/sdk
export PATH=.:/usr/local/bin:$ANDROID_HOME/build-tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$JAVA_HOME/bin:$HOME/npm/bin:$ANT_HOME/bin:$PATH