Ionic2 自学须知的基本知识点
http://www.cnblogs.com/zsl123/p/5991336.html
Ionic(ionicframework)一款接近原生的HTML5移动App开发框架。
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用,基于PhoneGap的编译平台,可以实现编译成各个平台的应用程序。
注意:这里讲的是ionic2的知识点,毕竟它与ionic 1.0有着较显著的区别。
(一)Ionic 的安装与运行
1、 下载安装 Node.js,可以在命令行中使用node–v 命令查看当前安装的node.js的版本;
2、 使用 npm install ionic –g命令可以安装Ionic,不过需要注意的是此时安装的版本为Ionic 1.0版本。可以使用npm install ionic@beta–g 安装beta版本,如可以使用npm installionic@2.0.0-beta.22 –g安装beta.22版本;
3、 安装Ionic 后,可以使用 ionic start ionicdemo --v2初始化一个空项目,默认采用tabs template作为初始化项目的模板,如果需要其他的模板,那么在项目名称后面添加上对应的模板名称即可,如:ionic start ionicdemo tutorial --v2;(--v2参数明确了使用2.0版本去初始化项目)
4、 使用 ionic serve可以运行Ionic项目;
5、 使用 ionic platform add Android或ionic platform add iOS命令可以添加两个手机平台的部署文件(使用ionicplatform list 命令可以查看当前的平台信息);
6、 在项目中添加了两个平台的部署文件,可以通过platform文件夹下进行查看,相应地,在Xcode导入ios部署文件或在Android studio导入Android部署文件,可以进行相应地真机调试;
(二)Ionic页面的生命周期
- // 页面被加载完成后调用的函数,切换页面时并不会进行重新加载,因为有cache的存在
- onPageLoaded() {
- console.log('page 1: page loaded.');
- }
- // 页面即将进入的时候
- onPageWillEnter() {
- // 在这里可以做页面初始化的一些事情
- console.log('page 1: page will enter.');
- }
- // 页面已经进入的时候
- onPageDidEnter() {
- console.log('page 1: page did enter.');
- }
- // 页面即将离开的时候
- onPageWillLeave() {
- console.log('page 1: page will leave.');
- }
- // 页面已经离开的时候
- onPageDidLeave() {
- console.log('page 1: page did leave.');
- }
- // 从 DOM 中移除的时候执行的生命周期
- onPageWillUnload() {
- }
- // 从 DOM 中移除执行完成的时候
- onPageDidUnload() {
- }
(三)Ionic组件
1、Tab控件
图标:http://ionicframework.com/docs/v2/ionicons/
tabs.html
- <ion-tabs>
- <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
- <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
- <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
- </ion-tabs>
- <ion-tabs>
- <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
- <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
- <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3"></ion-tab>
- </ion-tabs>
- <ion-tabs>
- <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
- <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
- <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
- </ion-tabs>
默认首先进入第三个tab页面:
Html控制
- <ion-tabs selectedIndex="2">
- <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
- <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
- <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
- </ion-tabs>
JS控制
- <ion-tabs #mainTabs>
- <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
- <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
- <ion-tab [root]="tab3Root" tabTitle="用户中心" tabIcon="person"></ion-tab>
- </ion-tabs>
- import {Component} from '@angular/core';
- import {HomePage} from '../home/home';
- import {AboutPage} from '../about/about';
- import {ContactPage} from '../contact/contact';
- import {Tabs} from 'ionic-angular';
- import {Injectable, ViewChild} from '@angular/core';
- @Component({
- templateUrl: 'build/pages/tabs/tabs.html'
- })
- export class TabsPage {
- @ViewChild('mainTabs') tabRef: Tabs;
- private tab1Root: any;
- private tab2Root: any;
- private tab3Root: any;
- constructor() {
- // this tells the tabs component which Pages
- // should be each tab's root Page
- this.tab1Root = HomePage;
- this.tab2Root = AboutPage;
- this.tab3Root = ContactPage;
- }
- ionViewDidEnter() {
- this.tabRef.select(2);
- }
- }
2、Button控件
- <button>Basic Button</button>
- <button gray>Gray Button</button>
- <button danger>Danger Button</button>
- <button outline>Outline Button</button>
- <button clear>Clear Button</button>
- <button round>Round Button</button>
- <button block>Block Button</button>
- <button small>Small Button</button>
- <button large>Large Button</button>
- <button>
- <ion-icon name="home"></ion-icon>
- Button
- </button>
- <button>
- Button
- <ion-icon name="home"></ion-icon>
- </button>
- <button>
- <ion-icon name="home"></ion-icon>
- </button>
3、Input控件
- <ion-list>
- <ion-item>
- <ion-label floating>用户名</ion-label>
- <ion-input type="text" value="" [(ngModel)]="user.username"></ion-input>
- </ion-item>
- <ion-item>
- <ion-label stacked>密码</ion-label>
- <ion-input type="password" value="" [(ngModel)]="user.password"></ion-input>
- </ion-item>
- </ion-list>
- <button block (click)="showFill()">登录</button>
- export class ContactPage {
- public user = {
- username: 'parry',
- password: ''
- };
- constructor(private navCtrl: NavController) {
- }
- showFill() {
- alert(this.user.username);
- console.log(this.user.password);
- }
- }
4、Loading控件、Alert控件
- import {Component} from '@angular/core';
- import {NavController, LoadingController, AlertController} from 'ionic-angular';
- @Component({
- templateUrl: 'build/pages/contact/contact.html'
- })
- export class ContactPage {
- public user = {
- username: 'parry',
- password: ''
- };
- constructor(private navCtrl: NavController,
- private loadingCtrl: LoadingController,
- private alertCtrl: AlertController) {
- this.navCtrl = navCtrl;
- }
- showFill() {
- alert(this.user.username);
- console.log(this.user.password);
- }
- login() {
- /*// 创建 loading 窗口,模拟3秒后登录成功, loading 窗口消失
- let loading = Loading.create({
- content: '正在登录...',
- duration: 3000, //单位是毫秒
- });
- this.navCtrl.present(loading);
- // 真实的逻辑应该是:去请求登录的 API,返回结果后,进行loading窗口的隐藏
- setTimeout(() => {
- loading.dismiss();
- }, 3000);*/
- if(this.user.username == '' || this.user.username.length <= 3) {
- // alert 提醒用户注意用户名的正确性
- let alertUserNameError = this.alertCtrl.create({
- title: '用户中心',
- subTitle: '输入的用户名格式不正确!',
- buttons: ['OK']
- });
- alertUserNameError.present();
- } else {
- let loading = this.loadingCtrl.create({
- content: 'Please wait...',
- spinner: 'dots',
- duration: 3000, //单位是毫秒
- });
- loading.present();
- setTimeout(() => {
- loading.dismiss();
- }, 3000);
- }
- }
- }
5、Toast控件
- // 2. 使用 Toast 控件
- let toast = this.toastCtrl.create({
- message: '输入的用户名格式不正确!',
- duration: 3000,
- });
- toast.present();
6、Grid布局
- <ion-row>
- <ion-col>
- <div class="textAlignRight marginTop10"><button clear>还没有账号?点击注册</button></div>
- </ion-col>
- </ion-row>
7、 modal控件
- // 导入注册页面
- import {Register} from '../contact/register';
- // 打开注册页面
- openRegisterPage() {
- let modal = this.modalCtrl.create(Register);
- modal.present();
- }
- import {Component} from '@angular/core';
- @Component({
- templateUrl: 'build/pages/contact/register.html'
- })
- export class Register {
- }
8、 Toolbar控件
- <ion-toolbar>
- <ion-title>用户注册</ion-title>
- <ion-buttons end>
- <button (click)="dismiss()">
- <span showWhen="ios">取消</span>
- <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
- </button>
- </ion-buttons>
- </ion-toolbar>
修改:
- <ion-header>
- <ion-toolbar>
- <ion-title>用户注册</ion-title>
- <ion-buttons end>
- <button (click)="dismiss()">
- <span showWhen="ios">取消</span>
- <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
- </button>
- </ion-buttons>
- </ion-toolbar>
- </ion-header>
- <ion-content padding>
- <h5>Parameters passed:</h5>
- </ion-content>
9、 List控件
- <ion-list>
- <ion-item>
- <ion-avatar item-left><img src="../images/1.jpg" alt="头像"></ion-avatar>
- <h2>哈哈</h2>
- <p>(ˇˍˇ) 想~</p>
- </ion-item>
- <ion-item>
- <ion-avatar item-left><img src="../images/2.jpg" alt="头像"></ion-avatar>
- <h2>美女</h2>
- <p>(ˇˍˇ) 想~</p>
- </ion-item>
- </ion-list>
绑定数据源:
数据源的声明
- // 一般数据源都是从 api 进行获取,这里我们只是模拟一些已经取到了数据
- public contacts = [
- {'contactid': 1, 'contactname': '梦小白', 'contacttext': '18888888888'},
- {'contactid': 2, 'contactname': '梦小白2', 'contacttext': '18888888888'},
- {'contactid': 3, 'contactname': '梦小白3', 'contacttext': '18888888888'},
- {'contactid': 4, 'contactname': '梦小白4', 'contacttext': '18888888888'},
- {'contactid': 5, 'contactname': '梦小白5', 'contacttext': '18888888888'},
- {'contactid': 6, 'contactname': '梦小白6', 'contacttext': '18888888888'},
- {'contactid': 1, 'contactname': '梦小白7', 'contacttext': '18888888888'},
- {'contactid': 2, 'contactname': '梦小白8', 'contacttext': '18888888888'},
- {'contactid': 3, 'contactname': '梦小白9', 'contacttext': '18888888888'},
- {'contactid': 4, 'contactname': '梦小白10', 'contacttext': '18888888888'},
- {'contactid': 5, 'contactname': '梦小白11', 'contacttext': '18888888888'},
- {'contactid': 6, 'contactname': '梦小白12', 'contacttext': '18888888888'},
- ];
- <ion-list>
- <ion-item *ngFor="#contact of contacts" (click)="itemClick($event, contact)">
- <ion-avatar item-left><img src="../images/{{contact.contactid}}.jpg" alt="头像"></ion-avatar>
- <h2>{{contact.contactname}}</h2>
- <p>{{contact.contacttext}}</p>
- </ion-item>
- </ion-list>
10、卡片布局
- <ion-card>
- <ion-item>
- <ion-avatar item-left>
- <img src="../images/6.jpg" alt="头像">
- </ion-avatar>
- <h2>Elon Musk</h2>
- <p>来自 iPhone 6s</p>
- </ion-item>
- <img src="../images/c1.jpg" alt="图片">
- <ion-card-content>
- <p>我又发布了一辆新车,上天入地舍我其谁?呵呵</p>
- </ion-card-content>
- <ion-item>
- <button primary clear item-left><ion-icon name="thumbs-up"></ion-icon><div>888 赞</div></button>
- <button primary clear item-left><ion-icon name="text"></ion-icon><div>600 评论</div></button>
- <ion-note item-right>
- 1小时前
- </ion-note>
- </ion-item>
- </ion-card>
11、navigation控件
- itemClick(event, contact) {
- //console.log(event);
- //console.dirxml(contact);
- //alert(contact.contactname);
- this.navCtrl.push(ContactDetails, {item: contact});
- }
ContactDetails页面
- /**
- * Created by Administrator on 2016/8/23 0023.
- */
- import {Component} from '@angular/core';
- import {NavParams} from 'ionic-angular';
- @Component({
- templateUrl: 'build/pages/about/contactdetails.html'
- })
- export class ContactDetails {
- private item = '';
- constructor(public params: NavParams) {
- this.item = params.data.item;
- }
- }
- <ion-header>
- <ion-navbar>
- <ion-title>{{item.contactname}}</ion-title>
- </ion-navbar>
- </ion-header>
- <ion-content padding>
- {{item.contactname}} 的手机号码为:{{item.contacttext}}
- </ion-content>
(四)Cordova组件介绍
1、Image Picker组件
2、Geolocation组件
- // 获取位置信息
- Geolocation.getCurrentPosition().then((resp) => {
- console.log(resp.coords.latitude);
- console.log(resp.coords.longitude);
- });
3、Local Notifications组件
- // 本地提醒组件
- LocalNotifications.schedule({
- text: '本地化提醒-您启动了Ionic App',
- at: new Date(new Date().getTime() + 10000),
- sound: null
- });
(五)项目实战
1、快速生成App图标和启动页面
MakeAppicon
Ios.hvims.com
Launcher Icon Generator
iconhandbook.co.uk/reference/chart/android
2、使用localStorage存储状态信息
localStorage.setItem(key, value)
localStorage.getItem(key)
注:Modal页面的关闭需要使用到ViewController中的dismiss方法。
3、Modal关闭后父页面的概念和方法
4、Ionic中的网络请求
跨域请求问题: http://enable-cors.org/ (当然在App中不会出现,只会在浏览器调试的过程中出现)
- // 这里是请求 API 的实现,注意跨域请求的问题,请参见 http://enable-cors.org/
- this.http.get('http://xxx/account/Login?email=' + this.user.username + '&password=' + this.user.password)
- .subscribe(data => {
- let res = data.json();
- if(res.LoginStatus == 1) {
- localStorage.setItem('username', this.user.username);
- localStorage.setItem('logined', 'true');
- //自身 modal 隐藏
- this.viewCtrl.dismiss(this.user.username);
- loading.dismiss(); //登录进度隐藏
- } else {
- let toast = this.toastCtrl.create({
- message: '登录失败!',
- duration: 2000,
- });
- toast.present();
- }
- }, err => {
- let toast = this.toastCtrl.create({
- message: '登录失败!',
- duration: 2000,
- });
- toast.present();
- });
5、List中滑动删除数据
- <ion-list>
- <ion-item-sliding *ngFor="#contact of contacts">
- <ion-item (click)="itemClick($event, contact)">
- <ion-avatar item-left><img src="data:images/{{contact.contactid}}.jpg" alt="头像"></ion-avatar>
- <h2>{{contact.contactname}}</h2>
- <p>{{contact.contacttext}}</p>
- </ion-item>
- <ion-item-options>
- <button danger (click)="removeContact(contact)">
- <span padding><ion-icon name="trash"></ion-icon> 删除</span>
- </button>
- </ion-item-options>
- </ion-item-sliding>
- </ion-list>
6、集成极光推送实现消息推送
// 设置客户端的别名,用于定向接收消息的推送
window.plugins.jPushPlugin.setAlias(‘Client’ + loginResult.UserId);
// Client(只能是单一值):单独的一台设备绑定到jPush,就相当于设备的ID号码,server端推送的时候只能推送到ID级别的。
var arrayObj = new Array(‘Tags’ + loginResult.UserId);
window.plugins.jPushPlugin.setTags(arrayObj);
//Tags:其实就是分组的意思,那么这样指定后,在用户登录的时候 分配一个分组名给用户,那么推送消息的时候,就可以推送给这个分组。 应用场景:如果用户有多个设备,并且这些设备上可以同时登录app,那么我们推送消息应该推送给这几个设备。
//Client – 1,只是这一台设备收到通知。
//Tag – 1,多台设备都设置叫 Tag – 1。
7、iOS打包与AppStore上架
8、Android打包与发布
参考学习:
http://kangax.github.io/compat-table/es6/
https://github.com/driftyco/ionic-preview-app/
http://www.typescriptlang.org/docs/
http://mhartington.io/post/ionic2-external-libraries/
http://www.imooc.com/article/14960
button是简单的组件,包含文字和图标以及很多属性。
属性
先不管按钮的click事件,简单的学习下控制按钮样式的一些属性:
color
顾名思义,就是控制按钮的颜色
<!-- Colors -->
<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="light">Light</button>
<button ion-button color="dark">Dark</button>
多说明一句,上面使用的color,都是定义在src/theme/variables.scss
文件中的
shape
有以下三种形状:
- full
- block
- round
前两个我没有发现什么大的区别,好像都是撑满父容器,有了解区别的还请指教
round顾名思义就是圆角按钮的意思
<!-- Shapes -->
Shapes:
<br>
<table>
<tr>
<td>
<button ion-button block>Block Button</button>
</td>
<td></td>
</tr>
</table>
<button ion-button round>Round Button</button>
outline
使用该属性将使按钮只有边框。
<!-- Outline -->
<button ion-button full outline>Outline + Full</button>
<button ion-button block outline>Outline + Block</button>
<button ion-button round outline>Outline + Round</button>
Icons
在按钮中增加图标的属性,有以下三个值:
- icon-left : 图标在文字左边
- icon-right :图标在文字右边
- icon-only :只有图标
<!-- Icons -->
<button ion-button icon-left>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
<button ion-button icon-right>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="star"></ion-icon>
</button>
Size
这个很简单,就是制定按钮的大小,有以下三个值:
- Large
- Default
small
大,默认,小<!-- Sizes -->
<button ion-button large>Large</button> <button ion-button>Default</button> <button ion-button small>Small</button>
高级用法
其实就是和angular2一起使用动态设置样式的用法
直接上示例:
<button ion-button [color]="isDanger?'danger':'primary'">advanced</button>
<!-- Bind the color and round inputs to an expression -->
<button ion-button [color]="myColor" [round]="isRound">
Secondary (Round)
</button>
<!-- Bind the color and clear inputs to an expression -->
<button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
Primary (Clear)
</button>
<!-- Bind the color, outline and round inputs to an expression -->
<button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
Dark (Solid + Round)
</button>
在ts中如下使用:
export class ButtonPage {
constructor(public navCtrl: NavController,public navParams:NavParams) {
}
isDanger: boolean = true;
isSecondary: boolean = false;
isRound: boolean = true;
isOutline: boolean = false;
isClear: boolean = true;
myColor: string = 'secondary';
myColor2: string = 'dark';
}
Ionic2 自学须知的基本知识点的更多相关文章
- Javascript:必须知道的Javascript知识点之“单线程事件驱动”
heiboard: Javascript:必须知道的Javascript知识点之“单线程事件驱动”
- JS自学总结的零散知识点
1.使用new关键字的时候后面不能接这种变量而是接一个结构constructor 例如由function引导的结构 而不是像如下这样 var car={ lunzi : 4}; 这个只是一个变量而不是 ...
- 必须知道的String知识点
1.String 类型的概述 Java中String就是Unicode字符序列,例如,字符串"Java\u2122"由5个Unicode字符J.a.v.a和 ™ 组成.不像C/C+ ...
- 你必须知道的MySQL知识点
什么是索引 索引是帮助MySQL高效获取数据的排好序的数据结构 索引数据结构(掌握) 数据结构可视化 前置知识:树的高度越低查询效率越高 二叉树:不能自平衡,极端情况出现倾斜,查询效率和链表类似 红黑 ...
- 如何自学Java 经典
JAVA自学之路 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟 ...
- 如何自学Java
转自:http://www.360doc.com/content/12/0624/19/5856897_220191533.shtml JAVA自学之路 JAVA自学之路 一:学会选择 为了就业, ...
- 【转】Java自学之路——by马士兵
作者:马士兵老师 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟 ...
- Java自学之路(新手一定要看)
Java自学之路(新手一定要看) 转自尚学堂 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游 ...
- 马士兵_JAVA自学之路(为那些目标模糊的码农们)
转载自:http://blog.csdn.net/anlidengshiwei/article/details/42264301 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. ...
随机推荐
- php 共享内存学习(shmop函数)
问题:希望可以在进程间共享变量,为共享数据提供快速访问 解决方案:除了可以使用APC模块,还可以用shmop或System V共享内存 //创建键 //将一个可访问的文件路径名转换为一个可供 shmo ...
- jdeveloper 恢复默认配置
1>jdeveloper的环境设置出现问题,恢复默认的配置,需要删除保存再登录账户中的配置文件,以达到恢复默认配置的目的.只需删除以下配置文件目录即可. C:\Users\当前登录用户名\App ...
- java常量池与对象存储
一 数据存储位置 我们先来谈谈数据的存储位置,有五个地方可以存储数据 (1)寄存器:这是最快的存储区,因为它位于不同于其他存储区的地方- ...
- Windows c++面向对象与可视化编程的基础知识
1.Windows的程序设计语言:Visual C++,Visual Basic ,Visual c#都是“面向对象”的程序设计语言; 2.Windows的程序设计的对象:是Windows的规范部件, ...
- [Java] 获取当前Project所在的路径
String projectPath = System.getProperty ("user.dir").toString()
- [Training Video - 1] [Introduction to Web services]
What is a web service? http://webservicex.net/ws/default.aspx WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 跨编程 ...
- Java 设计模式系列(十七)中介者模式
Java 设计模式系列(十七)中介者模式 用一个中介对象来封装一系列的对象交互.中介者使得各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立的改变它们之间的交互 一.中介者模式结构 Media ...
- 图灵社区 书单推荐:成为Java顶尖程序员 ,看这11本书就够了
java书单推荐 转自 http://www.ituring.com.cn/article/211418 “学习的最好途径就是看书“,这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两 ...
- asp.net core 1.1 + mysqlsugar + y-ui Demo
最近研究下asp.net core 此源码架构 : .net core mvc 简单三层 依赖注入(.net core自带) mysql + mysqlsugar +sqlsugarcore 需要修 ...
- 【转】Defunct进程 僵尸进程
在测试基于 DirectFB+Gstreamer 的视频联播系统的一个 Demo 的时候,其中大量使用 system 调用的语句,例如在 menu 代码中的 system("./play&q ...