Rumah hujung hadapan web uni-app Cara Uniapp memantau Shake

Cara Uniapp memantau Shake

Apr 27, 2023 am 09:07 AM

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js, yang boleh digunakan untuk membangunkan aplikasi untuk berbilang platform seperti iOS, Android, H5 dan applet. Dalam banyak aplikasi, goncang adalah fungsi yang sangat biasa Artikel ini akan memperkenalkan cara melaksanakan fungsi goncangan pemantauan dalam Uniapp.

1. Prinsip gegaran

Prinsip gegaran adalah menggunakan sensor pecutan terbina dalam telefon bimbit untuk mendapatkan data pecutan telefon mudah alih, dan menentukan sama ada gegaran mempunyai berlaku dengan menganalisis perubahan dalam tindakan pecutan. Khususnya, apabila telefon pegun, nilai pecutan yang diukur oleh penderia pecutan ialah 1g Apabila telefon bergegar, nilai pecutan yang diukur oleh penderia pecutan akan berubah dengan mengesan perubahan dalam nilai pecutan. Gerak gegar.

2. Langkah untuk memantau gegaran dalam Uniapp

  1. Pasang pemalam uni-mpvue-broker dalam projek uni-app

Dalam Uniapp Pemalam uni-mpvue-broker diperlukan untuk pemantauan dan gegaran, yang boleh dipasang dalam projek melalui arahan berikut:

npm install @dcloudio/uni-mpvue-broker

  1. dalam Perkenalkan pemalam ke dalam halaman

Perkenalkan pemalam ke dalam halaman yang perlu memantau gegaran Berikut ialah App.vue sebagai contoh:

<template>
  <div class="container">
    ...
  </div>
</template>

<script>
import broker from '@dcloudio/uni-mpvue-broker'
export default {
  created () {
    broker.emit('JSBridgeReady')
  }
}
</script>
Salin selepas log masuk
  1. Dengar acara goncang

Dalam fungsi kitaran hayat halaman yang dicipta, dengar acara JSBridgeReady melalui broker.emit('JSBridgeReady'), dan dengar acara goncang melalui uni.onAccelerometerChange() dalam fungsi mendengar acara:

<script>
import broker from '@dcloudio/uni-mpvue-broker'
export default {
  created () {
    broker.emit('JSBridgeReady')
    broker.on('onAccelerometerChange', this.onAccelerometerChange)
  },
  destroyed () {
    broker.off('onAccelerometerChange', this.onAccelerometerChange)
  },
  methods: {
    onAccelerometerChange (res) {
      let acceleration = res.accelerationIncludingGravity
      let speed = Math.abs(acceleration.x + acceleration.y + acceleration.z - this.lastAcceleration.x - this.lastAcceleration.y - this.lastAcceleration.z) / (new Date().getTime() - this.lastTime)
      if (speed > 30) {
        console.log('发生了摇一摇的动作')
      }
      this.lastAcceleration = acceleration
      this.lastTime = new Date().getTime()
    }
  }
}
</script>
Salin selepas log masuk

Dalam fungsi mendengar acara onAccelerometerChange, mula-mula dapatkan nilai pecutan semasa dan tentukan sama ada tindakan gegaran telah berlaku dengan mengira kelajuan. Di sini anda boleh melaraskan ambang kelajuan sendiri untuk menentukan sensitiviti goncangan. Pada masa yang sama, untuk mengelakkan salah penilaian, anda juga boleh membuat pertimbangan dengan merekodkan nilai dan masa pecutan terakhir.

3. Ringkasan

Melalui langkah di atas, kita boleh melaksanakan fungsi pemantauan gegaran dalam Uniapp. Walau bagaimanapun, perlu diingat bahawa oleh kerana penderia pecutan setiap telefon mudah alih adalah berbeza, adalah disyorkan untuk menguji dan mengoptimumkan apabila menggunakan fungsi ini untuk mencapai kesan penggunaan yang terbaik. Saya harap artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Cara Uniapp memantau Shake. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah jenis ujian yang boleh anda lakukan dalam aplikasi UNIAPP? Apakah jenis ujian yang boleh anda lakukan dalam aplikasi UNIAPP? Mar 27, 2025 pm 04:59 PM

Artikel ini membincangkan pelbagai jenis ujian untuk aplikasi UNIAPP, termasuk unit, integrasi, fungsional, UI/UX, prestasi, silang platform, dan ujian keselamatan. Ia juga meliputi memastikan keserasian silang platform dan mengesyorkan alat seperti JES

Bagaimanakah anda dapat mengurangkan saiz pakej aplikasi UNIAPP anda? Bagaimanakah anda dapat mengurangkan saiz pakej aplikasi UNIAPP anda? Mar 27, 2025 pm 04:45 PM

Artikel ini membincangkan strategi untuk mengurangkan saiz pakej UNIAPP, memberi tumpuan kepada pengoptimuman kod, pengurusan sumber, dan teknik seperti pemisahan kod dan pemuatan malas.

Apakah alat penyahpepijatan yang tersedia untuk pembangunan Uniapp? Apakah alat penyahpepijatan yang tersedia untuk pembangunan Uniapp? Mar 27, 2025 pm 05:05 PM

Artikel ini membincangkan alat penyahpepijatan dan amalan terbaik untuk pembangunan UNIPP, yang memberi tumpuan kepada alat seperti HBuildex, WeChat Developer Tools, dan Chrome Devtools.

Bagaimanakah anda boleh menggunakan pemuatan malas untuk meningkatkan prestasi? Bagaimanakah anda boleh menggunakan pemuatan malas untuk meningkatkan prestasi? Mar 27, 2025 pm 04:47 PM

Lazy Loading Delers Non-kritikal Sumber untuk meningkatkan prestasi tapak, mengurangkan masa beban dan penggunaan data. Amalan utama termasuk mengutamakan kandungan kritikal dan menggunakan API yang cekap.

Bagaimanakah anda boleh mengoptimumkan imej untuk prestasi web di Uniapp? Bagaimanakah anda boleh mengoptimumkan imej untuk prestasi web di Uniapp? Mar 27, 2025 pm 04:50 PM

Artikel ini membincangkan mengoptimumkan imej dalam UNIPP untuk prestasi web yang lebih baik melalui mampatan, reka bentuk responsif, pemuatan malas, caching, dan menggunakan format WEBP.

Apakah beberapa corak umum untuk menguruskan struktur data yang kompleks di UNIPP? Apakah beberapa corak umum untuk menguruskan struktur data yang kompleks di UNIPP? Mar 25, 2025 pm 02:31 PM

Artikel ini membincangkan menguruskan struktur data yang kompleks di UNIPP, yang memberi tumpuan kepada corak seperti Singleton, Observer, Kilang, dan Negeri, dan strategi untuk mengendalikan perubahan keadaan data menggunakan API VUEX dan VUE 3 API.

Apakah sifat yang dikira di Uniapp? Bagaimana mereka digunakan? Apakah sifat yang dikira di Uniapp? Bagaimana mereka digunakan? Mar 25, 2025 pm 02:23 PM

Ciri -ciri yang dikira oleh Uniapp, yang diperolehi dari Vue.js, meningkatkan pembangunan dengan menyediakan pengendalian data reaktif, boleh diguna semula, dan dioptimumkan. Mereka mengemas kini secara automatik apabila kebergantungan berubah, menawarkan manfaat prestasi dan memudahkan Co -Management Co

Bagaimanakah UNIPP mengendalikan konfigurasi dan gaya global? Bagaimanakah UNIPP mengendalikan konfigurasi dan gaya global? Mar 25, 2025 pm 02:20 PM

UNIPP menguruskan konfigurasi global melalui manifest.json dan gaya melalui app.vue atau app.scss, menggunakan uni.scss untuk pembolehubah dan campuran. Amalan terbaik termasuk menggunakan SCSS, gaya modular, dan reka bentuk responsif.

See all articles