Ionic混合移动app框架学习

第一章绪论
创建移动app有三种
安卓原生App，使用java语言，目前推荐kotlin语言，开发工具Android studio
IOS原生App，使用Objective-C或者Swift语言，开发工具Xcode
混合移动App，使用web通用语言（HTML，css，js）+开发框架（Ionic）

了解三个独立的App编写Ionic应用程序
Ionic框架：
一个用HTML，css，js构成的用户界面框架，专门用于混合移动app的开发，
包含一个强大的命令行接口（CLI）和一套附属服务（如Ionic View和Ionic Creator）
最上层是Ionic框架自身--中间层是AngularJS（web应用框架）--最下层是Apache Cordova（允许web应用程序调用设备原生能力并将APP转换成原生App）

使用原生app的优劣势
优点：
开发工具和设备平台紧密绑定，IDE明确；
所有的原生api和功能对开发者都可用，不需要桥接方案；
app性能尽可能优化，没有中间层的性能开销；
缺点：
开发语言只能使用一种或几种；主要是因为部署app到IOS和Android，需要熟悉多种语言和工具

最早的app是没有app商店的，属于移动web App应用，通过设备上的web浏览器进行加载，只使用web技术创建App并通过设备浏览器进行发布
优点：可以部署到多个平台，只需要考虑目标市场，升级也只需上传新包到服务器
缺点：app直接运行在本地浏览器，可能会受到浏览器无法访问设备的全部能力，搜索url也不是人人都喜欢

于是乎出现了混合移动App
它也是一种原生移动app，使用web浏览器运行web应用，只是在设备和webview之间用了一个原生app容器桥接
优点：多平台部署，能够访问设备的全部能力（插件系统）；
缺点：性能和容量受浏览器限制，使用插件进行通信会出现一种依赖，不能保证API是可用的，UI组件可用度低

因此出现了改善这种插件的框架Ionic

Ionic技术栈
Ionic自身、AngularJS、cordova
Ionic提供了web app不具备的UI组件，CLI命令行接口（创建、编译、发布Ionic应用程序）、图形化设计构造工具
Ionic主要目标是UI层，集成Angular和Cordova提供接近于原生的体验
AngularJS（构造复杂、单页面web app的MVW框架）
Cordova：能够利用web技术构建嵌入webview的原生app，提供了webview和设备原生层之间的接口，桥接框架，支持多平台，这也是混合移动app的好处
cordova还可以使用自身的命令工具搭建脚手架、编译和部署移动应用。
需要准备的学习条件：HTML、CSS、JS，Angular基础（TypeScript工具）,移动设备

第二章环境配置
基本Ionic安装、指定平台SDK安装；配置安装环境，才能使用模拟器，能够在设备上部署和测试应用程序并实现app发布
Ionic框架安装：
需要四个组件（Node.js，Git，Ionic，Apache Cordova），Ionic和CLI都是用Node.js编写的
node.js安装
打印node.js版本：node -v
NPM(Node的包管理器)更新：npm -v
更新NPM安装：npm istall npm -g

Git安装省略

Apache cordova CLI
安装：npm install -g cordova

Ionic CLI
安装:npm install -g ionic
查看：ionic -v

新建Ionic项目
ionic start testApp --v2
Ionic框架通过一系列初始模板来创建一个项目的脚手架，模板包括：指定的模板（blank,sidemenu,tabs），GitHub库，Codepen，一个本地目录，默认使用tabs
在浏览器中预览：ionic serve

安装平台工具：IOS的Xcode，Android studio较好，Windows Universal
配置模拟器
配置设备
添加移动平台：ionic platform add android
模拟器上测试：ionic emulate[platform]
ionic emulate ios --target="iPad-Air"
日志：ionic emulate ios -l -c
设备上测试：ionic run ios -l -c
ionic run android -l -c

第三章 Ionic命令行界面
CLI，它的功能
使用GitHub的模板创建App的例子
ionic start myApp https://github.com/driftyco/ionic2-start-blank --v2
CLI使用TypeScript作为开发语言
修改APP名称
ionic start myAPP -a "My awesome Ionic App"
指定编译平台
ionic platform add android
管理cordova插件
ionic plugin add cordova-plugin-geolocation(添加)
ionic plugin rm cordova-plugin-geolocation(移除)
ionic plugin ls（查看）
ionic允许你自己搭建指定的模板
ionic g [page|component|deirective|pipe|provider|tabs][element name]
ionic g page mypage
运行app：ionic serve 或ionic serve --lab（显示多个浏览器窗口）
指定ip：ionic serve --address 112.365.365.321
查看CLI信息：ionic info

第四章 AngularJS和TypeScript
AngularJS是基于组件的
组件：
import {Component} from '@angular/core'
//定义组件元数据
@Component({
selector:'myfirstapp'//标签
template:`<div>Hello,my name is {{name}}.
<button (click)="sayMyName()">Log my name</button></div>`//模板
})
export class MyCompanet{
constructor(){
this.name='Inigo Montoya'
}
sayMyName(){
console.log('Hello my name is',this.name,'you killed my father,prepare to die')
}
}
输入：需要将信息传递到组件的机制，通过Input模块实现
比如组件<current-user>
<current-user [user]="current-user"></current-user>
这个组件的定义如下：
import {Component,Input}from'@angular/core';
@Component({
selector:'current-user',
template:'<div>{{user.name}}</div>'//模板
})
export class UserProfile{
@Input()user;
constructor(){}
}
通过@Input绑定user变量，angularJS会传递currentUser变量给这个组件，让模板渲染出user.name的值，从而实现数据的传递和参数的设置
模板：
渲染：{}
如<div>{{user.name}}</div>
绑定属性：[]
如<current-user [user]="current-user"></current-user>
事件处理：()类似点击事件
如<my-component (click)="onUserClick($event)"></my-component>
双向数据绑定[{}]
如<input [(ngModal)]="username">
星号*：*告诉模板以指定的方式进行处理
如<my-component *ngFor="let item of items"></my-component>
事件：事件使用（）标记
<button (click)="clicked()">click</button>
该组件的定义是：
@Component(...)
class MyCompanent{
clicked(){

}
}
方法可以带参数，只需在clicked方法加入参数名
<button (click)="clicked($event)">click</button>
该组件的定义是：
@Component(...)
class MyCompanent{
clicked(event){

}
}

如果你的组件需要向其他组件广播自定义事件，可以导入Output模块和EventEmitter模块
使用@Output修饰符定义事件，这个事件是一个EventEmitter实例
import {Component,Output,EventEmitter}from '@angular/core';
@Component({
selector:'user-profile'
template:'<div>Hi,my name is</div>'
})
export class UserProfile{
@Output() userDataUpdated = new EventEmitter();
constructor(){
//修改user
//...
this.userDataUpdated.emit(this.user);
}
}

可以绑定user-profile组件的事件了
<user-profile (userDataUpdated)="userDataUpdated($event)"></user-profile>

生命周期事件（允许访问生命周期中的每一个环节）通常与创建、渲染、销毁相关
@NgModule实现App的引导方式，它使用元数据对象告诉Angular如何编译和运行模块代码，允许将所有的依赖进行前置声明，而不用在app中多次声明
import {NgModule}from '@angular/core';
import {BrowserModule}from '@angular/platform-browser';
import {AppComponent}from './app.cpmponent';
@NgModule({
imports:[BrowserModule],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
exports class AppModule{}
这段代码是基本的app.module.ts文件的例子，使用了BrowserModule模块，才能运行在web浏览器中
这个模块会被main.ts所用，引导过程：
import {platformBrowserDynamic}from '@angular/platform-browser-dynamic';
import {AppModule}from './app.module';
const platform =platformBrowserDynamic();
platform.bootstrapModule(AppModule)
初始化app运行的平台，然后用这个平台引导AppModule

组件被创建时，构造器会被调用，所以需要对构造器进行初始化
提供了一个ngOnInit事件
Ionic事件，掌握事件描述的意义，省略

管道符（过滤器）
将一个值转换成新的值，|
<p>
The author's birthday is {{birthday|date}}
</p>>

经常需要读写子组件的方法，当父组件需要这些方法，需要将子方法注入父组件中，@ViewChild

TypeScript（改进js）
所有改进的js语言版本都面临必须将代码转换成标准的js（就是所谓的转译，一种语言转换成另一种语言）
TypeScript是对javaScript 的扩展，提供了强大的类型检查和面向对象特性，是Ionic的主要语言
它的转译已经内置在Ionic编译中

变量指定：let，变量的作用域仅限最近的块
for(let i =0; i<=10;i++){
console.log(i)
}

类定义：和大多数语言定义相似

promise：用于延迟和异步，需要和远程服务器打交道或者加载本地数据时用到该方法
三种状态：
Pengding、Fullfilled、Rejected
var greetingPromise = sayHello();
greetingPromise.then(function(greeting){
console.log(greeting);
},function(error){
console.error('uo',error)
});

Angular很多服务使用Observable而不使用promise，他可以解决多个值的同步

Angular内置了模板引擎，使用`符号进行连接，
箭头函数：简化函数作用域和this关键字，可以不用输入function关键字、return关键字以及大括号
var multiply =(x,y)=>{return x*y};
箭头函数通常用来数组操纵,数组就不需要定义了 var missions=[{},{}...];
console.log(mission.map(mission=>mission.flights));

类型：string/number/boolean
特殊类型：any/null/undefined/void
类型化函数：变量可以类型化，函数返回值也可以类型化
function sayHello(theName:string):string{
return 'Hello,'+theName;
}

:void用于表示函数没有返回类型
function log(message):void{
console.log(message);
}

第五章 Apache cordova

cordova开源框架允许使用HTML、CSS、JS创建针对各种移动设备的本地应用
它会将web应用渲染到原生的webView中，web view是一个原生的app组件
cordova将web app无法访问的电话号码等信息通过插件都暴漏给开发者，插件提供了一个web app和设备原生能力的桥接层，说白了就是管理各种插件的集合，一般是通过第三方插件提供（NFC通信、压感触控、推送通知）
如：Battery status监控设备电池状态
虽然cordova为开发者提供了大量的功能，但是缺少一个重要的组件：用户界面组件，因此最好的方法是使用第三方框架，如Ionic，这就是Ionic技术的底层

第六章理解Ionic（这一章节还需要找项目查看，平安小区app就可以）
ionic页面组成：html文件（定义要显示的组件）、Sass文件（定义组件的可视化样式）、TypeScript文件（定义组件的自定义功能）它是基于web技术开发的，所以会用到很多传统web app的技术
我们只需要定义真正需要展示给用户的组件，因为ionic页面的html文件是在App容器中渲染，不需要像传统的HTML页面那样定义body等初始标签。
app.html:
<ion-split-pane>

<ion-menu id="loggedUserMenu"[content]="content">
<ion-header>
<ion-toolbar>
<ion-title>平安小区</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
我的相关
</ion-list-header>
<button ion-item menuClose *ngFor="let p of personalPages"(click)="openPage(p)">
<ion-icon item-start [name]="p.icon"[color]="isActive(p)"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>

<ion-nav [root]="rootPage"#content swipeBackEnabled="false" main name="app"></ion-nav>
</ion-split-pane>

app.scss包含了变量声明，如$company-brand:#ff11dd,直接通过变量来代替这个颜色值
所有的Ionic组件都使用Sass变量设置样式，具体参看Ionic文档
Ionic使用gulp这个构建工具来预编译sass
page-app{
.content{

}
.toolbar-title-md{

}
.bar-button-default-md{

}
.content_{

}
@each $track,$value in auxiliary-categories(){

}
ion-row{

}
}
App级别的主题样式会有一个单独的sass文件

TypeScript（编写和页面交互逻辑相关的Angular/TypeScript代码，功能实现）文件后缀.ts

基本.ts前面已经写过（省略177行）
平安小区的包含两个ts文件，.module.ts和.ts
主要应用了NgModule模块，.ts文件实例如下：
import { Component,ViewChild } from '@angular/core';
import { MenuController,IonicPage, NavController, App, ToastController,InfiniteScroll } from 'ionic-angular';
import { ApiHttpProvider } from '../../providers';
import 'rxjs/add/operator/share';
import { Storage } from '@ionic/storage';
/**
* Generated class for the AccountPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
* @Author 葛明
* @Date 2018-6-8 15:12
* @Note 用户信息页面
* @Version 1.0
*/

@IonicPage()
@Component({
selector: 'page-account',
templateUrl: 'account.html',
})
export class AccountPage {

@ViewChild('infinitescroll', { read: InfiniteScroll }) infiniteScroll: InfiniteScroll;

//用户对象
residentObjs: { userName: string , userVillage: string, sex:string,idCard:number ,loginName:string,loginPwd:string,kinsfolk:string,grid:string ,building:string,unit:string,room:string,userMobile:string,userType?:number} = {
userName: "",
userVillage:"",
sex: "",
idCard : 1,
loginName: "",
loginPwd:"",
kinsfolk: "",
grid:"",
building: "",
unit : "",
room: "",
userMobile:""
};

constructor(public menu: MenuController,public storage: Storage,public app: App,public navCtrl: NavController,public toastCtrl: ToastController, public apiHttp: ApiHttpProvider) {

}

ionViewDidLoad() {
console.log('ionViewDidLoad AccountPage');
//this.app.setTitle('用户信息');
this.update();
}

//查询
update() {
this.storage.forEach( (value, key) => {
if(key=='userName') this.residentObjs.userName=value;
else if(key=='userVillage') this.residentObjs.userVillage=value;
else if(key=='sex') this.residentObjs.sex=value;
else if(key=='idCard') this.residentObjs.idCard=value;
else if(key=='loginName') this.residentObjs.loginName=value;
else if(key=='loginPwd') this.residentObjs.loginPwd=value;
else if(key=='kinsfolk') this.residentObjs.kinsfolk=value;
else if(key=='grid') this.residentObjs.grid=value;
else if(key=='building') this.residentObjs.building=value;
else if(key=='unit') this.residentObjs.unit=value;
else if(key=='room') this.residentObjs.room=value;
else if(key=='userMobile') this.residentObjs.userMobile=value;
else if(key=='userType') this.residentObjs.userType=value;
})
}
}

总结：学习了前面的Ionic、Angular、Cordova后，以及需要的插件，他们之间到底有什么关系呢？
Ionic和Angular：
Ionic只是对Angular进行了扩展，利用Angular实现了很多符合移动端应用的组件，并搭建了很完善的样式库，是对Angular最成功的应用样例。即使不使用Ionic，Angular也可与任意样式库，如Bootstrap、Foundation等搭配使用，得到想要的页面效果
混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现，而Cordova负责将实现的页面包装成原生应用（Android:apk；iOS:ipa）
就像花生，最内层的花生仁是Angular，花生仁的表皮是Ionic，而最外层的花生壳则是Cordova。

Cordova插件的作用是提供一个桥梁供页面和原生通信，首先我们的页面不能直接调用设备能力，所以需要与能够调用设备能力的原生代码（Android:Java；iOS:OC）通信，此时就需要Cordova插件了。

Cordova插件能够再任何Cordova工程中使用，和使用什么前端框架（如Ionic）无关。

Ionic 2中封装了Ionic Native，方便了Cordova插件的使用，但在Ionic 2中仍然可以像Ionic 1中一样使用Cordova插件，Ionic Native不是必须的。

即使在Ionic 2中使用了Ionic Native，也首先需要手动添加插件，如：cordova plugin add cordova-plugin-pluginName。

来源：oschina

链接：https://my.oschina.net/u/4395718/blog/3682607

标签

angularjs