Ionic介绍*
- 首先要认识Ionic框架?
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从 web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
ionic框架构成
- CSS框架 - 提供原生 App 质感的 CSS 样式模拟。 ionic 这部分的实现使用了 ionicons 图标样式库。
- JavaScript框架 - 提供移动 Web 应用开发框架。ionic 基于 AngularJS 基础框架开发,遵循 AngularJS 的框架约束;此外 ionic 使用 AngularJS UI Router 实现前端路由。
- 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic 命令行工具使用了 Cordova,依赖于平台 SDK(Android & iOS)实现将移动 Web 项目打包成原生 App。
- Ionic特点
- 基于Angular语法,简单易学。
- 是一个轻量级框架。性能优越,运行速度快。
- 完美的融合下一代移动框架,支持 Angularjs 的特性, MVC ,代码易维护。
- 提供了漂亮的设计,通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。
- 专注原生,让你看不出混合应用和原生的区别
- 提供了强大的命令行工具。
ionic开发注意点有哪些?
由于 ionic 使用了 HTML5 和 CSS3 的一些新规范,所以要求 iOS7+ / Android4.1+。
在低于这些版本的手机上使用 ionic 开发的应用,有时会发生莫名其妙的问题。- 现在那些公司再用ionic开发?
Ionic框架主要技术介绍
- Cordova介绍
- Cordova是什么?
- Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
- Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
- Cordova和phonegap的关系?
- 08年一次ios开发者大会上来自Nitobi软件公司的几个家伙突发奇想,提出一个想法,想做一个工具来弥补web和ios开发之间的不足,并提出 Bridging the gap between the web and the iPhone sdk。一开始的目标并不是很大,但是做到了现在的written once,run everywhere。
09年他们推出android adk和blackberry sdk,成了移动开发者的福音,就连ibm也加入进来。phonegap继续成长,在2011年10月,整个Nitobi团队被adobe收购,PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了,由于Adobe现在拥有PhoneGap商标,他们不得不换个名字,第一个选中的名字是Callback,毫无创意,因此再改一次,产品现在叫Apache Cordova。随后adobe把 phonegap送给了apache软件基金会,接着apache把phonegap改名为cordova,cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。
所以Apache Cordova是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎,。
- 08年一次ios开发者大会上来自Nitobi软件公司的几个家伙突发奇想,提出一个想法,想做一个工具来弥补web和ios开发之间的不足,并提出 Bridging the gap between the web and the iPhone sdk。一开始的目标并不是很大,但是做到了现在的written once,run everywhere。
- Ng-cordova介绍
- Ng-cordova是什么?
- ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和指令扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。
- 在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码。使用 ngCordova可以解决这个问题。
ionic步骤
1、环境的配置
2、npm install -g cordova ionic (可能会有报错所以拆开来进行下载)
3、ionic start myApp tabs (下载myApp项目文件)
4、ionic platform add android (注意这一步经常会被发生改变
可能会缩减成以下步骤
1.ionic platform add android
2.可能会提示你上面这条命令废除 cordova platform add android
3.ionic run android
)
ionic介绍
- apk可以解压,将apk文件后缀改成zip就能够看到里面的内容
- 如何开启手机的开发者模式,只有开启了开发者模式并且手机驱动安装成功,下面步骤才能使用
- 如何直接运行与手机
- 通过adb devices 检测手机是否正常连上电脑
- 通过ionic run android 将apk文件通过命令安装到手机上面
项目初始文件结构介绍
1、hooks:文件夹是伴随Cordova的安装自动生成的文件夹,该文件夹有脚本可以定制Cordova命令。一般情况下,不对该文件夹中的文件进行更改。
2、plugins:用于放置Ionic扩展文件的文件夹。比如升级或者扩展Ionic的时候。为了安装这些扩展文件,你需要确保安装了Git。通常不对该文件夹进行改动。
3、.bowerrc:Ionic偶尔会使用Bower去安装一些组件,所以bowerrc文件产生了,通常不对该文件进行修改
4、.gitignore:当使用Git和GitHub追踪项目,.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库(repository),你可以使用gitignore防止文件转移。
5、config.xml:config.xml是另外一个Cordova安装文档,通常也不需要修改。
6、gulpfile.js:控制着允许Ionic自动重载浏览器的自动操作。同时,它还负责其他事情,比如:处理文件。
7、package.json:package.json文件在许多Nodejs项目里都会出现, 它定义了这个项目所需要的各种模块,以及项目的配置信息,比如名称、版本、许可证等元数据 。 Node和Gulp工具可以依据文件中的项目需求和配置信息,去履行责任。一般不修改该文件。
8、scss文件夹:如果在Ionic项目,想要使用CSS的预处理语言SASS来修改应用程序的样式,那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言,你可以在相应scss文件添加SASS命令,或者更改目录结构,增加子文件夹。如果你想在项目中使用SASS去工作,你需要首先运行Ionic SASS 命令。
9、www文件夹:先来看看www文件夹的内容结构:
10 platforms 用来搭建不同平台依赖的文件
11 res resources 都是用来存放 软件图片 和进去软件图片
——-以下部分摘录笔记———-
配置tabs选项卡的位置
// config.js
config(function($ionicConfigProvider){
})
$ionicConfigProvider.platform.android.tabs.position("bottom");
$ionicConfigProvider.platform.ios.tabs.position("bottom");
//$ionicConfigProvider.platform.ios.tabs.style('standard');
//$ionicConfigProvider.platform.ios.tabs.position('bottom');
//$ionicConfigProvider.platform.android.tabs.style('standard');
//$ionicConfigProvider.platform.android.tabs.position('bottom');
//
//$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
//$ionicConfigProvider.platform.android.navBar.alignTitle('center');
//
//$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
//$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
//
//$ionicConfigProvider.platform.ios.views.transition('ios');
//$ionicConfigProvider.platform.android.views.transition('android');
纯css, //和js形式的组件
1.ionic CSS
如果你对 AngularJS 这样的东西不感兴趣,可以只使用 ionic 的 CSS 框架:直接在 HTML 中引入 ionic.css 就可以了。
ionic 的 CSS 框架主要提供预定义的 CSS 类,来帮助我们快速构建适用于手机端的 UI。
1.1.ionic CSS 组成
- 基本布局类
- 颜色和图标类
- 界面组件类
- 栅格系统类
1.2.ionic CSS 布局
1.2.1固定高度条块定义
- .bar
- 将元素声明为屏幕上绝对定位的块状区域,具有固定的高度(44px)
1.2.2设置条块的位置
- .bar-header
- 置顶
- .bar-subheader
- 在 .bar-header之下置顶
- .bar-footer
- 置底
- .bar-subfooter
- 在.bar-footer之上置底
1.2.3.中间内容区别
- .content
- 流式定位,内容在文档流中按顺序定位
- .scroll-content
- 绝对定位,内容元素占满整个屏幕
1.2.4. 拥有.bar样式元素的子元素
- 1.可以设置标题文字
<div class="bar">
<h1 class="title">我是标题</h1>
</div>
- 2.可以设置button按钮
<div class="bar">
<button class="button">我是按钮</button>
</div>
- 3.可以设置工具栏
- 工具栏包含一组按钮。对用作工具栏的元素,应用.button-bar样式,通常 使用div元素作为工具栏。
<div class="button-bar">
<button class="button">按钮1</button>
<button class="button">按钮1</button>
<button class="button">按钮1</button>
</div>
- 4.给bar条块上加上input框
- 首先要给bar元素应用 .item-input-inset样式
- 再给bar条块内加上,一个input用label包裹,给label应用.item-input-wraper样式
<div class="bar item-input-inset">
<label for="" class="item-input-wrapper"><input type="text"></label>
</div>
1.3.颜色和图标
1.3.1.颜色
- ionic定义了九种前景/背景/边框的色彩样式
- 前景色:
- .light
- .stable
- .positive
- .calm
- .balanced
- .energized
- .assertive
- .royal
- .dark
- 边框
- .light-border
- .stable-border
- .positive-border
- …
背景
- .light-bg
- .stable-bg
- …
button按钮颜色
- .button-light
- .button-stable
- …
bar条块颜色
- .bar-light
1.3.2.图标
- .icon
- 将元素声明为图标
- .ion-{icon-name}
- 声明要使用的具体图标
<i class="icon ion-speakerphone"></i>
1.3.3.内边距
- .padding
- .padding-bottom
- .padding-left
- .padding-top
- .padding-right
- 为元素添加10px的内边距
1.4.列表样式
1.4.1列表
- .list
- .list-borderless
- 加上表示无边框
- .list-inset
- 边距缩近 并添加圆角
- .card
- 阴影 放大看
<div class="list">
<div class="item">列表哦</div>
<div class="item">列表哦
<!-- span是徽章 -->
<span class="badge badge-assertive">0</span>
</div>
<div class="item">列表哦</div>
</div>
1.4.2列表成员
- .item-borderless
- 无边框
- .item-{color}
- 配色,那9种颜色
- .item-icon-left/righ
- 图标位置
1.5.按钮
1.6.开关
<div class="item item-toggle">
iMessage
<label class="toggle toggle-balanced">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
1.7.复选框
-复选框通常用来在一组列表中选中部分成员
<div class="item item-chexkbox">
<div class="checkbox">
<input type="checkbox">
</div>
</div>
1.8.单选框
- 最新版并没有提供单独的样式,需要配合anguar指令来做
1.9.滚动条
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
1.10.选项卡
- 1.只有文字
<div class="tabs">
<a class="tab-item">
首页
</a>
<a class="tab-item">
购物车
</a>
<a class="tab-item">
设置
</a>
</div>
- 2.只有图标
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-android-cart"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
- 3.图标在上,文字在下
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home"></i>
首页
</a>
<a class="tab-item">
<i class="icon ion-android-cart"></i>
购物车
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
- 图标在左,文字在右
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
首页
</a>
<a class="tab-item">
<i class="icon ion-android-cart"></i>
购物车
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
设置
</a>
</div>
1.11.徽章
- 在.tab-item同级加上has-badge,并添加一个子元素拥有badge样式
<div class="tabs tabs-icon-top ">
<a class="tab-item has-badge">
<i class="badge">3</i>
<i class="icon ion-home"></i>
首页
</a>
</div>
ionic之popup组件
- 代码
var myPopup = $ionicPopup.show({
template:'<input>',
title:'请输入密码',
subTitle:'接下来要输入密码',
scope:$scope,
buttons:[
{
text:'取消',
onTap:function(e){
console.log('取消');
e.preventDefault();
myPopup.close()//关闭窗口
// return false;
}
},
{
text:'<b>Save</b>',
type:'button-positive',//样式
onTap:function(e){// 点击事件
console.log('保存');
}
}]
})
ionic之actionsheet组件
- 代码
var hidesheet= $ionicActionSheet.show({
buttons:[//最终需要显示的普通按钮
{text:'<b>打开相机</b'},
{text:'打开相册'}
],
destructiveText:'删除',// 删除按钮
cancelText:'Cancel',// 取消按钮
cancel:function(){
// 这里是删除按钮事件
console.log('删除')
},
buttonClicked:function(index){
console.log(index);
hidesheet();//隐藏弹框
// return true
},
destructiveButtonClicked:function(){
console.log('删除');
}
})
ionic之modal组件
- 代码
<script id="my-modal.html" type="text/ng-template">
<!-- 所有模态框的内容都写在这个ion-modal-view组件中 -->
<ion-modal-view>
<ion-header-bar>
<h1 class="title">我是标题</h1>
</ion-header-bar>
<ion-content>
哈哈哈
</ion-content>
</ion-modal-view>
</script>
```
```javascript
$ionicModal.fromTemplateUrl('my-modal.html',{
scope: $scope,// 表示我们可以在模板中直接使用当前的$scope
animation:'slide-in-up'
}).then(function(modal){
$scope.modal=modal;
});
```
### ionic之Popover
- 在使用popover的时候记得去除掉opacity: 0,不然样式无法显示
- 代码
```html
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">我是标题</h1>
</ion-header-bar>
<ion-content>
这里的内容
</ion-content>
</ion-popover-view>
</script>
<div class="se-preview-section-delimiter"></div>
$ionicPopover.fromTemplateUrl(
'my-popover.html'// script标签的id,或者静态文件
,{
scope:$scope
}).then(function(popover){
$scope.popover=popover;
})
$scope.openPopover=function($event){
console.log();
$scope.popover.show($event);
}
$scope.closePopover = function(){
$scope.popover.hide();
}
<div class="se-preview-section-delimiter"></div>
ng-cordova简介
- ngCordova是在Cordova Api封闭成Angular的服务,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。
- 官网
ng-cordova使用步骤
- 用来调用系统硬件。
- 5.11.2 使用步骤
- 下载ng-cordova的js文件
在项目根目录下面打开命令窗口,输入 .bowerrc
bower install ngCordova -save
- 在index.html文件中引入ng-cordova.js文件
- 在app.js(项目入口中)引入依赖
angular.module('myApp', ['ionic','ngCordova'])
4、在$ionicPlatform.ready事件中使用插件功能,就是开始使用我们的插件
5、下载相应功能的插件,按照官方文档使用就可以了
在项目根目录下面打开命令窗口
cordova plugin add [插件名称]
- 下载ng-cordova的js文件
调用摄像头保存头像功能
- 安装摄像头插件
- 在项目根目录打开命令行执行
cordova plugin add cordova-plugin-camera
- 在项目根目录打开命令行执行
- 是先点开actionsheet,然后调用$ionicCamera
$ionicActionSheet.show({
buttons:[
{text:'照相机'},
{text:'相册'}],
titleText:'请求选择文件',
cancelText:'取消',
buttonClick:function(index){
switch(index){
case 0:getPicFromCamera();break;
case 1:getPicFromAlbum();break;
}
return true;
}
});
// 参数
var options = {
quality: 100,// 图片质量
destinationType: Camera.DestinationType.DATA_URL,// 读取到的图片的数据类型,读取图片为base64编码
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,// 图片的来源的,这是表示相册
// sourceType: Camera.PictureSourceType.CAMERA,// 这个表示来源是相机
allowEdit: true,// 是否允许编辑
encodingType: Camera.EncodingType.JPEG,// 图片编码类型,jpeg
targetWidth: 100,// 图片宽度
targetHeight: 100, // 图片高度
popoverOptions: CameraPopoverOptions, // 弹出框类型
saveToPhotoAlbum: false, // 是否保存到相册
correctOrientation:true // 是否允许调整方向
};
$cordovaCamera.getPicture(options).then(function(imageData){
// imageData是图片base64编码后的数据
// 获取页面的img对象
var image = document.getElementById('touxiang');
// 设置其src属性
// base64编码
image.src="data:image/jpeg;base64,"+imageData;
// 存储到本地存储
localStorage["touxiang"]=imageData;// 是只能存储字符
},function(err){
// 此处是发生错误时的回调.
});