JavaScript+H5实现微信摇一摇功能

2022-01-13,,,

这篇文章主要为大家详细介绍了JavaScript+H5实现微信摇一摇功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动。也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭。

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

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

   HTML5 手机摇一摇 手机摇一摇,改变屏幕颜色。 

主要是手机的DeviceMotionEvent事件

第二步,微信摇一摇手势

相对于第一步就是增加了摇一摇手势,改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可,无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

   摇一摇 
您今天还可以摇次
正确姿势:握紧手机,用力摇动3秒,苦练18年的麒麟臂终于派上用场了。

有时候真的可以换一种方法去实现自己想要的功能。附图:demo本来实现的效果是:

                   

改版之后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

以上就是JavaScript+H5实现微信摇一摇功能的详细内容,更多请关注本站其它相关文章!

《JavaScript+H5实现微信摇一摇功能.doc》

下载本文的Word格式文档,以方便收藏与打印。