Comment déterminer si le code s'exécute uniquement dans l'application dans uniapp

Avec le développement rapide des applications mobiles, les frameworks de développement multiplateformes deviennent de plus en plus populaires parmi les développeurs. Uniapp, en tant que framework de développement multiplateforme basé sur le framework Vue.js, a attiré beaucoup d'attention sur le marché actuel. Cependant, dans Uniapp, nous devons parfois déterminer si le code s'exécute dans le navigateur Web ou dans l'application. Cet article explique comment déterminer si le code s'exécute uniquement dans l'application dans Uniapp.

La première méthode : utilisez la barre de navigation pour afficher et masquer

La barre de navigation dans Uniapp est divisée en deux méthodes, à savoir la barre de navigation de l'application et la barre de navigation Web. Dans les projets, nous pouvons utiliser cette fonctionnalité pour porter des jugements.

Le code est implémenté comme suit :

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

Du côté de l'application, la barre de navigation est affichée par défaut, donc lorsque la barre de navigation est affichée, le code exécute l'instruction Exécuter dans l'application. Lorsqu'elle est accessible dans un navigateur Web, la barre de navigation est masquée par défaut. Exécutez l'instruction Exécuter dans le navigateur Web. Remarque : Cette méthode nécessite que la barre de navigation soit activée dans la page. 在App中运行的语句。当在Web浏览器中访问时，导航栏默认是隐藏的，执行在Web浏览器中运行语句。注意：此方法需要在页面内启用导航栏。

第二种方法：利用uni.getSystemInfoSync

uni.getSystemInfoSync方法可以获取设备信息，通过获取设备信息中的platform属性来判断。

代码实现如下：

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

在App中运行时，platform属性返回的是android或者ios，所以执行在App中运行的语句，当在Web浏览器中访问时，返回的是h5，执行在Web浏览器中运行语句。

第三种方法：利用uni.postMessage与onmessage

通过向自己页面发送消息，然后在onmessage中获取消息，通过判断消息来源来确定代码在App或者Web端运行。

代码实现如下：

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

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

在App中运行时，postMessage发送的消息来源为uniapp，所以执行在App中运行的语句，当在Web浏览器中访问时，由于没有调用postMessage

Deuxième méthode : utilisez la méthode uni.getSystemInfoSync

uni.getSystemInfoSync pour obtenir des informations sur l'appareil, qui peuvent être déterminées en obtenant l'attribut platform dans les informations sur l'appareil.

Le code est implémenté comme suit :

rrreee

Lors de l'exécution dans l'application, l'attribut platform renvoie android ou ios, donc exécutez L'instruction "Exécuter dans l'application" renverra h5 lors de l'accès dans un navigateur Web. Exécutez l'instruction "Exécuter dans l'application" . 🎜🎜La troisième méthode : utilisez uni.postMessage et onmessage🎜🎜 pour envoyer un message à votre propre page, puis recevez le message dans onmessage, Déterminez si le code s'exécute du côté application ou Web en déterminant la source du message. 🎜🎜Le code est implémenté comme suit : 🎜rrreee🎜Lors de l'exécution dans App, la source du message envoyé par postMessage est uniapp, donc exécutez Run in App , lors d'un accès dans un navigateur Web, aucune instruction n'est exécutée car la méthode postMessage n'est pas appelée. 🎜🎜Résumé : 🎜🎜Grâce aux trois méthodes ci-dessus, nous pouvons déterminer plus précisément si le code s'exécute uniquement dans l'application. En développement réel, la méthode appropriée peut être sélectionnée en fonction des besoins du projet. Il convient de noter que lors de l'utilisation de la première méthode, la barre de navigation doit être activée sur la page. 🎜🎜Uniapp possède de nombreuses fonctions et fonctionnalités puissantes, ce qui est l'une des raisons pour lesquelles il est populaire dans le développement multiplateforme. J'espère que cet article pourra aider les développeurs Uniapp. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!