Comment Uniapp surveille Shake

Uniapp est un framework de développement d'applications multiplateforme basé sur le framework Vue.js, qui peut être utilisé pour développer des applications pour plusieurs plateformes telles que iOS, Android, H5 et des mini-programmes. Dans de nombreuses applications, shake est une fonction très courante. Cet article présentera comment implémenter la fonction de surveillance shake dans Uniapp.

1. Le principe du shake

Le principe du shake est d'utiliser le capteur d'accélération intégré du téléphone mobile pour obtenir les données d'accélération du téléphone mobile et de déterminer si une action de tremblement s'est produite en analysant les changements dans les données d’accélération. Plus précisément, lorsque le téléphone est à l'arrêt, la valeur d'accélération mesurée par le capteur d'accélération est de 1 g. Lorsque le téléphone tremble, la valeur d'accélération mesurée par le capteur d'accélération change. Par conséquent, elle peut être déterminée en détectant le changement de la valeur d'accélération. Un mouvement tremblant.

2. Étapes pour surveiller les tremblements dans Uniapp

1. Installez le plug-in uni-mpvue-broker dans le projet uni-app

Pour surveiller les tremblements dans Uniapp, vous devez utiliser le plug-in uni-mpvue-broker. dans, vous pouvez l'installer dans le projet via la commande suivante :

npm install @dcloudio/uni-mpvue-broker

2. Introduire le plug-in dans la page

Introduire le plug-in dans la page qui a besoin pour surveiller le shake, voici App.vue comme exemple ：

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

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

3. Écoutez l'événement shake

Dans la fonction de cycle de vie créée de la page, écoutez l'événement JSBridgeReady via broker.emit('JSBridgeReady'), et écoutez l'événement JSBridgeReady via uni.onAccelerometerChange() dans la fonction d'écoute d'événement Événement Shake :

<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>

Dans la fonction d'écoute d'événement onAccelerometerChange, obtenez d'abord la valeur d'accélération actuelle et déterminez si une action de secousse s'est produite en calculant la vitesse. Ici, vous pouvez régler vous-même le seuil de vitesse pour déterminer la sensibilité du shake. Dans le même temps, afin d'éviter toute erreur de jugement, vous pouvez également porter un jugement en enregistrant la dernière valeur et le temps d'accélération.

3. Résumé

Grâce aux étapes ci-dessus, nous pouvons implémenter la fonction de surveillance du tremblement dans Uniapp. Cependant, il convient de noter que le capteur d'accélération de chaque téléphone mobile étant différent, il est recommandé de tester et d'optimiser lors de l'utilisation de cette fonction pour obtenir le meilleur effet d'utilisation. J'espère que cet article pourra être utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!