• 课程介绍
  • 学习目标
  • 课程详情
  • 该课程必然遵循 “从点到面、由浅入深” 的授课原则,为大家详细讲解移动端整套原生开发体系知识点,带领大家从移动端最令人迷惑而又最实用的 “事件” 入手,开始进行各种组件开发
  • 了解 移动端的交互方式,处理移动端常见的问题,处理移动常见的一些兼容,可以利用原生方法开发移动端常见交互
  • 这是关于编程界 “造轮子” 的话题:

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

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

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

     

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

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

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

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

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

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

    讲师介绍:

    学前要求:

    希望学习本套课程的朋友至少具备移动端基础布局相关知识,并对 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 切换组件
    • 下拉刷新最新消息
    • 上滑加载更多内容
    • 新闻列表组件
    • 图文组件
    • 幻灯片组件
    • 热点新闻滚动组件
    • 划屏导航条组件
    • 划屏卡片式切换组件
    • 底部导航组件
    • 新闻详情预览

    课程费用:

    活动价:¥189.00199.00      VIP价:¥179.00


    课程咨询:

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

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

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

莫涛

主讲教师:莫涛

讲师介绍:H5移动端开发专家,妙味课堂创始人之一,精通H5移动端开发技巧, 妙味官网核心功能开发者、海量的H5、CSS3、移动端系列视频录制者 妙味最新移动端课程研发者,同时具备多年丰富的教学经历, 为人谦逊,处事低调,与之接触学员均对其赞赏有加。 现主导妙味新课程研发与移动端课程标准化工作 同时负责妙味实体班、远程班、公开课与最新案例研究重任。

相关课程

  • 移动端“淘宝造物节” 3D绚酷空间 VR 场景应用

    ¥520.00
    当前热度:2460
  • 移动端“事件交互篇-远程实战开发课程”

    ¥660.00
    当前热度:3263
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号