H5搖一搖安卓8.0相容
阿新 • • 發佈:2018-12-11
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次區間內的值就觸發中獎的事件。 但是這樣會有個問題就是,如果使用者傾斜到某個區間內的角度不懂,一會他也會觸發那個事件,這就是弊端,但是專案上線時間比較緊暫時就這樣解決這個問題了。如果有好的建議,麻煩留言。謝謝。