vue项目中巧用shake.js模拟微信摇一摇功能

1. npm 安装shake.js包

npm install shake.js --save

2. 使用包

在你需要的项目文件上import shake.js

import Shake from 'shake.js

3. 具体代码如下↓，这里只是测试摇一摇，具体的业务逻辑，你懂的。

<template>
  <div class="hello">
    <h4>手机摇一摇的功能</h4>
    <div>
      <!-- 这里是摇一摇音效，百度可以下载 -->
      <audio src="./static/mp3/yinyue.mp3"  ref="shakeAudio">
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
  </div>
</template>

<script>
// import shake.js 
import Shake from 'shake.js'  // es6的方式导入
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted () {
    // 实例化一个 shake 对象
    let myShakeEvent = new Shake({
      threshold: 20, // 默认摇动阈值
      timeout: 1200 // 默认两次事件间隔时间
    })
    // 监听设备的动作
    myShakeEvent.start()
    // 添加一个事件监听
    window.addEventListener('shake', this.shakeEventDidOccur, false)
  },
  methods: {
    // 摇动的回调函数
    shakeEventDidOccur () {
      // 获取音频标签
      let audio = this.$refs.shakeAudio
      if (window.navigator.vibrate) {
        navigator.vibrate(500)
      }
      // 播放音频
      audio.play()
    }
  }
}
</script>

4. 手机摇一摇，体验真实快感。如果你暂时还没部署到服务器上，可以这样点击这里，或许可以帮到你，再或者如果你有服务器，你点击这里，应该也可以帮到你

记录于 2019-3-14 19:29 加班的路上。