一、移动端知识清单

什么是移动端?

移动端指的是手机(安卓手机,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
  • 移动端的一些常规优化
  • 移动端项目中的兼容处理
  • ...
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,812评论 25 709
  • Echo.js – 简单易用的图片延迟加载插件 github:https://github.com/toddmot...
    LetTheManBeBorn阅读 807评论 0 0
  • 目录 1.Hybrid App 2.PhoneGap 3.Cordova 4.SPA (单页应用程序) 5.Ang...
    洛月山庄阅读 497评论 0 0
  • 如果我想你一辈子。 我可能会一生修道。我可能会猜你喜欢什书,我就把它放在我的书柜,读它,像那个主人公是你。我可能会...
    墨倾城阅读 302评论 2 2
  • 美好的是你的心、你的眼、你的温柔,绝不是你一直心心念念的某个遥远的东西。 最近开始阅读丰饶之海,就像是回到了小时候...
    騎士団長阅读 471评论 0 0