騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

編者按：下篇是騰訊鬼爪手同學的總結，語言幽默風趣，簡明利落，上篇看完看下篇，干貨連著看才爽。噢對了還是那句話，以現在HTML 5的勢頭，同志們，你看到的這些，可都是錢吶。

目錄：

一、讓音樂隨心而動 - 音頻處理 Web audio API
二、捕捉用戶攝像頭 - 媒體流 Media Capture
三、你是逗逼？ - 語音識別 Web Speech API
四、讓我盡情呵護你 - 設備電量?Battery API
五、獲取用戶位置 - 地理位置?Geolocation API
六、把用戶捧在手心 - 環境光?Ambient Light API

后HTML5時代 II

七、陀螺儀?Deviceorientation
八、Websocket
九、NFC
十、震動 -?Vibration API
十一、網絡環境 Connection API

那么，各位看官起來搖一搖，活動活動筋骨，熱熱身。。。（PS：為什么我會聯想到喝前搖一搖，吃(fan)貨(tong)天賦？）。

DeviceMotion：

簡介：

裝逼說法：設備移動傳感器。

通俗說法：檢測設備運動及運動狀況，可以通過該接口獲取到設備運動的方向和速度等相關信息

核心代碼：

這貨其實就是一個事件，簡單地通過事件監聽就可以獲取到相關的設備運動信息

window.addEventListener("devicemotion",?function(event)?{},?false);

最簡單的設備運動，我們基本上可以認為是前后、左右、上下這么6個方向上的，裝換成3D環境中來講的話，就是在x、y和z軸上運動，這三個軸上的信息，都包含在了event對象中。我們可以通過這種方式獲得

window.addEventListener("devicemotion",?function(event)?{
????var?eventacceleration?=?event.acceleration;
????document.querySelector('#devicemotion').innerHTML?=?"acceleration:<br>"+
????eventacceleration.x+"<br>"+
????eventacceleration.y+"<br>"+
????eventacceleration.z
},?false);

想看效果的話，這個時候就可以掏出手機，掃描下面的這個二維碼

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

http://aaaa.sinaapp.com/deviceDemo/acceleration.html

不要問我為什么手機躺在桌面上，上面的數字還在不停地抖動，咱們文化人應該都知道什么叫相對靜止。上面的三個不斷變化的數字，就是你設備的運動數據了。如果你在驚訝為什么我都已經移動過手機，為什么上面的數字貌似也沒什么大的變化~那么我會告訴你說：有本事你的眼睛跟著你的手機一樣快速移動啊，運動過程中你就能發現這個值的變化了。沒有這個本事吧！~自己嘗試修改下那個demo。把運動中值的變化都記錄下來看看。。。（PS：反正我不弄。）

還有一種比較理想的設備運動方式就是不產生位移，只是快速的旋轉手機。這個旋轉的信息同樣也被反饋在了event對象中

window.addEventListener("devicemotion",?function(event)?{
????eventrotationRate?=?event.rotationRate;
????document.querySelector('#devicemotion').innerHTML?=?'rotationRate:<br>'+
????eventrotationRate.alpha+'<br>'+
????eventrotationRate.beta+"<br>"+
????eventrotationRate.gamma
},?false);

同樣的，下面的二維碼也就是為了說明上面的這段代碼，alpha、beta以及gamma就是旋轉設備時的加速度。

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

http://aaaa.sinaapp.com/deviceDemo/rotationRate.html

可能有的童鞋會覺得~有了這個旋轉應該就能實現一些手機左右旋轉產生視差的效果了，其實是不行的~因為這貨和上面的一樣，設備停止后，我們可以認為他的值歸0~。真正想要實現手機旋轉視差，我們需要用到的就是另外一個event的屬性accelerationIncludingGravity。從字面上理解這個屬性就是重力加速度。

window.addEventListener("devicemotion",?function(event)?{
????eventaccelerationIncludingGravity?=?event.accelerationIncludingGravity;
????document.querySelector('#devicemotion').innerHTML?=?"accelerationIncludingGravity:<br>"+
????eventaccelerationIncludingGravity.x+"<br>"+
????eventaccelerationIncludingGravity.y+"<br>"+
????eventaccelerationIncludingGravity.z
},?false);

下面的這個二維碼應該可以幫助到你來理解這個屬性

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

http://aaaa.sinaapp.com/deviceDemo/accelerationIncludingGravity.html

至此，devicemotion這個事件就差不多了，可見，這貨功能還是蠻強大的，如果你有一定的的數學和物理學的基礎，那么，輕巧幾行代碼，實現個高爾夫球游戲玩玩，立馬給人感覺高大上了?？凑l還敢說程序員沒有妹紙。。

通過這個devicemotion吧，還能實現些什么就各自去腦洞大開吧，比如說玩爛了的搖一搖，設備傾斜視差，重力感應類的小游戲。我們貌似還能通過這個屬性，去做個基于HTML5的計步器玩玩？

其實，devicemotion還有一個好基友，這里也推薦給大家看一眼吧：

deviceorientation

這個事件和devicemotion的使用方法基本一致

window.addEventListener("deviceorientation",?function(event)?{
????document.querySelector('#deviceorientation').innerHTML?=?
????event.alpha+'<br>'+
????event.beta+"<br>"+
????event.gamma+'<br>';
},?false);

這里的alpha、beta和gamma所指的就是手機設備的各種傾斜角度，如果你不能理解哪個是alpha、哪個是beta和gamma，那么你還是自己掏出手機，掃描下這個二維碼。自己感受吧。（PS：我是真不愛畫圖，可能辛苦半天畫出來的圖，也有童鞋沒明白）。

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

有前面devicemotion好基友的幫忙，似乎能做的東西又可以更多一點了。咱們前面貌似提及過&ldquo;喝前搖一搖&rdquo;。搖完之后，自然是要打開瓶蓋痛飲一番了，結合旋轉加速度，我們是不是可以嘗試些一個擰瓶蓋比賽的游戲了？怕長胖？要不，擰個螺絲釘也行。

說到游戲，特別上面還提及到了比賽。那么實時通信必然是不可少了。以往為了達到實時通信，也有不少的方法：輪詢、長輪詢、長連接、flash等各種方式。這些方法各自的弊端也是比較明顯的，這里就不逐個展開細說了。這里主要給大家提交到的就是下面這貨：

webSocket

簡介：

瀏覽器與服務器全雙工通信(full-duplex)。

核心代碼：

var?ws?=?new?WebSocket('ws://127.0.0.1:8808/');//建立服務器連接ws.onopen?=?function(){
	systemInfo.innerHTML?=?'<p>和websocket服務器連接成功</p>';
}//接收到服務器返回的數據ws.onmessage?=?function(e){
	systemInfo.innerHTML?+=?'<p>'+e.data+'</p>';
}//斷開服務器連接ws.onclose?=?function(){
	systemInfo.innerHTML?+=?'<p>WebSocket服務器連接關閉</p>';
}//ws發生錯誤ws.onerror?=?function(e){
	console.log(e);
	systemInfo.innerHTML?+=?'<p>WebSocket發生錯誤</p>';
}

對于webSocket，有興趣了解更多的朋友直接轉移到我的另外一篇文章《移動前端系列&mdash;&mdash;websocket實時互動小游戲》

websocket的數據發送和接收，其實也都是依賴于網絡的，webSocket自己也對網絡狀況這塊通過事件的方式做出了相應，比如說上面的onclose、onerror。但是就目前來說，很多頁面上可能并沒有用webSocket，這么一來，對于網絡何時斷開了，可能捕獲就沒那么容易了，更何況，webSocket在網絡信息這塊，可能還并不是那么的完美。比如說，我想獲取當前連接的網絡類型。

網絡類型這塊我們暫且先放半分鐘，我們先看一下如何動態判斷網絡連接是否斷開，所指動態判斷網絡連接斷開，指的是，頁面不刷新的情況下，實時地知道當前網絡是否可用。以往，我們想得到這種數據，我們一般的實現方法是通過輪詢去訪問服務器上的一個文件，如果文件正常響應，說明網絡是通的；如果文件不響應，那么就認為網絡是不通的。這種方式感覺挺靠譜，但是可以想象，輪詢請求，會耗費多少服務器資源。下面這貨出來之后，以往的這種方式就可以進博物館了。

onLine

簡介：

判斷當前網絡是否有效

用法也是相當地簡單：

if?(navigator.onLine)?{
????alert('online');
}?else?{
????alert('offline');
}

我們可以通過事件的監聽，去實時獲取到網絡狀態的變化

window.addEventListener('offline',?function(e)?{alert('offline');})
window.addEventListener('online',?function(e)?{alert('online');})

這樣以來，實時獲取網絡狀態儼然和服務器已經沒有半毛錢關系了。

好了，半分鐘時間已到，我們回頭來看看我前面說的那個問題，獲取網絡類型，所指網絡類型，值的是2G、3G、4G、藍牙等等。其實，我個人覺得，這個網絡類型完全可以放到online那個事件對象里面去。但是很遺憾，至少目前沒放，暫不清楚是基于什么考慮的。我們目前想要獲取這個網絡類型，需要通過另外一個屬性

connection

connection也是navigator的一個屬性，他包含了一些當前連接的基本信息，其中connection.type值的就是當前的網絡類型。其值包含了一下幾個：

bluetooth ?cellular ?ethernet ?none ?wifi ?wimax ?wimax ?unknown

當網絡類型發生變化時，同樣的也是可以通過事件監聽的方式來實時獲取到網絡類型。代碼實現如下：

var?connection?=?navigator.connection?||?navigator.mozConnection?||?navigator.webkitConnection;
var?type?=?connection.type;
function?updateConnectionStatus()?{
????alert("網絡由?"?+?type?+?"?變化為?"?+?connection.type);
}
//監聽網絡類型發生變化
connection.addEventListener('typechange',?updateConnectionStatus);

有了這些，我們就可以根據不同的網絡環境去加載不同的資源去最大程度上豐富用戶體驗。

我們上面所提及到的，很多都是和網絡（互聯網）相關，但是有的時候，我們想在沒有網絡的環境下，也想傳送一些數據該怎么辦。這種情況可能在不久的將來，在我們的網頁里面也能實現了，這個就是接下來的NFC（為什么我會想到KFC）

NFC

簡介：

近場通信/近距離無線通信技術。

其實說實在的，這個功能我并沒有在我的頁面里面調試出來。主要的一個原因是~這貨目前只是在firefox os系統里面的firefox瀏覽器里面實現了，手頭上沒這設備。不過從他們官網的例子中，我大概地可以感受得到這貨的好用，有興趣的同學自行前往學習：https://developer.mozilla.org/en-US/docs/Web/API/NFC_API/Using_the_NFC_API。

當然了，如果你手頭上剛好有兩部帶有NFC芯片的三星手機，可以試試。解鎖屏幕，將兩部三星手機后殼貼近，聽見&ldquo;滴&rdquo;的一聲后，注意看屏幕上的變化。然后點擊屏幕，再去看看另外一個手機上發生了什么。

清脆&ldquo;滴&rdquo;的一聲，多好的用戶行為反饋，忍不住還多嘗試了幾次，忽然就感覺這種靠聲音的提醒，似乎忽略了一些失聰的人群。如果加上點震動的話~似乎就完美了。不是于是乎，咱們本片的最后一個話題引出。

vibrate

簡介：

設備震動

核心代碼：

navigator.vibrate?=?navigator.vibrate?||??navigator.webkitVibrate?||?
????????????????????????????????navigator.mozVibrate?||?navigator.msVibrate;
navigator.vibrate(value);
navigator.vibrate(0);

vibrate的參數為震動的時間，

如果值為0，說明停止震動

值為一個數組的話，奇數項表示的是震動時間，偶數項表示的為間隔時間。

比如：vibrate(1000,1000,2000) ?就是表示震動1秒之后暫停1秒，再震動2秒

有興趣的，掃下這個二維碼可體驗

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

http://1.aaaa.sinaapp.com/deviceDemo/Vibration.html

一口氣說了這么一堆，其實后面的這幾個點，都還在標準化的路上，不同機型/平臺支持不太一致，在實際項目中使用還是要注意點區別對待的~你們先回味著，我一個人先傷一會兒心去。

【走在時代前列的騰訊HTML 5精品好文】

DNF實戰總結好文！
《騰訊游戲實戰！DNF浴火新生H5項目總結》

優化HMTL 5頁面的6個技巧！
《騰訊精品文！六大奇招帶你優化HTML5移動頁面》

H5頁面設計實戰總結！
《春雨先知！騰訊移動端H5頁面設計實戰分享》

原文地址：tgideas.qq
作者：鬼爪手

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量97萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：

騰訊技術總結！超實用的HTML 5接口全方位測試總結文（二）

程遠鐵粉

文章 6813 人氣 32644.8w

優設 內容總監
收藏
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。

繼續閱讀本文相關話題

文章目錄