<em id='1j997ex'></em>

        <dt id='yorsfdiu'></dt>

                  文章熱詞:移動端網頁搖一搖

                  日期:2019-03-07 09:49 by admin 1551 0 收藏
                  我要分享

                  摘要: 我們都知道微信的搖一搖功能很強大,這個利用了手機的運動傳感器裝置的功能可以做很多有趣的事情,而在一般的web頁面中,很少有機會去用到這個功能,但也不代表這個功能不可以用。

                  在HTML5,devicemotion事件deviceorientation特性的運動傳感器的封裝時間裝置,你可以通過改變運動時間獲取設備的狀态,加速和其他數據(有另一個角度deviceorientation事件提供設備,定位等信息)。

                  而我們可以在前端通過DeviceMotion對設備運動狀态的判斷,幫助我們在網頁上就實現“搖一搖”的交互效果。

                  一、首先把監聽時間綁定給 deviceMotionHandler

                  //先判斷設備是否支持HTML5搖一搖功能
                  if (window.DeviceMotionEvent) {
                  //獲取移動速度,得到device移動時相對之前某個時間的差值比
                  window.addEventListener('devicemotion', deviceMotionHandler, false);
                  }else{
                  alert('您好,你目前所用的設置好像不支持重力感應哦!');
                  }

                  二、獲取設備加速度信息  accelerationIncludingGravity

                  function deviceMotionHandler(eventData) {
                  var acceleration = eventData.accelerationIncludingGravity,
                  x, y, z;
                  x = acceleration.x;
                  y = acceleration.y;
                  z = acceleration.z;
                  document.getElementById("status").innerHTML = "x:"+x+"<br/>y:"+y+"<br/>z:"+z;
                  }

                  “搖一搖”的動作既“一定時間内設備了一定距離”,因此通過監聽上一步獲取到的x, y, z 值在一定時間範圍内的變化率,即可進行設備是否有進行晃動的判斷。

                  三、 而爲了防止正常移動的誤判,需要給該變化率設置一個合适的臨界值

                  //設置臨界值,這個值可根據自己的需求進行設定,默認就3000也差不多了
                  var shakeThreshold = 3000;
                  //設置最後更新時間,用于對比
                  var lastUpdate = 0;
                  //設置位置速率
                  var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;

                  我們在這裏設置100毫秒進行一次位置判斷,若前後x, y, z間的差值的絕對值和時間比率超過了預設的阈值,則判斷設備進行了搖晃操作。

                  以上三點就可以實現在web端的搖一搖功能,那麽我們就通過這個功能來實現搖一搖打開新的鏈接,這裏打開新鏈接的代碼我們用:

                  //鏈接自行替換
                  window.open(
                  "http://www.yudouyudou.com"
                  );

                  奉上一段模拟微信搖一搖的全部代碼:點擊下載(解壓密碼爲yudouyudou)

                  這個代碼能幫我們實現什麽呢?最常見的莫過于企業站和醫療站在移動端搖一搖打開咨詢窗口了,但是在使用的過程中,餘鬥發現,通過上面打開新連接方法是無法正确返回到上一頁的,也就是一旦搖一搖打開聊天窗口,就無法返回網站了,這算是一個用戶體驗極差的設定,我們繼續優化。

                  以商務通爲例,我們可以先定義一個打開商務通的函數swt()

                  //商務通引用(啓用商務通時開啓,商務通自帶js請自行引用
                  function swt(e)
                  {   
                      if(e!="" && e!=null){
                          openZoosUrl('chatwin','&e='+escape(e));
                          LR_HideInvite();
                          return false;
                      }else{
                          openZoosUrl();
                          LR_HideInvite();
                          return false;
                      }
                  }

                  在搖一搖時,直接執行此函數(完整js代碼):

                              //先判斷設備是否支持HTML5搖一搖功能
                              if (window.DeviceMotionEvent) {
                             //獲取移動速度,得到device移動時相對之前某個時間的差值比
                             window.addEventListener('devicemotion', deviceMotionHandler, false);
                              }else{
                                  alert('您好,你目前所用的設置好像不支持重力感應哦!');
                              }
                              //設置臨界值,這個值可根據自己的需求進行設定,默認就3000也差不多了
                              var shakeThreshold = 3000;
                              //設置最後更新時間,用于對比
                              var lastUpdate = 0;
                              //設置位置速率
                              var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;
                              function deviceMotionHandler(event){
                                 //獲得重力加速
                                  var acceleration =event.accelerationIncludingGravity;
                                  //獲得當前時間戳
                                  var curTime = new Date().getTime();
                                  if ((curTime - lastUpdate)> 100) {
                                      //時間差
                                      var diffTime = curTime -lastUpdate;
                                      lastUpdate = curTime;
                                      //x軸加速度
                                      curShakeX = acceleration.x;
                                      //y軸加速度
                                      curShakeY = acceleration.y;
                                      //z軸加速度
                                      curShakeZ = acceleration.z;
                                      var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ)/ diffTime * 10000;
                                      if (speed > shakeThreshold) {
                                          //播放音效
                                            shakeAudio.play();
                                          //商務通傳參
                                            swt('M站通用-搖一搖-咨詢');
                                      }
                                      lastShakeX = curShakeX;
                                      lastShakeY = curShakeY;
                                      lastShakeZ = curShakeZ;
                                  }
                              }
                              //預加搖一搖聲音
                              var shakeAudio = new Audio();
                             //搖一搖聲音路徑
                              shakeAudio.src = '/sound/shake_sound.mp3';
                              var shake_options = {
                                      preload : 'auto'
                              }
                              for(var key in shake_options){
                                      if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){
                                      shakeAudio[key] = shake_options[key];
                                      }
                              }

                  這樣就完美實現搖一搖打開咨詢連接了,十分方便。經過測試發現IOS:Safari 彈框\不播放音樂, Chroma 彈框\不播放音樂,UC彈框\不播放音樂。Andriod:UC彈框\播放音樂,Chroma 彈框\播放音樂,内置浏覽器 彈框\播放音樂。至于其他鏈接,大家可自行擴展,代入即可。


                  餘鬥

                  上一篇:商務通鏈接傳遞參數的擴展使用

                  下一篇:HTTP協議三次握手過程詳解


                  評論

                  -->