千锋HTML5高级教程-移动端WebApp及混合App开发

P1 移动 m 站开发

知识点概述

1.本地存储+多媒体
2.touch.js（移动端触摸事件库） + swiper.js（移动端触摸滑动插件） + animate.css（CSS3 动画库） + iScroll.js（移动端区域滚动插件）
3.Gulp + webpack 前端工程化 + Sass 开发 UI 核心函数
4.嵌入地图与地理定位（H5 Navigator.geolocation）
5.Touch 端项目实战开发

P2 微信场景应用制作

微信场景

微场景是指使用 HTML5 编码的绚烂的页面，可以翻页、可以呈现各种动态、3D、简单交互效果，根据编程不同可以承载各种商业目的：比如活动召集、论坛邀请函、优惠券发放、新品品牌发布等等，微场景只是移动端的一个载体。

微信场景的应用与制作

微信场景的制作工具：
易企秀、MAKA、兔展

优点：
1、模板丰富
2、制作简单

缺点：
1、会出现制作工具的 logo 水印和广告
2、创意受模板和所提供的技术的限制，不能实现产品的深度定制，缺乏竞争力。

定制化的程序开发

优点：
1、可以深度定制，提升产品的创意和个性
2、技术使用更灵活，可以实现客户需求
3、性能可以通过程序员把控，用户体验更佳

使用前端技术 swiper、animation、three.js、canvas 等。

P3 Angular 项目实战

Angular 介绍

Angular 是 Google 提供的一套基于 MVC 结构的 JavaScript 开发工具，是一套开源的项目框架。

为什么学习 Angular

1、CRUD 每个公司企业必然会有的项目
2、效率高，节省人力物力财力

Angular 组成部分

1、指令
2、过滤器
3、模板
4、路由
5、服务

P4 Ionic 项目实战

Ionic 介绍

Ionic Framework

Ionic 是一款创建 Native App 的 SDK 应用现状流行的 Web 开发技术：HTML + CSS + JavaScript 构建 Ionic 是很多 Framework 中的一种。

Ionic 入门理解：

Angular
Cordova
Gulp
Sass
Node
Bower
Git
Ionic Framework

Ionic 入门学习:

1、Ionic 安装
2、Ionic 创建 App
3、Ionic CSS
4、Ionic JavaScript

Ionic 案例
1、侧边栏项目
2、Cordova 拍照 + 扫描二维码
3、Ionic 打包原生 App

P5 Vue.js 项目实战

Vue.js 介绍

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

1、简洁
2、轻量
3、快速
4、数据驱动
5、模块友好
6、组件化

为什么学习 Vue.js

1、前后端分离已经是业界所共识的一种开发/部署模式了，数据渲染的担子就落在了前端，Vue 的声明式渲染以及数据驱动可以帮助我们轻松应对。
2、渐进式的框架，轻松应对开发者的各种业务需求与使用场景。
3、结合 Vue 的第三方 UI 框架，可以快速交付 PC 端与移动端产品
4、企业对于 Vue 需求量与日俱增。

学习 Vue.js

1、Vue.js 基础
2、模块化
3、单文件组件
4、路由
5、与服务器通信
6、状态管理
7、单元测试
8、生产发布

Vue.js 项目实战

技术栈：
Vue
Vue-Router
VueX
Webpack
ES6/7
Sass
Axios

P6 React 项目实战

学习 React 需要具备

1、对 React 语法已经有了初步的理解
2、对 ES6 编程已经有了实质性的操作
3、对 Node 有一定的了解

为什么学习 React

React 框架是由 Facebook 开发，是一个典型的 MVC 框架 虽然它仅仅是 MVC 中的 View 层，但使用起来，即轻量并且高效，目前已经很多公司在使用这个框架。

什么是 Ant Design

Ant Design 是一个由阿里旗下蚂蚁金服 UED 团队开发，基于 React 的 UI 设计框架，其思想和 Google 开源 Material Design 是非常相似。

Create React App

推荐 create-react-app 进行 Ant Design 项目的搭建，create-react-app 是目前比较普遍使用的一个为 React 构建项目的脚手架工具，当然它完全可以配合 webpack 以满足各类工程化需求。

create-react-app 使用

yarn create react-app my-app
cd my-app
yarn start
yarn add antd

P7 微信小程序开发

微信小程序简介

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序技术栈

HTML5
CSS3
JavaScript
ES

P8 React Native 开发

React Native 介绍

React Native 是 Facebook 推出，强大，开源的 HTML5 跨平台移动 App 开发框架，它能大幅度减少跨平台移动应用开发的工作量，并且代码结构清晰、简单易懂。

App 开发方式

原生

开发周期长、开发成本高、维护成本高、代码复用率低、学习成本高、无法热更新

混合开发

跨平台、开发周期短、开发成本低、代码复用率高、维护成本低、学习成本低、可以热更新

学习 React Native

React Native 的语法基于 React。

React Native 环境搭建
原生组件 TextInput、ScrollView、ListView、Touchable 触摸交互组件等
异步执行（数据交互）
触摸事件处理
弹性盒（FlexBox）页面布局
兼容通用标准和扩展性
React Native 项目开发

P9 微信公众号开发

公众号简介

微信公众号是开发者或商家在微信公众平台上申请的应用账号，商家可在微信平台上实现和特定群体的文字、图片、语言、视频的全方位沟通、互动。形成了一种主流的线上线下微信互动营销方式。

临时云服务

新浪云、阿里云

微信网页开发

• 微信网页授权
• 微信网页开发样式库
• 微信 JS-SDK 说明文档
• 微信 Web 开发者工具

微信网页授权

授权
授权的权限为服务号
网页授权安全域名
开发者 ID
access_token 是公众号的全局唯一接口调用凭证
网页授权请求 URL

P10 Cordova 混合开发

混合开发原理

WebViewJavaScriptBridge 是移动 UIView 和 HTML 交互通信的桥梁，实现 Native Code 和 JavaScript 的互相调用的桥梁。替代了 WebView 的自带 JavaScriptInterface 的接口，使开发更加灵活和安全。

Cordova 混合开发

混合开发优点

一次编译多平台运行，iPhone、Android、Palm、Symbian、WP7、WP8、Bada 和 Blackberry 都可以无障碍适应，只需要简单操作轻松打包。
开发速度快，只需要掌握前端开发知识，并不一定需要了解各个平台的 Native 开发语言也可以开发轻量级移动应用。

发布应用以后，其软件内容可以做到热更新操作，即更新操作不需要进行再次内容审查操作，节省上线时间。

由于前端技术本身的跨平台性，决定了使用该技术以后发布的移动应用其各个平台 UI 表现将会保持绝对的一致性。

基础操作

// 创建项目
cordova create MyApp
cd MyApp
// 添加平台
cordova platform add browser
// 运行项目
cordova run browser
// 打包
cordova build ios
// 查看平台
cordova platform ls

P11 MUI HTML5 混合开发

MUI 简介

MUI 框架是一个方便开发出高性能 App 的框架，也是目前最接近原生 App 效果的框架。
特点：轻、小、界面风格原生化

MUI 概述

1、使用 MUI UI 组件构建移动端页面
2、MUI 基本 API 的使用
3、窗口管理
4、事件管理
5、上下拉刷新
6、网络请求

为什么学习 MUI

1、最接近原生 App 体验的高性能前端框架
2、原生 UI

H5+

在你的原生应用中内嵌 H5 + SDK，替代手机默认的 WebView ，无论使用 Hybrid 开发模式，还是在原生 App 中构建 web 应用生态，都将能体验到更强大的内核动力。

H5

H5+ 概述

1、调用摄像头实现拍照功能
2、实现二维码扫描功能
3、实现摇一摇功能
4、实现分享到朋友圈功能
5、地理定位
6、第三方登录
7、推送
8、支付

为什么学习 H5+

1、增强版的手机浏览器引擎，让 HTML5 达到原生水平
2、能力：原生 40万 API 支持

P12 Node 全栈开发

为什么学习 Node

1、使用 JavaScript
2、更好的使用前端开发工具（webpack、gulp）
3、先进的设计理念，异步化模型
4、企业需求

学习 Node

1、Node.js
2、MySQL
3、MongoDB
4、Express
5、项目实战
6、socket
7、测试工具 mocha

P13 Egret 游戏开发

Egret Wing
Egret Engine
DragonBones
Egret Feather

相关文章：
H5游戏开发：游戏引擎入门推荐

P14 Java 项目开发

Java 特点

• Java 具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。
• Java 可以编写桌面应用程序、Web 应用程序、分布式系统和嵌入式系统应用程序等。

整站静态化

Java FreeMarker 后端模板

FreeMarker 语法：

变量输出
${param}

条件判断
<#if ${isAdmin}>管理员界面<#if>

循环

<#list animals as being>
  <li>${being.name}</li>
<#list>

整站静态化的意义

对于 SEO 友好
方便部署 CDN，提高页面的访问速度
减少服务器负载

P15 PHP 项目开发

PHP 项目开发

PHP 基础
PHP 函数库、PHP 常规操作
原生项目开发
第三方产品应用
ECShop、DedeCMS、WordPress

P16 Android 项目开发

Android 应用介绍

Android 是一种基于 Linux 的自由及开源代码的操作系统，主要使用于移动设备。

为什么学习 Android 应用开发

Android 手机市场占比 87.5%
Android 岗位人才需求
Android 手机用户量巨大

学习 Android 应用开发

1、Android 基础与环境搭建
2、Android UI 基础与进阶
3、核心组件的应用
4、数据存储相关组件
5、移动开发主流界面
6、View 深入开发
7、Android 与 H5 的混合开发模式
8、Android 与 React Native 的混合开发模式
9、打包 Android 应用

---

以上是我对下列视频及文章的归纳和总结。
千锋 HTML5 高级教程-移动端 WebApp 及混合 APP 开发_1 阶段课程体系