移动端开发必备技能:基于【微信】的 移动端 “场景应用” 开发;
运用微信朋友圈的威力,产生一个又一个“精美绝伦”的移动端案例,
电商、搜索巨头、手机、电影、化妆品、智能硬件、品牌故事、企业招聘……
“H5场景应用”作为企业展示产品利器,你是否已经完全掌握?
用微信扫描二维码访问:
案例截图:
用微信扫描二维码访问:
案例截图:
什么是微信场景应用
课程划分
共分为四次课,2个微信场景,主要涉及的知识点:js css3 html5……
场景运行环境
微信内嵌的浏览器
Chrome自带移动端Emulation(模拟器)
场景一功能
加载,刮开,划屏,动画,音乐等
jQuery
版本2.1.3
手机分辨率
屏幕
设备
主流屏幕分辨率
640 * 960
640 * 1136
viewport
默认视口
width=device-width , user-scalable=no
target-densityDpi=device-dpi
固定值640即可
设置高度
通过JS动态设置
background-size : cover
刮开效果
canvas
globalCompositeOperation
source-over
destination-over
destination-out
移动端事件
touchstart
touchmove
touchend
原生event
originalEvent
changedTouches
阻止默认touchmove
preventDefault
划屏切换
css3
运动实现
transform
translate
scale
transition
transitionEnd事件
提示箭头
css3
animation
名字
时间
执行次数
infinite
@keyframes
帧
入场动画
文字样式
css3+js
transform
transition
图标
可以用图片
也可以用字体库,Font Awesome
音乐
audio
play()
pause()
加载
css3
控制scale
animation-delay
js
new Image
查看场景二效果
加载,流星,闪烁,散开,划屏,动画,音乐等
散开
canvas
globalCompositeOperation
destination-out
drawImage
9个参数
划屏
css3
perspective
transform-origin
js
setTimeout
提示箭头
css3
animation
入场动画
标题炸裂
animation
流星划过
css3
animation
音乐
audio
加载
animation
new Image
熟练掌握 PC 端页面布局,有一定 JS\H5\CSS3 基础知识储备。
课程咨询QQ:2852509867、2852509866、2852509868
课程咨询电话:010-57269690
客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00
关注妙味官方微信公众号,了解最新课程安排
1、赠送1年VIP会员视频权限
2、不能赠予,仅限中奖的用户使用
3、提供ID号+绑定的手机号
4、提供个人中心的中奖截图
客服联系方式:
QQ:2852509866、2852509868
微信:miaov-class、miaov-study