How Uniapp monitors Shake

Uniapp is a cross-platform application development framework based on the Vue.js framework, which can be used to develop applications for multiple platforms such as iOS, Android, H5, and applets. In many applications, shake is a very common function. This article will introduce how to implement the monitoring shake function in Uniapp.

1. The principle of shake

The principle of shake is to use the built-in acceleration sensor of the mobile phone to obtain the acceleration data of the mobile phone, and determine whether shaking has occurred by analyzing the changes in the acceleration data. Actions. Specifically, when the phone is stationary, the acceleration value measured by the acceleration sensor is 1g. When the phone shakes, the acceleration value measured by the acceleration sensor will change. Therefore, it can be determined by detecting the change in the acceleration value. A shaking motion.

2. Steps to monitor shake in Uniapp

1. Install the uni-mpvue-broker plug-in in the uni-app project

In Uniapp The uni-mpvue-broker plug-in is required for monitoring and shaking, which can be installed in the project through the following command:

npm install @dcloudio/uni-mpvue-broker

2. in Introduce plug-ins into the page

Introduce plug-ins into pages that need to monitor shake events. Here is App.vue as an example:

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

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

3. Listen to shake events

In the created life cycle function of the page, listen to the JSBridgeReady event through broker.emit('JSBridgeReady'), and listen to the shake event through uni.onAccelerometerChange() in the event listening function:

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

In the onAccelerometerChange event listening function, first obtain the current acceleration value, and determine whether a shaking action occurs by calculating the speed. Here you can adjust the speed threshold yourself to determine the sensitivity of the shake. At the same time, in order to avoid misjudgment, you can also make a judgment by recording the last acceleration value and time.

3. Summary

Through the above steps, we can implement the monitoring shake function in Uniapp. However, it should be noted that since the acceleration sensor of each mobile phone is different, it is recommended to test and optimize when using this function to achieve the best use effect. I hope this article can be helpful to everyone.

The above is the detailed content of How Uniapp monitors Shake. For more information, please follow other related articles on the PHP Chinese website!