uniapp怎么跳转到外部页面-uni-app-PHP中文网

uniapp怎么跳转到外部页面

PHPz

发布： 2023-04-23 10:06:57

原创

9370人浏览过

随着移动端应用的普及，我们越来越需要在应用中跳转到外部页面。这种功能在uniapp中也同样存在。本文将介绍如何在uniapp中跳转到外部页面。

一、uniapp中用于跳转到外部页面的API

在uniapp中，使用uni.navigateTo()函数可以打开一个新页面。它可以跳转到uniapp中的页面，也可以跳转到外部页面。它接受一个参数：URL。

URL是一个字符串，以http、https、ftp、tel、sms、mailto等协议开头。如果URL以http或https开头，则会直接打开浏览器并跳转到该地址。

二、实现跳转到外部页面

在实际开发中，我们需要实现一个点击按钮后跳转到外部页面的功能。

首先，在uniapp项目的页面文件夹下创建一个新页面，比如叫外部页面。在外部页面的vue文件中添加以下代码：

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

<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>

登录后复制

这里我们在页面mounted钩子中，设置了一个2秒的延时，然后调用了一个jump()方法。jump()方法中，使用uni.navigateTo()函数跳转到外部网址 https://www.baidu.com。这样，我们只需要点击跳转按钮，就可以看到外部页面被打开。

接下来，在uniapp项目的入口页面中，添加一个按钮，用于跳转到外部页面。在入口页面的vue文件中，添加以下代码：

<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>

登录后复制

这里我们在页面中添加了一个按钮，当用户点击按钮后，调用了jump()方法，使用uni.navigateTo()函数跳转到外部页面。

三、总结

在uniapp中实现跳转到外部页面非常简单。只需要使用uni.navigateTo()函数，传入外部页面的URL地址，就可以实现跳转。但需要注意的是，如果你需要跳转到的是其它小程序页面，则需要使用uni.navigateToMiniProgram()函数。通过本文的介绍，我们相信你已经能够很好地掌握跳转到外部页面的方法了。

以上就是uniapp怎么跳转到外部页面的详细内容，更多请关注php中文网其它相关文章！