ionic2简单分析
Angular2是一个全新的框架,它从ReactJS以及其他web移动框架借鉴了不少经验和优点,巨大的改进使得开 发体验和性能已经超越了Angular1,而且Ionic2无论是从UI交互效果和跨平台的差异性都优于Ionic1
1. 安装使用
ionic2的安装运行基本和前版本的ionic基本一致,非常简单。
npm install -g ionic # 安装ionic工具集
ionic start projectName --v2 # --v2表示使用ionic2 + angular2的组合方式创建项目,否则使用ionic + angular创建项目,此时ionic会下载所需要的相关包
cd projectName # 进入创建的项目名称目录
ionic serve # 启用浏览器调试应用页面,这时通过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就可以打开应用页面了
2. 和ionic的区别
ionic2是建立在angular 2上的,angular 2推荐使用typescript进行项目的开发,所以到了ionic2,就可以这样来开发我们的项目了。一般情况下,我们创建应用完成后,www/目录为我们页面的源代码。其目录结构如下:
+ www/
+ css/
+ img/
+ js/
+ lib/
+ templates/
+ index.html
+ manifest.json
+ service-worker.js
我们以www/js/app.js为例。
// 入口JavaScript文件,配置页面路由与加载的视图
// ionic版本写法
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
}).controller('MainCtrl', function($scope){
$scope.data ={
text: 'Hello World'
}
}
) }); // ionic 2写法
@Component({
templateUrl:'main/main.html'
});
export class MainCmp {
constructor(){
this.data ={
text: 'Hello World'
}
}
}
templates/tabs.html的内容如下。
<ion-content ng-controller="MainCtrl">
<ion-item> </ion-item>
</ion-content>
ionic2里面里可以这样来适应原来的版本:
<ion-content ng-controller="MainCtrl as main">
<ion-item> </ion-item>
</ion-content>
值得注意的是,这里 <ion-content>
等为ionic-angular提供的组件模块,它类似于Webcomponent的方式,能被angular识别解析。通俗的理解就是一个类似bootstrap的UI组件库。
3、组件
ionic2除了提供统一便捷式APP打包的解决方案,还提供了一个用于移动端的UI组件库。其实类似的组件库有很多,bootstrap、frozenui、wui等等,但是与其它框架提供UI组件不同的是,ionic2提供的组件规范是面向未来Webcomponent的方式实现的。
例如对于一个对话框组件,一般的UI框架可能这样来实现,相信类似的框架大家多少用过。这里以frozenui为例,一般通过对元素添加不同的class名称来控制组件的样式和显示,而像 ui-dialog
这些类名是UI库统一定义好的。
<div class="ui-dialog">
<div class="ui-dialog-cnt">
<header class="ui-dialog-hd ui-border-b">
<h3>新手任务</h3>
<i class="ui-dialog-close" data-role="button"></i>
</header>
<div class="ui-dialog-bd">
<h4>标题标题</h4>
<div>这是标题的内容!</div>
</div>
<div class="ui-dialog-ft">
<button type="button" data-role="button">取消</button>
<button type="button" data-role="button">开通</button>
</div>
</div>
</div>
<script class="demo-script">
$(".ui-dialog").dialog("show");
</script>
但是使用ionic2,你可能会这样来使用,在这里,我们没有去对模块元素添加一些样式的类,因为angular2将自定义组件标签 ion-header
对应的CSS已经通过Webcomponent的形式引入了,那么我们只用管怎样使用结构层结构就可以了,但是这里注意的是 primary block
等类名没有添加到class中。
<ion-header>
<ion-navbar>
<ion-title>Confirm</ion-title>
</ion-navbar>
</ion-header> <ion-content padding>
<button primary block (click)="doConfirm()">确认对话框</button>
</ion-content> <script>
import { AlertController } from 'ionic-angular';
export class MyPage {
constructor(public alertCtrl: AlertController) {}
showConfirm() {
let confirm = this.alertCtrl.create({
title: '标题标题',
message: '这是标题的内容',
buttons: [{
text: '取消',
handler: () => {
console.log('取消');
}
}, {
text: '确定',
handler: () => {
console.log('A确定');
}
}]
});
confirm.present();
}
}
</script>
其它的相关组件的方式类似,同时你也可以去自定义遵循Webcomponent的element 组件。
更多API: http://ionicframework.com/docs/v2/components/#alert-prompt
4.模板的语法结构
ionic2的模板语法与Ionic1非常相似,但是看起来又有点古怪,其实Ionic2的模板语法更为简洁。我们来看一下对比。
ionic1:
<img ng-src="{{photo.image}}" />
- ionic2:
<img [src]="photo.image" />
我们看一下 事件调用:
- ionic1:
<button ng-click="doSomething()">
- ionic2:
<button (click)="doSomething()">
5.它仅仅是javascript而已
ionic1和angular1都有一些特定的语法,但是追其根本只不过是javascript
但是从使用上,EM6/ TS能够让你避免很多问题,比如说:
jsvascript:
this.someData = null;
var me = this;
doSomething(function(data){
me.someData = data;
});
看到了么?你问了使用this指针,不得不在函数外面作为变量me的引用,但是你使用了EM6:
this.someData = null; doSomething((data) => { this.someData = data; })
6、native交互
当然,ionic2还提供了与Native客户端的相互调用能力,前端相关的一套JavaScript调用库被称为Ionic Native。如果在你的APP需要调用Native调用能力。现需要安装引入对应的模块,一边在分析打包时引入。
npm install ionic-native --save
调用时就可以这样来使用。
import {Geolocation} from 'ionic-native'; Geolocation.getCurrentPosition().then(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
}); let watch = Geolocation.watchPosition().subscribe(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
}); // to stop watching
watch.unsubscribe();
使用ionic2也可以使用ES6+的方式来实现。
// ES6 / TypeScript / Ionic 2 / Angular 2
import {Camera} from 'ionic-native';
this.platform().then(() => {
Camera.getPicture().then(
res => console.log("We have taken a picture!"),
err => console.error("Error taking picture", err)
);
});
具体更多API: http://ionicframework.com/docs/v2/native/
7、主题与图标
如果你需要改变ionic2 UI组件库的显示风格,你也可以自定义自己的APP样式。方法也很简单,ionic2 的UI组件库样式引用了通用的样式变量,在 app/theme/app.variables.scss 里面修改响应的颜色和字体值就可以了。这点和其它UI框架是一样的。当然你也可以修改保存多个主题风格的变量文件,以供选择使用。
$colors: ( primary: #387ef5; secondary: #32db64; danger: #f53d3d; light: #f4f4f4; dark: #222; );
对于图标的话就没什么讲的了,和fontawsome一样,ionic2给了UI框架自带的可选图标,大家可以根据下面的文档说明选择使用。
图标参考: http://ionicframework.com/docs/v2/ionicons/
8、总结
总结来看,ionic2不仅为我们提供了打包前端页面应用的解决方案,还为我们提供了一整套的UI组件库,而且组件均使用Web Component规范来实现,开发体验有了较好的改善。
更多API: http://ionicframework.com/docs/v2/
ionic2简单分析的更多相关文章
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
- CSipSimple 简单分析
简介 CSipSimple是一款可以在android手机上使用的支持sip的网络电话软件,可以在上面设置使用callda网络电话.连接使用方式最好是使用wifi,或者3g这样上网速度快,打起电话来效果 ...
- C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析与解决方法
对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...
- 透过byte数组简单分析Java序列化、Kryo、ProtoBuf序列化
序列化在高性能网络编程.分布式系统开发中是举足轻重的之前有用过Java序列化.ProtocolBuffer等,在这篇文章这里中简单分析序列化后的byte数组观察各种序列化的差异与性能,这里主要分析Ja ...
- 简单分析Java的HashMap.entrySet()的实现
关于Java的HashMap.entrySet(),文档是这样描述的:这个方法返回一个Set,这个Set是HashMap的视图,对Map的操作会在Set上反映出来,反过来也是.原文是 Returns ...
- Ffmpeg解析media容器过程/ ffmpeg 源代码简单分析 : av_read_frame()
ffmpeg 源代码简单分析 : av_read_frame() http://blog.csdn.net/leixiaohua1020/article/details/12678577 ffmpeg ...
- FFmpeg的HEVC解码器源码简单分析:解析器(Parser)部分
===================================================== HEVC源码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpeg ...
- FFmpeg资料来源简单分析:libswscale的sws_getContext()
===================================================== FFmpeg库函数的源代码的分析文章: [骨架] FFmpeg源码结构图 - 解码 FFmp ...
- wp7之换肤原理简单分析
wp7之换肤原理简单分析 纠结很久...感觉勉强过得去啦.还望各位大牛指点江山 百度找到这篇参考文章http://www.cnblogs.com/sonyye/archive/2012/03/12/2 ...
随机推荐
- linux常用命令 sort排序命令
排序命令sort sort [选项] 文件名 选项 -f 忽略大小写 -n 以数值型进行排序,默认使用字符串型进行排序 -r 反向排序 -t 指定分割符,默认的分割符是制表符 -k n[,m] 安装自 ...
- work2:贪吃蛇
学号:2017*****7219 姓名:邰嘉琛我的码云贪吃蛇项目仓库:https://gitee.com/tjc666/sesnake/tree/master2) 给出你的各项任务完成时间估算与实际消 ...
- What to do when you have small dataset - 拥有小型数据集时该怎么办
I'm trying to train a classifier with neural network, but I've got too small datasets. Each class ha ...
- nopcommerce 4.1 core 学习 增加商城配置属性
需求: 原本是想用nop 来做国际版的商城,可以像亚马逊那样 国内外通用, 专门增加一个跨进元素属性. 学习里面的一些架构思想. 国内的行情还是 像himall 会比较实用. 这是在商城的综合 ...
- centos 设置中文
[root@mts /]# vim /etc/sysconfig/i18n 1 LANG="en_US.UTF-8" 2 SYSFONT="latarcyrheb-sun ...
- Java容器解析系列(10) Map AbstractMap 详解
前面介绍了List和Queue相关源码,这篇开始,我们先来学习一种java集合中的除Collection外的另一个分支------Map,这一分支的类图结构如下: 这里为什么不先介绍Set相关:因为很 ...
- ftp远端上的文件下载
用linux下的wge下t载比在window下一个个点方便多了,命令如下: wget ftp:// 110.110.110/\*.mseed --ftp-user=username --ftp-pas ...
- RPC 知识科普一下
RPC概念及分类 RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用 ...
- leetcode 415 两个字符串相加
string addstring(string s1,string s2) { string ans=""; ; ,j=s2.length()-;i>=||j>=;i- ...
- elasticsearch(1) 安装和使用
一.简介 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 但是 ...