一、移动端知识清单

什么是移动端?

移动端指的是手机（安卓手机，ios手机）、平板电脑（安卓、ios）、ipod等便携设备

作为开发者，我们需要学会开发手机上的应用

• nativeApp ：原生app
  • 平时手机上的app都是nativeApp
  • 安卓开发（java-native）
  • IOS开发（object-c）
  • winPhone
• webApp ：H5页面
  • 在手机浏览器中打开的页面
  • 微信朋友圈或者公众号、订阅号等看到的也是H5页面
  • 现在的nativeApp产品中，看到的大部分内容其实也是由H5开发的（hybrid混合模式开发）
  • HTML5
  • CSS3：基础知识、less、sass
  • JavaScript及各种类库，框架，插件：react、vue、zepto、iscroll、swiper...
  • 响应式布局：能够根据屏幕的大小进行自适应调整，保证在不同尺寸的设备上都能很好的展示（流式布局、rem、flex
    box、bootstrap、MIUI、妹子UI...）
  • 使用js封装nativeApp框架：React native、phoneGap、ApiCloud、ionic...
  • 会自动化打包工具：webpack、gulp、grunt、fis...

怎么学习移动端

推荐2本数：HTML5秘籍第二版、图解CSS3（大漠）
论坛博客学习：

• github：权威的代码管理平台，下载源代码方法：

  • 直接去官网下载
  • 使用git命令下载：git clone [地址]
  • 使用bower下载,与npm类似，npm一般管理的是node后台模块，从npmjs.com上下载资源，bower是专门管理前端开发的开发类库的，从github下载
  • 安装bower：使用npm安装，npm install bower -g
  • bower -v 查看版本
  • bower -h 帮助（查看语法）
  • bower install xxx 安装
  • bower uninstall xxx 卸载
  • bower install xxx@1.11.3 安装指定版本的组件和框架
  • 与npm的操作一样，在开始时候执行bower init 会生成一个bower.json的清单
  • 安装是加 --save 把安装的组件信息保存在bower.json的依赖清单中
  • 在新项目中，把bower.json添加在项目文件夹中，执行bower install 即可（跑环境）

• 名人博客：阮一峰、廖雪峰、郭永峰、大漠、玉博、张鑫、珠峰（www.zhufengpeixun.cn/doc/index.html）

• 技术网站：慕课网、极客学院、w3cplus、w3cfuns、w3school

学习移动端的内容

1、html5

• html5中新增加的标签

• 构建页面内语义化结构标签
• 标示文本的内容
• 修改和删除的标签
• 如何处理ie低版本浏览器的兼容
• 移动端和pc端常用的meta标签

• html5中的新表单

• 传统表单的应用
• 新表单的优势
• placehoder以及兼容处理
• 移动端表单事件

• html5中的音频和视频

• audio
• video

• html5中的canvas

• 基础语法和实战应用
• highcharts
• echarts

• html5中新增的api

• 本地存储
• localStorage
• cookie
• 获取地理位置信息
• 检测横竖屏
• 检测浏览器

• html5中的离线存储（不咋用）
• html5中的通信方式

• web scoket
• web works
• post message

2、css3

• css3中的导入网络字体：@font-face
• css3中的新选择器
• css3中常用属性

• border-radius
• box-shadow
• text-shadow
• ...

• css3的背景改革

• linear-gradient
• radial-gradient
• background-size
• background-origin
• background-clip
• 以下是已经有的，属于css
• background-color
• background-image
• background-position
• background-repeat
• background-attachment
• ...

• css3对filter滤镜
• css3中的变形：transform

• translate
• scale
• skew
• rotate
• matrix
• transform-origin
• transform-style:preserve-3d
• perspective

• css3动画

• transition过度动画
• animation帧动画
• @keyframes
• Animate.css

• css3中的新盒子模型

• box-sizing
• columns
• flexbox

• css3中的媒体查询@media
• css3兼容处理的思想

• 渐进增强
• 优雅降级

3、移动端的js及框架

• 移动端touch、gesture事件
• zepto
• fastclick
• iscroll
• swiper
• ...

4、响应式布局开发

• 流式布局发
• rem响应式布局
• ...

5、综合实战及hhybrid混合开发模式

• webApp
• hyBrid
• 调取微信的接口实现微信二次开发：jsBridge
• 移动端的一些常规优化
• 移动端项目中的兼容处理
• ...