uniapp 震动功能实现

项目场景:

提示:这里简述项目相关背景:

在项目中有时候需要一些功能,比如震动


描述

提示:这里描述项目中遇到的问题:

移动应用中,震动反馈是提升用户体验的重要方式。uniapp 提供了两种震动方式:

  • 短震动:轻微的触感反馈
  • 长震动:较强的震动反馈

分析:

提示:这里填写问题的分析:

1. 短震动 (uni.vibrateShort)

  • 作用:触发较短时间的震动
  • 震动时长:约 15ms
  • 适用场景:按钮点击、操作反馈等轻量级交互
javascript 复制代码
uni.vibrateShort(options: UniNamespace.VibrateShortOptions)

参数说明:

javascript 复制代码
interface VibrateShortOptions {
  success?: () => void  // 接口调用成功的回调函数
  fail?: (err: any) => void  // 接口调用失败的回调函数
  complete?: () => void  // 接口调用结束的回调函数(调用成功、失败都会执行)
}

2. 长震动 (uni.vibrateLong)

  • 作用:触发较长时间的震动
  • 震动时长:约 400ms
  • 适用场景:游戏结束、重要提示等需要明显震动反馈的场合
javascript 复制代码
uni.vibrateLong(options: UniNamespace.VibrateLongOptions)

参数说明:

javascript 复制代码
interface VibrateLongOptions {
  success?: () => void  // 接口调用成功的回调函数
  fail?: (err: any) => void  // 接口调用失败的回调函数
  complete?: () => void  // 接口调用结束的回调函数(调用成功、失败都会执行)
}

3:平台差异说明

| API | App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 |

|-----|-----|----| ---------- | ------------ | ---------- |

| vibrateShort | √ | x | √ | √ | √ |

| vibrateLong | √ | x | √ | √ | √ |

4:注意事项

权限要求:

  • App 平台需要在 manifest.json 中配置 vibrate 权限
  • 部分平台可能需要用户授权
  • 使用场景:
  • 短震动适合用于轻量级的交互反馈
  • 长震动建议用于重要提示,避免过度使用影响用户体验
  • 兼容性处理:
  • 建议添加错误处理逻辑
  • 在不支持的平台上需要提供替代方案

实例方案:

提示:这里填写该问题的具体解决方案:

1. 创建震动工具函数

useVibrate.ts 文件

javascript 复制代码
/**
 * 震动工具函数
 */
export function useVibrate() {
  // 短震动
  const vibrateShort = () => {
    uni.vibrateShort({
      success: () => {
        console.log('短震动成功')
      },
      fail: (err) => {
        console.error('短震动失败:', err)
      }
    })
  }
 
  // 长震动
  const vibrateLong = () => {
    uni.vibrateLong({
      success: () => {
        console.log('长震动成功')
      },
      fail: (err) => {
        console.error('长震动失败:', err)
      }
    })
  }
 
  return {
    vibrateShort,
    vibrateLong
  }
}

2:页面中使用

javascript 复制代码
<template>
  <view class="container">
    <button @click="handleShortVibrate">短震动</button>
    <button @click="handleLongVibrate">长震动</button>
  </view>
</template>
 
<script setup lang="ts">
import { useVibrate } from '@/composables/useVibrate'
 
const { vibrateShort, vibrateLong } = useVibrate()
 
const handleShortVibrate = () => {
  vibrateShort()
}
 
const handleLongVibrate = () => {
  vibrateLong()
}
</script>
相关推荐
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106325 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
iOS阿玮11 小时前
苹果卡审情况将逐步缓解,合规的开发者请耐心等待~
uni-app·app·apple
2501_9160137414 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159184116 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张16 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
耶啵奶膘1 天前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹1 天前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
吴传逞1 天前
记一次uniapp+nutui-uniapp搭建项目
uni-app
雪芽蓝域zzs1 天前
uni-app倒计时公共组件 封装,倒计时组件
uni-app