• 课程介绍
  • 学习目标
  • 课程详情
  • 移动端开发必备技能:基于【微信】的 移动端 “场景应用” 开发; 运用微信朋友圈的威力,产生一个又一个“精美绝伦”的移动端案例, 电商、搜索巨头、手机、电影、化妆品、智能硬件、品牌故事、企业招聘...... “H5场景应用”作为企业展示产品利器,你是否已经完全掌握?
  • 通过本套课程的学习,我们需要掌握微信H5场景应用的必备技能开发,不仅可以跟着视频完成H5案例,还能举一反三、对类似的相关案例进行扩展功能的开发,真正做到学以致用、融汇贯通。
  • 在这个夏末秋初之际,诸多好事轮番上演,移动端场景应用【第二季】也如期而至、火爆开场!!!

    本课案例设置中,保留了第一季经典案例【破茧成蝶】篇
    注:此案例文案均是上季内容,信息已过期,课程信息请以本季为准!

    请用微信扫描二维码访问(温馨提示:H5案例有声音,请打开声音体验):

    h5.png-0.7kB

    01.png-315.6kB
    02.png-412.8kB

    除此以外,我们还精心制作了一个趣味十足的 【移动端对话场景应用】篇

    具体的故事情节 请用微信扫描二维码访问(温馨提示:H5案例有声音,请打开声音体验)::
    h52.png-0.5kB

    20.png-177.5kB

    21.png-283.1kB

    课程大纲:

    一、课程简介

    1) 什么是微信场景应用

    二、课程划分

    1) 共分为四次课,2个微信场景,主要涉及的知识点:js css3 html5……

    三、场景运行环境

    1) 微信内嵌的浏览器

    2) Chrome自带移动端Emulation(模拟器)

    四、场景一功能

    1) 加载,刮开,划屏,动画,音乐等

    五、jQuery

    1) 版本2.1.3

    六、手机分辨率

    1) 屏幕

    2) 设备

    七、主流屏幕分辨率

    1) 640  *   960

    2) 640  *   1136

    八、viewport

    1) 默认视口

    2) width=device-width , user-scalable=no

    3) target-densityDpi=device-dpi

    4) 固定值640即可

    九、设置高度

    1) 通过JS动态设置

    2) background-size : cover

    十、刮开效果

    1) canvas

    2) globalCompositeOperation

    a. source-over

    b. destination-over

    c. destination-out

    十一、移动端事件

    1) touchstart

    2) touchmove

    3) touchend

    4) 原生event

    a. originalEvent

    b. changedTouches

    5) 阻止默认touchmove

    a. preventDefault

    十二、划屏切换

    1) css3

    2) 运动实现

    3) transform

    a. translate

    b. scale

    c. transition

    d. transitionEnd事件

    十三、提示箭头

    1) css3

    a. animation

    b. 名字

    c. 时间

    d. 执行次数

    e. infinite

    2) @keyframes

    a. 

    十四、入场动画

    1) 文字样式

    2) css3+js

    a. transform

    b. transition

    3) 图标

    a. 可以用图片

    b. 也可以用字体库,Font Awesome

    十五、音乐

    1) audio

    a. play()

    b. pause()

    十六、加载

    1) css3

    2) 控制scale

    3) animation-delay

    4) js

    5) new Image

    十七、查看场景二效果

    1) 声音,音乐,加载,3D魔方,3D划屏,粒子操作

    十八、适配

    1) 第二种模式方案

    十九、音乐

    1) audio

    2) play()

    3) pause()

    二十、3D魔方

    1) perspective

    2) preserve-3d

    3) transform-origin

    二十一、3D划屏

    1) translateZ

    二十二、粒子操作

    1) canvas像素级操作

    2) canvas运动模式

    二十三、加载

    1) linear-gradient

    报名要求:

    熟练掌握 PC 端页面布局,有一定 JS\H5\CSS3 基础知识储备。

     

    课程费用:

    活动价:¥199.00600.00      VIP价:¥179.00


    课程咨询QQ:2852509867、2852509866、2852509868
    课程咨询电话:010-57269690
    客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00
    关注妙味官方微信公众号,了解最新课程安排
    06.jpg-26.8kB

课程目录

资料下载

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

讲师信息

妙味讲师

主讲教师:妙味讲师

讲师介绍:全职讲师,

相关课程

  • HTML5移动端布局实战开发课程

    ¥340.00
    当前热度:6189
  • H5 音乐播放器:ajax 实战

    ¥229.00
    当前热度:4479
  • 移动端 H5 场景应用(一)【破茧成蝶】

    ¥199.00
    当前热度:3315
  • 基于 websocket 的 IM 聊天工具实战

    ¥88.00
    当前热度:7793
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部