本文只涉及实现及代码讲解，不涉及具体技术的讲解，并尽量每一行代码都有详尽的注释，先实现，后积累。
前端 - 入门级教程 - 简易振动记录器
本文教大家实现一个简易的振动记录器。包括 短振动、长振动、振动录制开始/停止功能、播放功能，分享功能等
技术栈使用 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 文件即可
整体结构
<template>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
<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>
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" // 分享出去的地址
}
})
.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);
}
}
调试时可能会提示安装各种插件，顺序安装即可
- 运行 - 运行到内置浏览器，内置H5浏览器无法体验振动以及分享功能
- 运行 - 运行到手机或模拟器
- 运行 - 运行到小程序模拟器，看到振动及分享功能
即可体验本次编写的小功能
总结使用到的技术，可以到对应的官方文档中去看看具体用法
uniapp：onShareAppMessage 分享事件监听、uni.vibrateShort() 短振动、uni.vibrateLong() 长振动
vue3 ： setup 组合式API入口 <script setup> 是一个语法糖、reactive 返回对象的响应式副本、
css：flex布局、基本盒子模型、@keyframes关键帧定义，scss预编译器
如果在自己操作过程中有任何的疑问和问题，欢迎交流！
,
