妙味移动端原生技法精粹揭秘课程

这是关于编程界 “造轮子” 的话题:

如今的市面上已经存在太多教大家如何 “使用轮子” 的教程,编程界也有 N 多理念告诫大家:会 “使用轮子” 就行啦,不必动手去 “造轮子”。毕竟偷懒是一种天性,懒出境界才是编程最高追求嘛——大家对此深信不疑,许多人再也不提 “造轮子” 的话题,甚至于连 “轮子” 的构造原理也不深究。直到有一天,开发出了问题,手中的 “轮子” 似乎不太好用,纵然满世界有那么多 “轮子”,却没一款用得称心如意!在需求万变的场景下,开发者手中的 “轮子” 用起来越来越别扭,少数 NB 的人早就挽起袖子,或者改造 “轮子”,或者重新制造 “轮子”,在这过程中,个别开发者逐渐成为高手,年薪百万。而更多开发者,仍然笃信 “偷懒是一种天性,懒出境界才是编程最高追求”……殊不知在这个世界上,能够 “懒出境界” 的人,万分之一都不到……

“或许还有不少人希望深入原理、深究细节呢?”
“也许吧~”
“那我们不妨开设一门这样的课程?”
“好吧,看看有多少人感兴趣吧。”

于是,本次远程课就此诞生。

这是一次移动端 “造轮子” 的原生技法深度揭秘课程:

报名地址 : https://ke.qq.com/course/229966#tuin=90de623d

该课程必然遵循 “从点到面、由浅入深” 的授课原则,为大家详细讲解移动端整套原生开发体系知识点,带领大家从移动端最令人迷惑而又最实用的 “事件” 入手,开始进行各种组件开发,例如:

各种原生 “轮子” 组件封装一应俱全,各类原生技法精粹深度揭秘,并配合实际案例将所有知识点整合应用起来,凝聚成一个个精彩独立的移动端实战案例,例如:

  • 完整版图片上传裁切功能案例;
  • 网易新闻客户端交互案例等;

作为一名开发者,必须知其然,更要知其所以然,这既是好奇心驱使、也是职业发展提升的必由之路。

选择这套课程的小伙伴们,希望你们能够速度跟上讲师的步伐,迈入工程师进阶之路,从此以后,挑选或使用别家的 “轮子”,或是潇洒的改造一个称心如意的 “新轮子”,皆可挥洒自如、信手拈来,如此这般,跳槽加薪,皆可随心,岂不快哉?

讲师介绍:

学前要求:

希望学习本套课程的朋友至少具备移动端基础布局相关知识,并对 JS 基本操作也有相关知识储备。
注:学前基础薄弱的朋友,可参考妙味在线学习平台等相关视频(http://2017.miaov.com)

课程大纲

第一节课 深度理解 touch 事件

  • touch 事件
    • touchstart
    • touchmove
    • touchend
    • touch 事件小例子
      • 事件执行顺序
    • 在移动端 mouse 事件和 touch 事件的区别
    • 事件点透
  • touchEvent 详解
    • touches
    • targetTouches
    • changedTouches
      • 小例子: touches 、targetTouches 和 changedTouches 在使用时的区别
    • clientX 和 clientY
    • pageX 和 pageY
    • 案例 1:自定义 range 控件
      • image
      • offsetLeft / clientWidth
      • 页面绝对坐标转换相对元素坐标
      • 超出位置限制
    • 案例 2:
      • 导航切换
        • image
        • tap 事件封装
        • 防止误触处理
        • 安卓下 touchmove 的BUG

第二节课 touchEvent 实战开发

  • 实战案例 1: 移动端幻灯片完整制作
    • 利用拖拽来进行图片滑屏移动
    • 检测图片移动距离
    • Math.round 判断图片应该停留在第几张
    • transition 动画添加
    • 无缝思路实现
  • 实战案例 2:“锤子 OS ” 电话薄索引功能
    • image
    • 拼音组件说明
    • data 自定义属性操作
    • 自定义属性和属性选择器
    • 页面绝对坐标获取 getBoundingClientRect ()
    • 手指坐标反向定位元素

第三节课 移动端开发必备技能:自定义滑动区域(上)

  • 拖拽原理回顾
  • transform 介绍
    • transform 相关参数说明
    • transform 获取的问题及解决方案
  • 添加缓冲动画
    • 缓冲速度计算
      • 物理公式 t = ss/(2s*g)
      • 简化模型 t = s * f
    • 缓冲动画
      • tween
      • requestAnimationFrame
      • cancelAnimationFrame
      • 动画帧兼容

第四节课 移动端开发必备技能:自定义滑动区域(下)

  • 添加超出回弹功能
    • 超出计算
    • F 回弹系数说明
  • 上下滑屏的冲突解决
    • isFirst 记录
  • 安卓下 touchmove 的 BUG 解决
  • 添加相应回调函数
    • start
    • move
    • end
    • over
  • 案例 1:为滑屏区域添加滚动条
  • 案例 2:完善“锤子 OS ”电话薄索引功能

第五节课 移动端综合滑屏案例

  • rem 布局适配
  • 左右滑动的导航功能
  • 完整版的幻灯片功能
  • 新闻列表滑动功能
  • 上拉加载更多功能
  • 下拉刷新最新消息功能

第六节课 移动端开发必备技能:多指操作

  • gestrue 事件
    • gestruestart
    • gestruechange
      • e.rotation
      • e.scale
    • gestrueend
    • CSS3 Transform
      • scale
      • translate
      • cssTransform 方法使用
  • gestrue 事件安卓兼容性问题解决方案
    • 移动端事件执行顺序
    • 默认事件处理
    • 利用 touch 事件实现我们自己的手势检测
    • 屏幕手指个数及坐标获取
    • 利用勾股定理计算手指间距离
    • 计算手指旋转角度
      • 斜率 Math.atan 2
    • 角度和弧度的相互转换
  • 案例:图片上传编辑功能
    • files
    • fileReader
    • readAsDataURL
    • accept 上传文件类型设置
    • 上传文件大小检测

第七节课 完整版图片上传裁切功能实现

  • 图片双指操作缩放
    • canvas 基本应用
    • getContext
    • drawImage
    • 多指操作
    • 像素级操作 getImageData 和 putImageDate
    • toDataURL 生成图片
  • 图片单指操作位移
    • 双指操作和多指操作的冲突解决
  • 选框操作
    • 选框中心操作位移
    • 选框边框操作,放大选框

第八节课 手机陀螺仪 API

  • orientationchange 事件
    • orientation
    • 判断浏览器是否支持 orientationchange 事件
    • 不支持 orientationchange 的替代方案
    • 案例:检测横竖屏切换
  • devicemotion 重力加速度
    • accelerationIncludingGravity
    • 加速度说明及加速度和纬度的关系
    • x,y,z
    • 安卓和 IOS 的差异
    • 案例:根据重量感应移动的小方块
    • 案例:移动端应用:摇一摇
      • image
      • 监测加速度
      • 摇一摇幅度设置
      • 摇一摇取值间隔
      • 判断用户是否定制摇动
      • 摇一摇函数封装
  • 案例:移动的方块
    • 利用 accelerationIncludingGravity 左右移动的方块
    • 速度取值设置,防止大幅度滑动手机时的跳动问题
    • 设置取值间隔,减小各设备之间的误差
    • deviceorientation 陀螺仪角度检测
    • alph
    • beta
    • gamma
    • alpha / bet a / gamma 相关取值范围说明

第九节课 框架延展 网易新闻 VUE 版

  • VUE 基础介绍&组件 & 脚手架
  • 移动端滑屏组件
  • 移动端 Tab 切换组件
  • 下拉刷新最新消息
  • 上滑加载更多内容
  • 新闻列表组件
  • 图文组件
  • 幻灯片组件
  • 热点新闻滚动组件
  • 划屏导航条组件
  • 划屏卡片式切换组件
  • 底部导航组件
  • 新闻详情预览

课时安排:

共 10 堂课程,上课时间: 20:30~22:30

课程费用:199 元 / 套

课程服务:

1、课程全程录制视频;可在腾讯课堂 PC 和移动端视频缓存反复观看,不怕错过课程;
2、学员问题解答;学员可以在妙味社区、远程课 VIP 群随时提出问题;助教会进行问题记录、跟踪,确保每一个提问都能得到及时高效的回复;
3、练习作业批改;课后作业是对本节课掌握程度的检测,讲师会对学员作业中出现的问题进行细致批改,并给出详尽的回复;

报名地址 : https://ke.qq.com/course/229966#tuin=90de623d


课程咨询:

• 咨询QQ:2852509866 、2852509867 、2852509868
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册