Wie Uniapp Shake überwacht

Uniapp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework, das auf dem Vue.js-Framework basiert und zum Entwickeln von Anwendungen für mehrere Plattformen wie iOS, Android, H5 und Miniprogrammen verwendet werden kann. In vielen Anwendungen ist Shake eine sehr häufige Funktion. In diesem Artikel wird erläutert, wie die Überwachungs-Shake-Funktion in Uniapp implementiert wird.

1. Das Prinzip des Schüttelns

Das Prinzip des Schüttelns besteht darin, den eingebauten Beschleunigungssensor des Mobiltelefons zu verwenden, um die Beschleunigungsdaten des Mobiltelefons zu erhalten und durch Analyse der Änderungen festzustellen, ob eine Schüttelaktion stattgefunden hat die Beschleunigungsdaten. Insbesondere wenn das Telefon stationär ist, beträgt der vom Beschleunigungssensor gemessene Beschleunigungswert 1 g. Wenn das Telefon wackelt, ändert sich der vom Beschleunigungssensor gemessene Beschleunigungswert. Dies kann daher durch Erkennen der Änderung des Beschleunigungswerts bestimmt werden. Eine zitternde Bewegung.

2. Schritte zum Überwachen von Shakes in Uniapp

1. Installieren Sie das Uni-mpvue-Broker-Plug-in im Uni-App-Projekt. In können Sie es mit dem folgenden Befehl im Projekt installieren:

npm install @dcloudio/uni-mpvue-broker

Fügen Sie das Plug-in auf der Seite ein

2. Fügen Sie das Plug-in auf der benötigten Seite ein Um den Shake zu überwachen, hier App.vue als Beispiel:

<template>
  <div class="container">
    ...
  </div>
</template>

<script>
import broker from '@dcloudio/uni-mpvue-broker'
export default {
  created () {
    broker.emit('JSBridgeReady')
  }
}
</script>

Hören Sie sich das Shake-Ereignis an

3. Hören Sie sich in der erstellten Lebenszyklusfunktion der Seite das JSBridgeReady-Ereignis über Broker.emit('JSBridgeReady') an. und hören Sie das JSBridgeReady-Ereignis über uni.onAccelerometerChange() in der Ereignis-Überwachungsfunktion Shake-Ereignis:

<script>
import broker from '@dcloudio/uni-mpvue-broker'
export default {
  created () {
    broker.emit('JSBridgeReady')
    broker.on('onAccelerometerChange', this.onAccelerometerChange)
  },
  destroyed () {
    broker.off('onAccelerometerChange', this.onAccelerometerChange)
  },
  methods: {
    onAccelerometerChange (res) {
      let acceleration = res.accelerationIncludingGravity
      let speed = Math.abs(acceleration.x + acceleration.y + acceleration.z - this.lastAcceleration.x - this.lastAcceleration.y - this.lastAcceleration.z) / (new Date().getTime() - this.lastTime)
      if (speed > 30) {
        console.log('发生了摇一摇的动作')
      }
      this.lastAcceleration = acceleration
      this.lastTime = new Date().getTime()
    }
  }
}
</script>

Ermitteln Sie in der Ereignis-Überwachungsfunktion onAccelerometerChange zunächst den aktuellen Beschleunigungswert und bestimmen Sie, ob eine Schüttelaktion aufgetreten ist, indem Sie die Geschwindigkeit berechnen. Hier können Sie die Geschwindigkeitsschwelle selbst anpassen, um die Empfindlichkeit des Shakes zu bestimmen. Um Fehleinschätzungen zu vermeiden, können Sie gleichzeitig auch eine Beurteilung vornehmen, indem Sie den letzten Beschleunigungswert und die letzte Beschleunigungszeit aufzeichnen.

3. Zusammenfassung

Durch die oben genannten Schritte können wir die Überwachungs-Shake-Funktion in Uniapp implementieren. Es ist jedoch zu beachten, dass der Beschleunigungssensor jedes Mobiltelefons unterschiedlich ist. Daher wird empfohlen, diese Funktion zu testen und zu optimieren, um den besten Nutzungseffekt zu erzielen. Ich hoffe, dass dieser Artikel für alle hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonWie Uniapp Shake überwacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!