移动web开发笔记

混合应用开发

第一章：APP开发简介

APP开发模式：

Native APP：基于本地（操作系统）运行的APP

优点：速度快、性能高，用户体验效果好

缺点：无法跨平台，开发成本高，更新麻烦

Web APP：基于高端机的浏览器运行的APP

优点：跨平台，开发周期短，开发成本低，更新较简单，维护较轻松

缺点：用户体验不好

Hybrid APP：基于上两种发展出来的产物

结合了原生用户体验和webAPP的跨平台开发的优势

什么是混合应用？

1：通常是基于第三方跨平台移动开发框架进行开发

2：继承了webAPP实时更新、卡发成本低等优点

3：通过应用商店区分移动操作系统开发，用户需要安装使用的移动应用

4：使用方式和nativeAPP一致

混合应用开发框架介绍

Ionic介绍

是一个用来开发混合手机应用的、开源的、免费的代码库

可以快速的创建一个跨平台的移动应用

提供了很多UI组件，帮助卡发着开发强大的应用

完全基于angular框架(来自谷歌的前端JavaScript框架)

专注原生、性能优越、运行速度快

Ionic = ionic CSS + Angular + Cordova

 

Angular的核心属性

组件化（核心）

数据绑定

服务

依赖注入机制

路由及路由嵌套

指令系统

 

Cordova介绍

1：是一个开源的移动开发框架:

2：允许使用标准的web技术HTML5，css3和JavaScript进行跨平台开发

3：插件是cordova框架的重要组成部分，他提供了cordova和原生组件相互通信的API，能够通过JavaScript调用原生功能

 

第二章：angular基础

环境搭建

安装最新版Node

全局安装Angular CLI脚手架工具：

npm install -g @angular/cli （只需要安装一次），是一个命令行界面工具，可以创建项目、添加文件以及执行它开发任务，如：测试、打包、发布

 

项目创建及概览

创建项目：ng new 项目名称

进入项目：cd 项目名称

启动服务器：ng serve –open

 

项目文件概览

根目录

1：SRC文件夹：根目录的文件夹之一，用来构建、测试、维护、文档化和发布应用的，包含所有angular组件、模板、样式、图片以及应用所需要的任何东西，这个文件夹之外的文件都是为了构建应用提供支持的

2：e2e ：端到端（end-to-end）测试

3：node_modules/

4：配置文件

项目启动过程

Angular.jsno

Main.js

App.module.ts

App.component.ts

<app-root>:

模板语法

插值表达式 --{ { } }

属性绑定 -–[ 属性名 ] = “ ”

事件绑定 --（事件名）= “eventFun（）”

双向数据绑定 -–[（ngModel）]

条件判断 --*ngIf

数据循环 --*ngFor

 

第三章：angular组件

框架模式

MVC                                  MVP                         MVVM

 

 

 

 

 

组件

-组件是负责控制屏幕上的某一块区域，即视图

-组件是angular的核心理念，模块化机制是为组件化服务的

基本构成：

组件装饰器、组件元数据、模板、组件类

 

 

创建组件：ng g component components/组件名

在AppModule中声明组件

引入：import { 组件名 } from ‘./components/……’；

声明：要在declarations数组中声明（如果通过命令创建，会自动添加）

使用组件：<app-组件名></app-组件名>

组件交互（两种方式）

父组件到子组件 --@input                     子组件到父组件 --@output

 

 

 

 

 

 

生命周期

从创建、变更到销毁（组件初始化、变更检测、组件销毁）

生命周期钩子

--angular提供组件声明周期钩子，把这些关键时刻暴露出来，赋予在这些关键时刻和组件进行交互的能力

--angular core库里定义了生命周期钩子接口

--每个接口都有唯一的一个钩子方法

ngOnChanges（）

ngOnInit（）

ngDoCheck（）

ngAfterContentInit(  )

ngAfterContentChecked(  )

ngAfterViewInit(  )

ngAfterViewChecked(  )

ngOnDestroy( )

重要ng-content（内容映射）

 

 

第四章：angular服务

服务

创建服务 ：ng g service services/服务名

注入服务：引入

                     依赖注入

                     声明

--服务是一个具有特定功能的独立模块

--用于封装不与任何特定视图相关的业务代码

--用于存储组件之间共享的数据

--提高代码的利用率，方便测试和维护

依赖注入

依赖注入

--既是设计模式，又是一种机制

--当应用程序的一些部件需要另一些部件的时候，利用依赖注入来创建被请求的部件，并将它们注入到发出请求的部件中

控制反转

--将依赖引入的控制权由调用方转移到外部容器，在运行时通过某种方法注入进来

--依赖注入是实现控制反转的方式

使用依赖注入

-模块中注入服务

-组件中注入服务

-服务中注入服务

-层级注入

-限定方式依赖注入

 

组件中注入服务

--通过import引入服务

--组件中配置注入器

--组件构造函数中注入所依赖的服务

 

第五章：angular路由

-应用程序一般包括多个视图，用户通过点击链接、按钮等，在视图之间导航

-Angular中的路由是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图

路由配置

Index.html的<.head>标签下添加<base>元素，告诉路由改如何合成导航用的URL

--引入RouterModule模块

--通过RouterModule.forRoot方法配置路由信息（位于imports数组中）

--路由出口

--路由链接

重定向路由（默认路由）

通配符路由

路由守卫

 

路由传参

-在路由定义中声明参数

-在实际路径中携带参数

-在目标组件中接受数据

数据接收

-参数快照

--如果视图切换是切换到统一组件，参数快照形式参数不变

--

-参数订阅

--如果视图切换是切换到同一组件时，参数依然会随之变化

--

路由js跳转

-引入Router模块

-构造函数中说明

-调用Router.navigate（）方法

父子路由

 

 

 

第六章：HTTP服务

是angular中使用HTTP协议与远程服务器进行通讯的一个独立模块

使用步骤

-根模块中引入HttpClientModule

-模块装饰器中注入

-组件中引入HTTP服务

-组件构造函数声明

-调用请求函数

 

POST请求

-引入Headers

-设置请求头

 

 

第七章：Angular指令（一）

指令概述

-作用在特定的DOM元素伤，扩展元素的功能，为元素增加新的行为

-分类

--属性指令

--结构指令

--组件

--内置指令

 

内置指令

-通用指令

---ngClass

---ngStyle

---ngSwitch

---ngIf

---ngFor

 

 

 

 

-路由指令

---routerLink

---routerLinkActive

---routerOutlet

-表单指令：被包含于以下三个模块：

     ---FormsModule

 

        ---ReactiveFormsModule

 

        ---InternalFormsSharedModule

 

 

自定义指令

命令：ng g directive directives/指令名

第七章：Angular管道（二）

管道：转换数据显示的格式

使用方式：{{ data | pipeFunction }}

在插值表达式中，是变量通过管道操作符（ | ）流向右侧的管道函数

内置管道

 

 

 

 

自定义管道：ng g pipe pipes/管道名

 

第八章：ionic基础

项目搭建

--环境搭建

       命令：npm install -g cordova ionic

--项目创建：ionic start 项目名 参数（blank/tabs/sidemenu）

 

--项目启动：ionic serve

--目录结构分析

       node_modules

       resources

       plugins

       plaforms

       www

       src

              --app

              --assets

              --pages

              --theme

路由配置

--<ion-tabs>实现在应用程序的不同页面之间的导航，是<ion-tab>的容器，selectdIndex属性可设置首次假造是的默认加载项

--<ion-tab>添加路由选项

       root属性设置该加载项的页面

       tabTitle属性设置该项上显示的可选文本

       tabIcon设置可选图标

--新增页面配置路由

       创建页面：ionic g page 页面名

       在app.modules.ts中引入组件，注册组件

       --import { 页面名Page } from ‘../pages/页面名/页面名';

       --在declarations 和 entryComponents 中注册

       在tab.ts页面中引入组件，配置组件

       --import { 页面名Page } from ‘../页面名/页面名';

视图切换

--NavController

代表特定历史的视图数组，该数组可以通过推送和弹出视图或者在历史中的任意位置插入和删除视图来控制整个应用程序

注入NavController

              --import{ NavController } from ‘ionic-angular’ ;

              --构造函数中声明：constructor( public navCtrl:NavController ) { }

-- NavController常用方法

       push( page, params )  将新视图推入导航堆栈

       pop  从导航堆栈中删除视图

--数据接收

       引入NavParams：import { NavParams } from ‘ionic-angular’ ;

       data属性：接收的数据

第九章：ionic常用组件（一）

列表

--<ion-list>

列表项：<ion-item>

--作为属性：应用于button和a标签上时候

       默认情况下，iOS模式会显示右箭头

       detail-none：隐藏右箭头

       detail-push：显示右箭头

--作为元素<ion-item>

       <item-start>：放在列表项的左侧

       <item-end>：放在列表项的右侧

       <item-content>：放在ion-label组件的右侧

--标题列表：<ion-list-header>

--分隔列表：<ion-item-divider>

--头像列表：<ion-item><ion-avatar></ion-avatar></ion-item>

--缩略图列表：<ion-item>

<ion-thumbnail ><img></ion-thumbnail>

</ion-item>

--滑动列表：<ion-item-sliding>

                   <ion-item><ion-item>

                   <ion-item-options> </ion-item-options>

            </ion-item-sliding>

按钮及图标

--按钮<button>

ion-button：定义按钮

color：定义颜色

full：填充可用宽度，无左右边框及圆角

block：填充可用宽度

round：圆角按钮

outline：带有边框的透明按钮样式

clear：没有边框的透明按钮样式

--图标按钮：<button><ion-icon></ion-icon></button>

--图标：<ion-icon name=”图标名”></ion-icon>

--图标位置（设置在button标签上）

       ion-start：图标在按钮左侧

       ion-end：图标在按钮右侧

       ion-only：只含有图标

表单

--表单输入框<ion-input> <ion-textarea>

       行内标签输入框：<ion-label>

       固定标签输入框：<ion-label fixed>

       堆叠标签输入框：<ion-label stacked>

       浮动标签输入框：<ion-label floating>

       内嵌输入框：inset（添加到父元素）

第十章：ionic常用组件（二）

滑动组件：

--代码格式

<ion-slides>

<ion-slides></ion-slides>

<ion-slides></ion-slides>

</ion-slides>

-- ion-slides属性

       autoplay：设置是否自动播放，值为number类型

       loop：设置是否循环播放，值为Boolean类型

       pager：是否显示分页器，值为Boolean类型

paginationType：分页器类型：bullets（默认）, fraction（分数形式）, progress（进度条）

       speed：设置切换速度，默认是300

       effect：设置切换效果：slide（默认）, fade， cube， coverflow，flip

direction：设置切换方向，值： horizontal （默认），vertical

--ion-slides 方法：

使用前引入 ViewChild 和 Slides 模块

getActiveIndex( )：获取当前滑动页的索引

getPreviousIndex( )：获取上一张滑动页的索引

length( )：获取滑动页总数

slideNext( )：转到下一张滑动页

slidePrev( )：转到上一张滑动页

slideTo( )：转到指定的滑动页

--ion-slides 事件：

ionSlideDidChange：每次切换结束后触发

ionSlideTap：点击时触发

菜单组件

<ion-menu>

--添加位置： ion-nav 同级位置

--创建链接：给 content 属性赋值 ion-nav 组件的引用

--开关菜单：添加 menuToggle 属性给任意元素

--显示类型  --  type

reveal：（默认值）将页面从屏幕中划出，将菜单显示

overlay：在内容上显示菜单

 push：同时推动菜单和页面

--进入方向  --  side

--关闭菜单：添加 menuClose 属性给任意元素

MenuController 设置菜单

--引入MenuController

import {MenuController} from “ionic-angrlar”;

--构造函数中声明

调用方法：open、close、toggle、enable(启用、禁用菜单)

节点按钮组件

<ion-segment>

<ion-segment-button>

--ion-segment组件的子按钮

--事件

ionSelect

点击分段按钮时发出

与[ ngSwitch ]连用

 

 

 

 

 

 

第十一章：ionic常用组件（三）

上拉加载<ion-infinite-scroll>

 

--事件ionInfinite：当滚动到阈值距离时触发

事件对象方法

--complete( )：当异步操作完成时调用

--enable( )：是否启用滚动

--ion-infinite-scroll-content常用属性

loadingSpinner：设置加载时显示的旋钮动画，值：ios(默认)，ios-small，circles， bubbles，dots，crescent

loadingText：设置加载时显示的文字

 

下拉刷新<ion-refresher>

 

--事件 

ionRefresh：当下拉足够距离并释放时触发

事件对象方法  --  complete( )：当异步操作完成时调用

--ion-refresher-content常用属性

pullingIcon：设置下拉时显示的图标

pullingText：设置下拉时显示的文字

refreshingSpinner：设置刷新时显示的旋钮动画

refreshingText：设置刷新是显示的文字

 

滚动组件<ion-scr>