유니앱에서 외부페이지로 이동하는 방법

모바일 애플리케이션의 인기로 인해 애플리케이션에서 외부 페이지로 이동해야 하는 필요성이 점점 더 커지고 있습니다. 이 기능은 uniapp에도 있습니다. 이번 글에서는 유니앱에서 외부페이지로 이동하는 방법을 소개하겠습니다.

1.uniapp에서 외부 페이지로 이동하는 API

uniapp에서는 uni.navigateTo() 함수를 사용하여 새 페이지를 엽니다. uniapp의 페이지나 외부 페이지로 이동할 수 있습니다. URL이라는 하나의 매개변수를 허용합니다.

URL은 http, https, ftp, tel, sms, mailto 및 기타 프로토콜로 시작하는 문자열입니다. URL이 http 또는 https로 시작하면 브라우저가 직접 열리고 해당 주소로 이동됩니다.

2. 외부 페이지로 이동 구현

실제 개발에서는 버튼 클릭 후 외부 페이지로 이동하는 기능을 구현해야 합니다.

먼저 uniapp 프로젝트의 페이지 폴더 아래에 외부 페이지라는 새 페이지를 만듭니다. 외부 페이지의 vue 파일에 다음 코드를 추가합니다.

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

여기서 페이지 마운트 후크에 2초 지연을 설정한 다음 jump() 메서드를 호출합니다. jump() 메소드에서 uni.navigateTo() 함수를 사용하여 외부 URL https://www.baidu.com으로 점프합니다. 이런 식으로 점프 버튼만 클릭하면 외부 페이지가 열리는 것을 볼 수 있습니다.

다음으로 유니앱 프로젝트 진입 페이지에 외부 페이지로 이동하는 버튼을 추가해주세요. 항목 페이지의 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() 함수가 사용됩니다. 외부 페이지로 이동합니다.

3. 요약

유니앱에서 외부페이지로 이동하는 방법은 매우 간단합니다. uni.navigateTo() 함수를 사용하고 외부 페이지의 URL 주소를 전달하여 점프를 달성하세요. 하지만 다른 미니 프로그램 페이지로 이동해야 한다면 uni.navigateToMiniProgram() 함수를 사용해야 한다는 점에 유의해야 합니다. 이 글의 소개를 통해 여러분은 이미 외부 페이지로 이동하는 방법을 잘 익힐 수 있을 것이라 믿습니다.

위 내용은 유니앱에서 외부페이지로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!