微信——H5实现微信摇一摇

最新推荐文章于 2023-02-28 10:15:56 发布

许小乖

最新推荐文章于 2023-02-28 10:15:56 发布

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ●微信

本文链接：https://blog.youkuaiyun.com/xdd19910505/article/details/50598494

本文介绍了如何使用H5和JavaScript实现类似微信摇一摇的效果，通过监听DeviceMotionEvent事件，结合屏幕宽高变化和声音，模拟摇动手机改变颜色。详细讲述了第一步如何实现颜色变化，以及第二步如何添加摇一摇手势并触发自定义操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。如果一味的扑在微信接口上，估计会死的太惨，换一种方式，真是海阔天空……

其实H5+JavaScript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果……

第一步，实现手机摇动改变颜色

<!doctype html>
<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
	<title>HTML5 手机摇一摇</title>
		<script type="text/javascript">
			var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
			if(window.DeviceMotionEvent) {
				var speed = 25;
				var x = y = z = lastX = lastY = lastZ = 0;
				window.addEventListener('devicemotion', function(){
					var accelerat