Bagaimana untuk menentukan sama ada kod hanya berjalan dalam Apl dalam uniapp

Dengan perkembangan pesat aplikasi mudah alih, rangka kerja pembangunan merentas platform menjadi semakin popular di kalangan pembangun. Uniapp, sebagai rangka kerja pembangunan merentas platform berdasarkan rangka kerja Vue.js, telah menarik banyak perhatian dalam pasaran semasa. Walau bagaimanapun, dalam Uniapp, kadangkala kita perlu menentukan sama ada kod tersebut dijalankan dalam penyemak imbas web atau Apl. Artikel ini akan memperkenalkan cara untuk menentukan sama ada kod hanya berjalan dalam Apl dalam Uniapp.

Kaedah pertama: Gunakan bar navigasi untuk menunjukkan dan menyembunyikan

Bar navigasi dalam Uniapp terbahagi kepada dua kaedah, iaitu bar navigasi App dan bar navigasi Web. Dalam projek, kita boleh menggunakan ciri ini untuk membuat pertimbangan.

Kod dilaksanakan seperti berikut:

uni.onNavigationBarChange((res) => {
  if (res.type === 'show') {
    console.log('在App中运行')
  } else {
    console.log('在Web浏览器中运行')
  }
})

Di sebelah App, bar navigasi dipaparkan secara lalai, jadi apabila bar navigasi dipaparkan, kod tersebut melaksanakan pernyataan 在App中运行. Apabila diakses dalam pelayar web, bar navigasi disembunyikan secara lalai dan pernyataan 在Web浏览器中运行 dilaksanakan. Nota: Kaedah ini memerlukan bar navigasi didayakan dalam halaman.

Kaedah kedua: Gunakan kaedah uni.getSystemInfoSync

uni.getSystemInfoSync untuk mendapatkan maklumat peranti dan menilai dengan mendapatkan atribut platform dalam maklumat peranti. Kod

dilaksanakan seperti berikut:

const systemInfo = uni.getSystemInfoSync()
if (systemInfo.platform === 'android' || systemInfo.platform === 'ios') {
  console.log('在App中运行')
} else {
  console.log('在Web浏览器中运行')
}

Apabila dijalankan dalam Apl, atribut platform mengembalikan android atau ios, jadi apabila pernyataan 在App中运行 adalah dilaksanakan, Apabila diakses dalam pelayar web, h5 dikembalikan dan pernyataan 在Web浏览器中运行 dilaksanakan.

Kaedah ketiga: Gunakan uni.postMessage dan onmessage

untuk menghantar mesej ke halaman anda sendiri, kemudian dapatkan mesej dalam onmessage, dan tentukan kod dalam Apl dengan menilai sumber mesej Atau jalankan di sebelah web.

Kod dilaksanakan seperti berikut:

// 发送消息
uni.postMessage({ from: 'uniapp' })

// 监听消息
window.onmessage = (event) => {
  if (event.data.from === 'uniapp') {
    console.log('在App中运行')
  } else {
    console.log('在Web浏览器中运行')
  }
}

Apabila dijalankan dalam Apl, sumber mesej yang dihantar oleh postMessage ialah uniapp, jadi pernyataan 在App中运行 dilaksanakan apabila berjalan dalam pelayar web Apabila diakses, tiada pernyataan dilaksanakan kerana kaedah postMessage tidak dipanggil.

Ringkasan:

Melalui tiga kaedah di atas, kami boleh menentukan dengan lebih tepat sama ada kod tersebut hanya berjalan dalam Apl. Dalam pembangunan sebenar, kaedah yang sesuai boleh dipilih mengikut keperluan projek. Perlu diingat bahawa apabila menggunakan kaedah pertama, bar navigasi perlu didayakan pada halaman.

Uniapp mempunyai banyak fungsi dan ciri yang berkuasa, yang merupakan salah satu sebab mengapa ia popular dalam pembangunan merentas platform. Saya harap artikel ini dapat membantu pembangun Uniapp.

Atas ialah kandungan terperinci Bagaimana untuk menentukan sama ada kod hanya berjalan dalam Apl dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!