H5搖一搖相容問題

最近公司要做一個H5的搖一搖活動，我在網上搜了一個，網上有很多關於H5做搖一搖的文章，基本是用devicemotion這個中立感應做的，我用自己的手機測試了一下，哎，可以，就直接用到專案上了，後面測試的時候發現安卓vivo NEX和小米5這兩款手機搖不了（其他的8.0沒試過），ios沒問題，後面發現是這兩臺手機devicemotion這個事件沒有被監聽，並且這兩臺手機都是8.0以上的。網上查了一下，沒有關於這個相容問題的提問和回答。後面看到有deviceorientation東西，就仔細看了一下（地址：deviceorientation簡介），發現也可以模擬搖一搖，但是我這邊處理得不太成熟。因為活動上線比較趕，只能將就的上著先，希望有的想法大家可以交流一下，不喜勿噴。

用devicemotion方法

	if (window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', deviceMotionHandler, false);
    }
    var SHAKE_THRESHOLD = 40000;
    var last_update = 0;
    var x, y, z, last_x = 0,
      last_y = 0,
      last_z = 0;
    function deviceMotionHandler(eventData) {
      var acceleration = eventData.accelerationIncludingGravity;
      var curTime = new Date().getTime();
      if ((curTime - last_update) > 10) {
        var diffTime = curTime - last_update;
        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) {
          alert("你中獎啦！");
        }
        last_x = x;
        last_y = y;
        last_z = z;
      }
    }
 

上面的程式碼vivo NEX系統8.0和小米5系統8.0以上這兩個手機搖不了，然後我這邊做了點處理

if (window.DeviceMotionEvent||window.DeviceOrientationEvent) {
		if(get_android_version<8.0){
			window.addEventListener('devicemotion', deviceMotionHandler, false);
		}else {
			window.addEventListener('deviceorientation', DeviceOrientationHandler, false);
		}
    }
    var SHAKE_THRESHOLD = 40000;
    var last_update = 0;
    var x, y, z, last_x = 0,
      last_y = 0,
      last_z = 0;
    function deviceMotionHandler(eventData) {
      var acceleration = eventData.accelerationIncludingGravity;
      var curTime = new Date().getTime();
      if ((curTime - last_update) > 10) {
        var diffTime = curTime - last_update;
        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) {
          alert("你中獎啦！");
        }
        last_x = x;
        last_y = y;
        last_z = z;
      }
    }
    //獲取安卓版本
    function get_android_version() {
            var ua = navigator.userAgent.toLowerCase();
            var version = null;
            if (ua.indexOf("android") > 0) {
                var reg = /android [\d._]+/gi;
                var v_info = ua.match(reg);
                version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本號4.2.2
                version = version.slice(0,3);// 得到版本號第一位
            }
            return version;
            }
	var count = 0;
    var max = 45;
	function DeviceOrientationHuawei(event) {
        var alpha = event.alpha, //水平旋轉
          beta = event.beta, //上下旋轉
          gamma = event.gamma; //左右旋轉
          console.log(count, beta, gamma, alpha)
        if (alpha != null || beta != null || gamma != null) {
          if (gamma > 65|| beta >65|| beta < -50|| alpha>120 && alpha <290) {
            count++;
            if (count >= max) {
              count = 0;
             alert('恭喜你，喜提一枚小蘿莉')
            }
          } 
        } 
      }
 

先判斷是否是安卓8.0以上的，如果是就執行DeviceOrientationHuawei函式，DeviceOrientationHuawei函式做的其實就是手機傾斜，旋轉，上下搖動來模仿搖一搖的效果，只要達到我設定45次區間內的值就觸發中獎的事件。 但是這樣會有個問題就是，如果使用者傾斜到某個區間內的角度不懂，一會他也會觸發那個事件，這就是弊端，但是專案上線時間比較緊暫時就這樣解決這個問題了。如果有好的建議，麻煩留言。謝謝。