概述
本文只涉及实现及代码讲解，不涉及具体技术的讲解，并尽量每一行代码都有详尽的注释，先实现，后积累。
前端 - 入门级教程 - 简易振动记录器
本文教大家实现一个简易的振动记录器。包括 短振动、长振动、振动录制开始/停止功能、播放功能，分享功能等
技术栈使用 uniapp-vue3 版本，工具使用 HbuilderX，真机App调试，微信小程序调试；
效果如下图：
分享效果如下图：
1. 安装HbuilderX 最新版最新版
https://www.dcloud.io/hbuilderx.html
2. 安装 微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3. 打开HbuilderX 文件 - 新建 - 项目，新增一个uniapp项目，选择vue3版本
代码编写
直接修改新建项目中的 /pages/index/index.vue 文件即可
整体结构
<script setup>
</script>
部分
<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(() => {
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" // 分享出去的地址
}
})