Ionic混合移动app框架学习-白红宇

Ionic混合移动app框架学习

阅读量：6719 次

发布时间：2019-06-25

本文共 10541 字，大约阅读时间需要 35 分钟。

第一章绪论

创建移动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 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>

<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;