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

2024-09-27 11:07:16

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

其实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 acceleration =event.accelerationIncludingGravity;
     x = acceleration.x;
     y = acceleration.y;
     if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
      document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
     }
     lastX = x;
     lastY = y;
    }, false);
   }
  </script>
 </head>
 <body>
    手机摇一摇，改变屏幕颜色。
 </body>
</html>

主要是手机的DeviceMotionEvent事件

第二步，微信摇一摇手势

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
 <title>摇一摇</title>
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css" rel="external nofollow" >
 <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css" rel="external nofollow" >
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script>
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script>
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script>
 <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script> 

 <script type="text/javascript">
   var SHAKE_THRESHOLD = 1000;
   var last_update = 0;
   var last_time = 0;
   var x;
   var y;
   var z;
   var last_x;
   var last_y;
   var last_z;
   var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load();
   var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load();
   var curTime;
   var isShakeble = true; 

   function init() {
    if (window.DeviceMotionEvent) {
     window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
     $("#cantshake").show();
    }
   } 

   function deviceMotionHandler(eventData) {
    curTime = new Date().getTime();
    var diffTime = curTime - last_update;
    if (diffTime > 100) {
     var acceleration = eventData.accelerationIncludingGravity;
     last_update = curTime;
     x = acceleration.x;
     y = acceleration.y;
     z = acceleration.z;
     var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; 

     if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) {
      shake();
     }
     last_x = x;
     last_y = y;
     last_z = z;
    }
   } 

   function shake() {
    last_time = curTime;
    $("#loading").attr('class','loading loading-show');
    $("#shakeup").animate({ top: "10%" }, 700, function () {
     $("#shakeup").animate({ top: "25%" }, 700, function () {
      $("#loading").attr('class','loading'); 

      findsound.play();
        //在此为摇动之后的事件，这里为调用ControllergoShakeResult方法
      window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}";
     });
    });
    $("#shakedown").animate({ top: "40%" }, 700, function () {
     $("#shakedown").animate({ top: "25%" }, 700, function () {
     });
    });
    sound.play();
   } 

   //各种初始化
   $(document).ready(function () {
    Howler.iOSAutoEnable = false;
    FastClick.attach(document.body);
    init();
   });
 </script>
</head>
<body>
 <table id="container">
   <tbody>
       <tr>
        <td class="container" colspan="2">
       <div id="shake">
        <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner">
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup">
        <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown">
         </div><div id="loading" class="loading"></div>
        </td>
     </tr>
     <tr>
      <td>
       您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次
      </td>
     </tr>
     <tr>
      <td>正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。</td>
     </tr>
    </tbody>
 </table>
</body>
</html>

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

改版之后

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

JS实现微信摇一摇原理解析

本文为大家分享了JS实现微信摇一摇的原理,供大家参考,具体内容如下实现原理: 1.微信摇一摇事件需要有硬件支撑,必须要求手机中有陀螺仪 2.在JS中给window添加ondevectionmotion事件.该事件在手机晃动,即手机中的陀螺仪发生旋转,该事件会触发 3.触发ondevectionmotion事件,会产生一个事件对象,通过该对象中的键值(accelerationIncludingGravity)来获得该重力加速器对象 4.重力加速器对象中含有陀螺仪的坐标,通过重力加速器对象.x -
JavaScript+H5实现微信摇一摇功能

项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动.也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对于我们的需求只需要摇一摇这个动作却是大相径庭. 其实H5+JavaScript写出来的页面,通过获取手机的屏幕长和宽,以及添加声音等就可以实现摇一摇的效果. 第一步,实现手机摇动改变颜色 <!doctype html> <html> <head> <meta char
微信公众号摇一摇周边功能开发

①申请开通摇一摇功能申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以重新提交申请请求.若是审核中,请耐心等待工作人员审核,在审核中状态不能再提交申请请求. 接口代码如下: http请求方式: POST(请使用https协议)https://api.weixin.qq.com/shakearound/account/register?access_token=ACCESS_TOKENPOST数据格式:json POST数据例子: { "name&q
Android利用传感器实现微信摇一摇功能

本文实例为大家分享了Android微信摇一摇功能的实现方法,供大家参考,具体内容如下 import java.util.ArrayList; import java.util.List; import java.util.Random; import android.app.Activity; import android.app.Service; import android.content.res.Resources; import android.hardware.Sensor; impo
Android 微信摇一摇功能实现详细介绍

Android 微信摇一摇功能实现,最近学习传感器,就想实现摇一摇的功能,上网查了些资料,就整理下.如有错误,还请指正. 开发环境 Android Studio 2.2.1 JDK1.7 API 24 Gradle 2.2.1 相关知识点加速度传感器补间动画手机震动 (Vibrator) 较短声音/音效的播放 (SoundPool) 案例: 我们接下来分析一下这个案例, 当用户晃动手机时, 会触发加速传感器, 此时加速传感器会调用相应接口供我们使用, 此时我们可以做一些相应的动画效果,
Android实现iPhone晃动撤销输入功能 Android仿微信摇一摇功能

很多程序中我们可能会输入长文本内容,比如短信,写便笺等,如果想一次性撤销所有的键入内容,很多手机需要一直按住退格键逐字逐句的删除,稍稍麻烦,不过在iPhone上,有个人性化的功能,当我们想要去撤销刚刚输入的所有内容的时候,可以轻轻晃动手机,会弹出提示框,点击确定就可以清空内容,如下图: 在android中,一般手机貌似没有定制这个功能,不过我们可以自己去实现这样的功能,放置在我们的项目程序中,体现更人性化的设计,思路很简单,主要是利用手机内置的加速度传感器装置,其实大家一定会想到微信的"摇一摇&
iOS仿微信摇一摇功能

iOS仿照微信摇一摇功能实现一.描述需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.
iOS实现微信摇一摇功能

一.描述需要做一个界面,仿照微信摇一摇,获取接口进行签到功能. 首先明确以下几点: 1.需要震动. 2.需要声音.(准备好mp3音效) 二.这边直接贴代码 / Created by 石雄伟 on 16/7/29. // Copyright © 2016年石雄伟. All rights reserved. // #import "SignBoardViewController.h" #import <AVFoundation/AVFoundation.h> #import
微信小程序开发摇一摇功能

微信小程序摇一摇方法定义: let shakeInfo = { openFlag: false,// 是否开启摇一摇,*****注意:如果是小程序全局监听摇一摇,这里默认为true shakeSpeed: 110,//设置阈值,越小越灵敏 shakeStep: 2000,//摇一摇成功后间隔 lastTime: 0,//此变量用来记录上次摇动的时间 x: 0, y: 0, z: 0, lastX: 0, lastY: 0, lastZ: 0, //此组变量分别记录对应 x.y.z 三轴的数值和
Android实现微信摇一摇功能

本文实例为大家分享了Android实现微信摇一摇功能的具体代码,供大家参考,具体内容如下 1.初始化界面设置摇一摇界面的背景图片和摇动时的上下两半张图片 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http:/
iOS实现微信朋友圈与摇一摇功能

本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能. 预览效果: 主要重点 1.整体架构利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等. [self.navigationB

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

相关推荐

随机推荐