How to determine whether the code is only running in the App in uniapp

With the rapid development of mobile applications, cross-platform development frameworks are becoming more and more popular among developers. Uniapp, as a cross-platform development framework based on the Vue.js framework, has attracted much attention in the current market. However, in Uniapp, we sometimes need to determine whether the code is running in the web browser or the App. This article will introduce how to determine whether the code is only running in the App in Uniapp.

The first method: Use the navigation bar to show and hide

The navigation bar in Uniapp is divided into two methods, namely the App navigation bar and the Web navigation bar. In projects, we can use this feature to make judgments.

The code is implemented as follows:

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

On the App side, the navigation bar is displayed by default, so when the navigation bar is displayed, the code executes the Run statement in the App. When accessed in a web browser, the navigation bar is hidden by default. Execute to run the statement in the web browser. Note: This method requires the navigation bar to be enabled within the page.

Second method: Use the uni.getSystemInfoSync

uni.getSystemInfoSync method to obtain device information by obtaining the platform attribute in the device information to judge.

The code is implemented as follows:

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

When running in the App, the platform attribute returns android or ios, Therefore, execute to run the statement in the App. When accessed in a web browser, h5 will be returned. Execute to run the statement in the web browser.

The third method: Use uni.postMessage and onmessage

to send a message to your own page, and then use onmessage Get the message and determine whether the code is running on the App or Web side by judging the source of the message.

The code is implemented as follows:

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

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

When running in App, the source of the message sent by postMessage is uniapp, so execute in App When accessing the statement in a web browser, no statement is executed because the postMessage method is not called.

Summary:

Through the above three methods, we can more accurately determine whether the code only runs in the App. In actual development, the appropriate method can be selected according to project needs. It should be noted that when using the first method, the navigation bar needs to be enabled on the page.

Uniapp has many powerful functions and features, which is one of the reasons why it is popular in cross-platform development. I hope this article can help Uniapp developers.

The above is the detailed content of How to determine whether the code is only running in the App in uniapp. For more information, please follow other related articles on the PHP Chinese website!