快捷搜索:  汽车  科技

振动传感器怎么检测?手把手教你实现振动记录器

振动传感器怎么检测?手把手教你实现振动记录器3. 打开HbuilderX 文件 - 新建 - 项目,新增一个uniapp项目,选择vue3版本2. 安装 微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html效果如下图:分享效果如下图:1. 安装HbuilderX 最新版最新版 https://www.dcloud.io/hbuilderx.html

概述

本文只涉及实现及代码讲解,不涉及具体技术的讲解,并尽量每一行代码都有详尽的注释,先实现,后积累。

前端 - 入门级教程 - 简易振动记录器

本文教大家实现一个简易的振动记录器。包括 短振动、长振动、振动录制开始/停止功能、播放功能,分享功能等

技术栈使用 uniapp-vue3 版本,工具使用 HbuilderX,真机App调试,微信小程序调试;

效果如下图:

振动传感器怎么检测?手把手教你实现振动记录器(1)

分享效果如下图:

振动传感器怎么检测?手把手教你实现振动记录器(2)

1. 安装HbuilderX 最新版最新版 https://www.dcloud.io/hbuilderx.html

2. 安装 微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3. 打开HbuilderX 文件 - 新建 - 项目,新增一个uniapp项目,选择vue3版本

振动传感器怎么检测?手把手教你实现振动记录器(3)

代码编写

直接修改新建项目中的 /pages/index/index.vue 文件即可

整体结构

<template> </template> <script setup> </script> <style lang="scss" scoped> </style><template>部分

<template> <view class="content"> <!-- 一个在抖动的图片 class 里面的shake类是一个左右振动的动画 --> <image class="logo shake" src="/static//vibrate.jpg"></image> <!-- 提示信息 --> <uni-title type="h1" title="点击下方按钮让手机振动"></uni-title> <!-- 短振动按钮,点击调用一次短震动,如果正在录制,那么往记录信息里面加一条数据 --> <button @click="onShortVibrate" type="primary">短振动</button> <!-- 长振动按钮,点击调用一次长振动,如果正在录制,那么往记录信息里面加一条数据 --> <button @click="onLongVibrate" type="primary">长振动</button> <!-- 提示信息 --> <uni-title type="h1" title="点击开始/停止录制"></uni-title> <uni-title type="h1" title="上方两个按钮的震动记录"></uni-title> <!-- 开始/停止录制振动按钮,点击之后开始或者停止振动 --> <button @click="onStartRecord" type="warn">{{vibrate.recordStatus ? '停止' : '开始'}}录制振动</button> <!-- 播放已经录制的振动 --> <button @click="onPlayRecord" :type="vibrate.isShowing ? 'default' : 'primary'">{{vibrate.isShowing ? '播放中...' : '播放振动'}}</button> <!-- 分享按钮 小程序中必须要有 open-type="share" --> <button open-type="share">分享</button> </view> </template><script setup>部分

import { reactive } from "vue"; // 来自官方文档的用法,引入分享的监听 import { onShareAppMessage } from '@dcloudio/uni-app' // 震动状态 const vibrate = reactive({ // 用来延时控制动画,暂时不使用,会导致振动接口调用延迟 status : "stop" // 如果要做多个录制的记录,这里放要展示的录制信息 records: [] // 当前录制的数据 // [{time:0 type:'short/long/stop'}] : time:相对时间 nowRecords:[] // 是否正在录制中 recordStatus : false // 开始录制的时间戳 startTime:0 // 是否在演示模式 isShowing:false // 一分钟录制限制 limitTimer:null }) // 点击短震动 const onShortVibrate = () => { // 不在演示模式,并且正在录制中,演示模式时不加记录 if(! vibrate.isShowing && vibrate.recordStatus){ // 向当前录制的振动信息里面放一条新的数据 vibrate.nowRecords.push({ time: new Date().getTime() - vibrate.startTime type : 'short' }) } // 调用短震动 uni.vibrateShort(); } const onLongVibrate = () => { // 不在演示模式,并且正在录制中,演示模式时加记录 if(! vibrate.isShowing && vibrate.recordStatus){ // 向当前录制的振动信息里面放一条新的数据 vibrate.nowRecords.push({ time: new Date().getTime() - vibrate.startTime type : 'long' }) } // 调用长振动 uni.vibrateLong(); } // 开始/停止录制振动 const onStartRecord = () => { // 如果正在录制中,那么停止录制 if(vibrate.recordStatus){ // 结束时间是点击按钮的时候,并不是点击确认停止的时候,所以放在这里 let stopTime = new Date().getTime(); // 调起一个交互框,询问是否需要停止录制 uni.showModal({ title:"提示" content:"确认停止录制吗?" success: (res) => { // 如果点击的是确认按钮 if(res.confirm === true){ // 此时停止记录,并把停止时间放进去 if(vibrate.nowRecords.length === 0){ uni.showToast({ icon:"error" title:"至少振动一次" }) return; } // 把正在录制标识改为false vibrate.recordStatus = false; // 加入一条停止播放的记录 vibrate.nowRecords.push({ time : stopTime - vibrate.startTime type : 'stop' }) // 清空一分钟限制的setTimeout clearTimeout(vibrate.limitTimer) // 提示信息 uni.showToast({ icon:"success" title:"录制成功!" }) } } }) }else{ // 询问是否开始录制 uni.showModal({ title:"提示" content:"确认开始录制吗?" success: (res) => { // 如果点击的是确定 if(res.confirm === true){ // 提示开始记录 uni.showToast({ icon:"success" title:"开始录制振动" }) // 开始录制 vibrate.recordStatus = true; // 清空原本的录制信息 // todo:如果有多个录制,那么先把原始录制放到录制列表里面去,并给个名称 vibrate.nowRecords = []; // 记录开始录制的时间,后面所有的事件都要减去这个时间,记录相对值 vibrate.startTime = new Date().getTime(); // 一分钟限制的延时器,即在一分钟后直接执行停止录制操作 vibrate.limitTimer = setTimeout(()=>{ let stopTime = new Date().getTime(); // 此时停止记录 vibrate.recordStatus = false; // 并把停止时间放进去 vibrate.nowRecords.push({ time : stopTime - vibrate.startTime type : 'stop' }); // 提示一下 uni.showToast({ icon:"success" title:"最长录制一分钟" }) console.log("达到一分钟限制") } 60*1000) } } }) } } // 播放震动 const onPlayRecord = () => { // 如果已经在播放中了,就直接返回了,不执行任何操作 if(vibrate.isShowing) return ; // 如果记录数组的长度是0,说明还没开始录制,给个提示并退出函数 if(vibrate.nowRecords.length == 0 ) { uni.showToast({ icon:"error" title:"尚未进行录制" }) return ; } // 如果当前正在录制中,同样退出函数 if(vibrate.recordStatus){ uni.showToast({ icon:"error" title:"正在录制中" }) return ; } // 开始播放 vibrate.isShowing = true; // 循环每一条已经记录好的振动记录 for(let i = 0; i < vibrate.nowRecords.length; i ){ // 当前处理的这一条记录 const item = vibrate.nowRecords[i]; // 根据记录的相对时间进行延迟操作,这样所有的记录就会按照原来录制的顺序一条一条进行操作了 // setTimeout(() => {要执行的操作} 延迟的时间); setTimeout(() => { if(item.type == 'short'){ // 如果记录的是短振动,执行短振动 onShortVibrate(); } if(item.type == 'long'){ // 如果记录的是长振动,执行长振动 onLongVibrate(); } // 如果遇到停止标识,或者已经执行到最后一条记录 if(item.type == 'stop' || i == vibrate.nowRecords.length - 1){ // 提示一下,已经播放完毕 uni.showToast({ icon:"success" title:"播放完毕!" }) // 并恢复正在播放标识 vibrate.isShowing = false; } } item.time) } } // 这里是微信小程序的监听分享的方法,分享的效果在上图 onShareAppMessage((res) => { return { title: "振动录制器" // 分享的名称 path: "/pages/index/index" // 分享出去的地址 } })<style lang="scss" scoped>部分

.content { /** 上下左右内边距都为 15rpx */ padding:15rpx; /* 使用flex布局 */ display: flex; /* 布局方向为列方向,即竖着排列 */ flex-direction: column; /* 水平布局为flex的开始位置对齐,即在纵向上从顶部开始布局 */ justify-content: flex-start; /* 在垂直方向上为居中布置,里面的所有元素都会横向(垂直于列,所以是横向)居中 */ align-items: center; /* 定义里面的按钮button元素 */ button{ /* 宽度顶满 */ width:100%; /* 上边距20rpx */ margin-bottom: 20rpx; /* 上边距20rpx */ margin-top: 20rpx; } } /* 上面的那个图片 */ .logo { /* 宽高 200rpx */ height: 200rpx; width: 200rpx; /* 上外边距 100 */ margin-top: 100rpx; } /* 图片的动画 */ .shake { /* 动画名称 shake,持续时间 200ms,动画循环无限次 */ animation: shake 200ms infinite; } /* 关键帧 shake 定义,即动画定义 */ @keyframes shake { /* 10%和90%的时长时 变形往左 4rpx */ 10% 90% { transform: translateX(-4rpx); } /* 20%和80%时长时 变形往右 4rpx */ 20% 80% { transform: translateX( 4rpx); } /* 变形往左 4rpx */ 30% 70% { transform: translateX(-4rpx); } /* 变形往右 4rpx */ 40% 60% { transform: translateX( 4rpx); } /* 变形往左 4rpx */ 50% { transform: translateX(-4rpx); } }调试

调试时可能会提示安装各种插件,顺序安装即可

  1. 运行 - 运行到内置浏览器,内置H5浏览器无法体验振动以及分享功能
  2. 运行 - 运行到手机或模拟器
  3. 运行 - 运行到小程序模拟器,看到振动及分享功能

即可体验本次编写的小功能

总结

使用到的技术,可以到对应的官方文档中去看看具体用法

uniapp:onShareAppMessage 分享事件监听、uni.vibrateShort() 短振动、uni.vibrateLong() 长振动

vue3 : setup 组合式API入口 <script setup> 是一个语法糖、reactive 返回对象的响应式副本、

css:flex布局、基本盒子模型、@keyframes关键帧定义,scss预编译器

如果在自己操作过程中有任何的疑问和问题,欢迎交流!

猜您喜欢: