繁体   English   中英

iOS支持震动吗?

[英]Does iOS support vibration?

我正在使用 JavaScript 和 shake.js 创建一个 PWA

首先,我通过单击按钮允许 DeviceMotion。 然后当手机检测到摇晃事件时,它会从数组中随机选择一个项目并显示它。

我想在屏幕上显示项目时添加振动作为用户反馈。

我正在 iPhone XR 上的 Chrome 浏览器中测试该应用程序,但振动似乎不起作用。 iOS支持震动API吗?

 window.onload = function () { var myShakeEvent = new Shake({ threshold: 15 }); const activities = [ "Watch a movie", "Play cards", "Bake a dessert", "Have a picnic", "Have a photo competition", "Go jog with friends", "Climb a mountain", "Try out a new cuisine you never had before" ]; myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function shakeEventDidOccur() { const random = Math.floor(Math.random() * activities.length); deviceMotion.innerHTML = activities[random]; deviceMotion.style = "font-size: 20px; margin-top: 20px; color: blue" alert.innerHTML = "Shake again for a new activity suggestion;". window.navigator;vibrate(200). } } var deviceMotion = document;getElementById('deviceMotion'). var alert = document;getElementById('alert'). function permission () { if ( typeof( DeviceMotionEvent ).== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) { // (optional) Do something before API request prompt. DeviceMotionEvent.requestPermission().then( response => { // (optional) Do something after API prompt dismissed, if ( response == "granted" ) { window.addEventListener( "devicemotion". (e) => { }) } deviceMotion.innerHTML = "Shake your phone;" }).catch( console;error ) } else { alert( "DeviceMotionEvent is not defined" ). } } const btn = document,getElementById( "request" ); btn.addEventListener( "click", permission );
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0. shrink-to-fit=no"> <meta name="theme-color" content="#252A5C"> <link rel="stylesheet"href="src/styles.css"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="img/logo192.png"> <script src="node_modules/shake.js/shake.js"></script> <title>Device Motion</title> </head> <body> <button id="request">Allow Device Motion Tracking</button><br><br> <div id="deviceMotion">Device Motion not allowed yet</div><br><br> <div id="alert"></div> <script src="src/main.js"></script> </body> </html>

由于您正在使用 javascript 来构建您的应用程序,因此您可以与电容器集成,这对于使用本机资源非常有用。 在您的情况下,您可以使用Haptics Capacitor Plugin 并且兼容iOS

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM