(function(){
// 监听运动传感事件，查看是否支持硬件运动
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false)
} else {
alert("您的设备不支持硬件调用")
}
// 变量初始化
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
speed = 0
// 设置一个阀值
var SHAKE_THRESHOLD = 800 // 设定摇晃的阈值为600 运行相应操作
/*
* 功能：测算三个方向重力加速度，达到一定值进行相应操作
* 作者：HTML5学堂、刘国利、陈能堡
*
*/
function deviceMotionHandler(eventData){
var acceleration = eventData.accelerationIncludingGravity
// 获取当前时间
curTime = new Date().getTime()
// 计算时间差，当这个差值大于一定值执行计算三个方向的速度
if ((curTime - lastTime) > 100) {
// 记录上一次的时间
diffTime = curTime - lastTime
lastTime = curTime
// 获取当前三个方向的值
x = acceleration.x
y = acceleration.y
z = acceleration.z
// 计算速度，为了防止出现负数，进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000)
if (speed > SHAKE_THRESHOLD) {
alert("我实现摇一摇了")
}
// 记录上一次三个方向的值
lastX = x
lastY = y
lastZ = z
}
}
})()
资料来源HTML5学堂。
1.addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作；
2.所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最有这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序；
3.由于IE只支持事件冒泡，所以同大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器；
最好只在需要在是事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。
微信（wechat）是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序，微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、图片和文字，同时，也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。
截止目前为止，微信的活跃用户已超九亿，成为现在人们日常生活中必不可缺的通讯工具。
而Vue.js是前端开发中一套构建用户界面(user interface)的渐进式框架。Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。
今天，Hope老师就带大家使用Vue.js实现微信界面！
Hope：5年H5开发经验，擅长webApp，混合开发，项目管理。目前任职于某大数据公司，负责前端平台架构和混合开发。
《 前端实战：Vue.js实现微信界面 》
预习资料
源码
直播时间：2017年8月6日（周日）晚上8点
加 Q 群（613796295），加群暗号：「vue仿微信界面-」。已经在群里的同学关注上课通知就可以哦~
