Heim > Web-Frontend > H5-Tutorial > Neue HTML5-Funktionen für die API für mobile Geräte

Neue HTML5-Funktionen für die API für mobile Geräte

黄舟
Freigeben: 2017-03-30 11:47:00
Original
1945 Leute haben es durchsucht

Um mobile Geräte besser bedienen zu können, hat HTML5 eine Reihe von APIs für mobile Geräte eingeführt.

1. Geolocation-API

GeolocationSchnittstelle wird verwendet, um den geografischen Standort des Benutzers zu ermitteln. Die verwendete Methode basiert auf GPS oder anderen Mechanismen (wie IP-Adresse, WLAN-Hotspot usw.).

Mit der folgenden Methode kann überprüft werden, ob der Browser diese Schnittstelle unterstützt.

if (navigator.geolocation) {    // 支持} else {    //不支持}
Nach dem Login kopieren

1.1 getCurrentPosition-Methode

getCurrentPosition-Methode wird verwendet, um den geografischen Standort des Benutzers zu ermitteln. Für die Verwendung ist die Autorisierung des Benutzers erforderlich. Der Browser öffnet ein Dialogfeld, in dem er gefragt wird, ob er der aktuellen Seite erlauben möchte, seinen geografischen Standort abzurufen. Die Rückruffunktion muss in zwei Situationen in Betracht gezogen werden: Zum einen soll die Autorisierung erteilt werden, zum anderen soll die Autorisierung verweigert werden. Wenn der Benutzer die Autorisierung verweigert, wird ein Fehler ausgegeben.

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
Nach dem Login kopieren

Der obige Code gibt zwei Rückruffunktionen an, die den aktuellen Adressort verarbeiten.

(1) Der Autorisierung zustimmen

Wenn der Benutzer der Autorisierung zustimmt, wird geoSuccess aufgerufen.

function geoSuccess(event) {    var coords = event.coords;
    console.log('latitude: ' + coords.latitude);    //纬度
    console.log('longitude: ' + coords.longitude);    //经度
    console.log('accuracy: ' + coords.accuracy);    //精度
    console.log('altitude: ' + coords.altitude);    //海拔
    console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度(单位:米)
    console.log('heading: ' + coords.heading);    //以360度表示的方向
    console.log('speed: ' + coords.speed);    //每秒的速度(单位:米)}
Nach dem Login kopieren

Der Parameter von geoSuccess ist ein EreignisObjekt. event.coords Attribut zeigt auf ein Objekt, einschließlich der Standortinformationen des Benutzers, hauptsächlich die folgenden Werte:

  • coords.latitude: Breitengrad

  • coords.longitude: Längengrad

  • coords.accuracy: Genauigkeit

  • coords.altitude: Höhe

  • coords.altitudeAccuracy: Höhengenauigkeit in Metern

  • coords.heading: Richtung in 360 Grad

  • coords.speed: Geschwindigkeit pro Sekunde (Einheit: Meter)

(2) Autorisierung verweigert

Wenn der Benutzer die Autorisierung verweigert, wird geoError aufgerufen.

function geoError(event) {
    console.log('Error code ' + event.code + '. ' + event.message);
}
Nach dem Login kopieren

Der Parameter von geoError ist ebenfalls ein Ereignisobjekt. Das Attribut event.code stellt den Fehlertyp dar und hat vier Werte:

  • 0: Unbekannter Fehler, der Browser fragt nicht nach der Fehlerursache, äquivalent zur Konstanteevent.UNKNOWN_ERROR .

  • 1: Der Benutzer verweigert die Autorisierung, gleichbedeutend mit dem ständigen Ereignis.PERMISSION_DENIED

  • 2: Es wird kein Standort ermittelt, weder GPS noch andere Positionierungsmechanismen kann nicht gefunden werden, entspricht der Konstante event.POSITION_UNAVAILABLE.

  • 3: Timeout, GPS gibt das Ergebnis nicht innerhalb der angegebenen Zeit zurück, äquivalent zum konstanten Ereignis.TIMEOUT.

event.message ist die Fehlermeldung.

(3) Positionierungsverhalten festlegen

Die Methode getCurrentPosition kann auch ein Objekt als dritten Parameter akzeptieren, um das Positionierungsverhalten festzulegen.

var option = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0};

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);
Nach dem Login kopieren

Dieses Parameterobjekt hat drei Mitglieder:

  • enableHighAccuracy: Wenn es auf „true“ gesetzt ist, muss der Client genauere Standortinformationen bereitstellen, was dazu führt genauere Standortinformationen. Lange Positionierungszeit und höherer Stromverbrauch, die Standardeinstellung ist falsch.

  • Timeout: Die maximale Anzahl an Millisekunden, die auf die Antwort des Clients gewartet werden soll. Der Standardwert ist Unendlich.

  • maxinumAge: Die maximale Anzahl an Millisekunden, die ein Client zum Zwischenspeichern von Daten verwenden kann. Bei der Einstellung 0 liest der Client den Cache nicht; bei der Einstellung unendlich liest der Client nur den Cache.

1.2 watchPosition-Methode und clearWatch-Methode

Mit der watchPosition-Methode können kontinuierliche Änderungen der Position des Benutzers überwacht werden. Die Verwendungsmethode ist dieselbe wie die getCurrentPosition-Methode.

var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);
Nach dem Login kopieren

Die Rückruffunktion wird aufgerufen, sobald sich der Standort des Benutzers ändert.

Wenn Sie die Überwachung abbrechen möchten, verwenden Sie die Methode „clearWatch“.

navigator.geolocation.clearWatch(watchID);
Nach dem Login kopieren

2. Vibrations-API

Die Vibrationsschnittstelle wird verwendet, um Befehle im Browser auszugeben, um das Gerät zum Vibrieren zu bringen. Da dieser Vorgang viel Strom verbraucht, ist es am besten, ihn abzubrechen, wenn der Akku fast leer ist.

Verwenden Sie den folgenden Code, um zu überprüfen, ob die Schnittstelle verfügbar ist. Derzeit wird es nur von den neuesten Versionen von Chrome und Firefox für die Android-Plattform unterstützt.


navigator.vibrate = navigator.vibrate ||
                               navigator.webkitVibrate ||
                               navigator.mozVibrate ||
                               navigator.msVibrate;if (navigator.vibrate) {    // 支持}
Nach dem Login kopieren

Die Vibrationsmethode kann das Gerät zum Vibrieren bringen und ihr Parameter ist die Anzahl der Millisekunden, die die Vibration dauert.

navigator.vibrate(1000);
Nach dem Login kopieren

Der obige Code bewirkt, dass das Gerät 1 Sekunde lang vibriert. Die

vibrate-Methode kann auch ein Array als Parameter akzeptieren, der den Vibrationsmodus darstellt. Die Array-Mitglieder an geraden Positionen stellen die Anzahl der zu vibrierenden Millisekunden dar, und die Array-Mitglieder an ungeraden Positionen stellen die Anzahl der zu wartenden Millisekunden dar.

navigator.vibrate([500, 300, 500]);
Nach dem Login kopieren

Der obige Code gibt an, dass das Gerät 500 Millisekunden lang vibriert, dann 300 Millisekunden wartet und dann 500 Millisekunden lang vibriert.

Vibrieren ist ein nicht blockierender Vorgang, das heißt, während das Telefon vibriert, läuft der JavaScript-Code weiter nach unten. Um das Vibrieren zu stoppen, übergeben Sie einfach 0 Millisekunden an die Vibrationsmethode.

navigator.vibrate(0);
Nach dem Login kopieren

3、亮度调节

当移动设备的亮度传感器,感知外部亮度发生显著变化时,会触发devicelight事件。目前,只有Firefox布署了这个API。

window.addEventListener('devicelight', function(event) {
    console.log(event.value + 'lux');
})
Nach dem Login kopieren

下面代码表示,devicelight事件的回调函数,接受一个事件对象作为参数。该对象的value属性就是亮度值。

这种API的一种应用是,我们可以针对亮度的强弱来改网页背景和文字颜色。

Das obige ist der detaillierte Inhalt vonNeue HTML5-Funktionen für die API für mobile Geräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage