想要让微信摇一摇更酷炫？教你使用Vue框架轻松搞定

一、项目准备

想要让微信摇一摇的效果变得酷炫？首先得做点准备听说过 Vue 框架么？就是它了！记住别急着动手敲代码我们得先搞个新的 Vue 项目出来！嫌麻烦的话，可以试试看 Vue CLI 的小技巧喔！先把它装在电脑上，然后装好以后，就可以轻松地新建 Vue 项目。接下来打开项目文件夹，运行开发服务器，这样就可以在后面进行编译和测试

二、编写代码

npm install -g @vue/cli

1.添加页面元素（App.vue）：

首先，在 src 里找那个名字叫 App.vue 的文件。搞定后，开始使用 Vue 组件搞个 data，这样就能给页面的数据找好家了。然后，用模板语法让数据在页面上炫酷地显示。别忘了弄几个按钮，这样就可以玩转摇一摇功能！

vue create shake-effect

2.添加摇一摇效果（main.js）：

好，开始搞事情首先得在main.js文件里加上几个必备工具包或者插件，这样才能做到晃动屏幕的效果。简单来说，这些东西就是用来感知手机震动强弱变化的，然后像人工晃动手机那样去做，最后就能实现你想要的互动了。没什么复杂的，就是这样子！当然过程中有些小地方还是需要你敲点儿代码来调整的哈~

cd shake-effect
npm run serve

三、测试效果

1.启动开发服务器：

赶快敲开工房的钥匙，保证我们的新项目运行流畅又靠谱儿！

2.查看效果：

  

    

      

        摇一摇中...
      
      

        手机摇一摇，领红包
      
      

        点击摇一摇
      
    
  


export default {
  data() {
    return {
      shaking: false,
    };
  },
  methods: {
    handleShake() {
      this.shaking = true;
      setTimeout(() => {
        this.shaking = false;
        // 在此处添加摇一摇后的逻辑处理
      }, 1000);
    },
  },
};


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.phone {
  width: 200px;
  height: 300px;
  background-color: #ddd;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.shake-text {
  font-size: 16px;
  margin-top: 20px;
}
.shake-btn {
  margin-top: 30px;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
}
.shaking {
  animation: shake 1s infinite;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

首先，在电脑上输入网址”localhost:8080″，找到那个名叫”戳一戳”的按钮就行了。然后，想象自己在摇晃手机，等一小会儿。搞定后，再返回到手机浏览器看看原本那页网页，这时真的晃晃手机试试，应该就能看见一个叫做”摇一摇！”的窗口弹出来了。

四、总结

搞定！这回用Vue搞了“摇一摇”类似微信的效果，需要用上它的数据捆绑和事件链接功能，还要加些JavaScript来监测手机晃动哈。好玩？

Vue.config.productionTip = false;
if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
}
let SHAKE_THRESHOLD = 1000;
let last_update = 0;
let x, y, z, last_x, last_y, last_z;
function deviceMotionHandler(eventData) {
  let acceleration = eventData.accelerationIncludingGravity;
  let curTime = new Date().getTime();
  if (curTime - last_update > 100) {
    let diffTime = curTime - last_update;
    last_update = curTime;
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    let speed =
      (Math.abs(x + y + z - last_x - last_y - last_z) / diffTime) * 10000;
    if (speed > SHAKE_THRESHOLD) {
      // 在此处添加摇一摇后的逻辑处理
      alert('摇一摇！');
    }
    last_x = x;
    last_y = y;
    last_z = z;
  }
}
new Vue({
  render: (h) => h(App),
}).$mount('#app');

做研发，别忘了让产品好操作又有趣，让人感觉舒适！比如，设计个震动或者提示音，和用户摇晃手机类似；或是在界面加些动画效果，给人添点儿乐趣。这不就挺好吗？让大家玩儿得高兴！

看了文章，记得学做个类似微信里那个“摇一摇”的Vue例子说不定可以给你点灵感，搞好前端交互设计。有啥疑问或者想说的，都来下面评论区讨论咯~