How to jump to external page in uniapp

With the popularity of mobile applications, we increasingly need to jump to external pages in the application. This functionality also exists in uniapp. This article will introduce how to jump to external pages in uniapp.

1. API for jumping to external pages in uniapp

In uniapp, use the uni.navigateTo() function to open a new page. It can jump to a page in uniapp or an external page. It accepts one parameter: URL.

URL is a string starting with http, https, ftp, tel, sms, mailto and other protocols. If the URL starts with http or https, the browser will be opened directly and jumped to that address.

2. Implement jump to external page

In actual development, we need to implement a function that jumps to an external page after clicking a button.

First, create a new page under the page folder of the uniapp project, such as an external page. Add the following code to the vue file of the external page:

<template>
  <div class="container">
    <h1>这里是外部页面</h1>
  </div>
</template>

<script>
export default {
  name: 'OuterPage',
  mounted () {
    setTimeout(() => {
      this.jump()
    }, 2000)
  },
  methods: {
    jump () {
      uni.navigateTo({
        url: 'https://www.baidu.com'
      })
    }
  }
}
</script>

Here we set a 2-second delay in the page mounted hook, and then call a jump() method. In the jump() method, use the uni.navigateTo() function to jump to the external URL https://www.baidu.com. In this way, we only need to click the jump button to see the external page being opened.

Next, add a button to the entry page of the uniapp project to jump to the external page. In the vue file of the entry page, add the following code:

<template>
  <div class="container">
    <h1>这里是uniapp项目入口页</h1>
    <button @click="jump">跳转到外部页面</button>
  </div>
</template>

<script>
export default {
  name: 'Index',
  methods: {
    jump () {
      uni.navigateTo({
        url: '/pages/outerPage/outerPage'
      })
    }
  }
}
</script>

Here we add a button to the page. When the user clicks the button, the jump() method is called and the uni.navigateTo() function is used to jump Go to external page.

3. Summary

It is very simple to jump to an external page in uniapp. Just use the uni.navigateTo() function and pass in the URL address of the external page to achieve the jump. But it should be noted that if you need to jump to other mini program pages, you need to use the uni.navigateToMiniProgram() function. Through the introduction of this article, we believe that you can already master the method of jumping to external pages well.

The above is the detailed content of How to jump to external page in uniapp. For more information, please follow other related articles on the PHP Chinese website!