uniapp 점프 URL 절대 주소

모바일 기기의 급속한 발전과 함께 점점 더 많은 회사들이 크로스 플랫폼 개발에 주목하기 시작했으며, uniapp은 그 중 최고입니다. 빠르고 효율적인 크로스 플랫폼 개발을 가능하게 할 뿐만 아니라 글로벌 성능 최적화, 사용자 정의 구성 요소 및 플러그인, 다중 개발 모드와 같은 많은 이점을 제공합니다. 하지만 많은 초보자들에게는 유니앱의 몇 가지 기본적인 문제들도 혼란스러울 것이라고 생각합니다. 예를 들어 절대 URL 주소로 이동하는 방법은 무엇입니까? 아래에서는 uniapp에서 이 문제를 해결하는 방법을 공유하겠습니다.

uniapp에서 페이지 점프는 매우 일반적인 요구 사항입니다. 먼저 uni.navigateTo 또는 uni.redirectTo를 사용하여 점프를 달성할 수 있습니다. 이들은 모두 애플리케이션 내의 상대 경로를 기반으로 점프합니다. 하지만 외부 URL 절대 주소로 이동하려면 어떻게 해야 할까요?

사실 유니앱에서 절대 URL 주소로 점프하는 것은 어렵지 않습니다. 여기서는 html 태그에 a 태그를 사용하여 점프할 수 있습니다.

<a href="https://www.baidu.com">去百度一下</a>

위 코드는 Baidu 웹사이트로 점프할 수 있습니다. 예제에서 href 속성의 값은 URL 절대 주소입니다. 하지만 uniapp에서 해당 URL의 절대 주소로 점프하려면 약간의 처리가 필요합니다.

위 방법을 기반으로 간단한 점프 기능을 구현할 수 있습니다. 데모 예시는 다음과 같습니다.

<template>
  <view class="container">
    <button class="btn" @click="jumpToBaidu">跳转到百度</button>
  </view>
</template>

<script>
export default {
  methods: {
    jumpToBaidu() {
      # 在新窗口中打开百度页面
      uni.showModal({
        title: '提示',
        content: '是否确认跳转到百度？',
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/webview?url=https://www.baidu.com'
            });
          }
        }
      });
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #01579b;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10px;
  text-align: center;
}
</style>

uniapp 홈페이지를 수정하고 버튼을 추가하면 웹뷰 페이지로 이동합니다. webview 페이지에서는 uni.getQueryString 메소드를 사용하여 요청 매개변수에 있는 URL의 절대 주소를 얻을 수 있고 페이지에 iframe 태그를 삽입하여 대상 웹 페이지를 표시할 수 있습니다.

<template>
  <view class="container">
    <iframe :src="url" class="iframe"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
    };
  },
  onLoad(query) {
    # 获取url参数
    this.url = decodeURIComponent(uni.getQueryString('url'));
  },
}
</script>

<style>
.container {
  height: 100vh;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.iframe {
  width: 100%;
  height: 100%;
}
</style>

마지막으로 uniapp의 mainfest.json에서 페이지 경로를 다음과 같이 구성합니다.

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uniapp跳转url"
      }
    },
    {
      "path": "pages/webview",
      "style": {
        "navigationBarTitleText": "webview"
      }
    }
  ]
}

홈페이지에서 버튼을 클릭하면 uniapp이 먼저 확인 상자를 띄우고 확인 후 웹뷰 페이지로 이동합니다. webview 페이지에서 대상 페이지의 콘텐츠를 성공적으로 표시할 수 있습니다.

위는 uniapp에서 점프 URL의 절대 주소를 구현하는 방법입니다. 이 요구 사항은 html 태그와 uniapp 페이지 점프를 결합하여 달성됩니다. 나는 이 예가 초보자의 문제를 해결하고 일상적인 개발에 편리함을 가져다 줄 수 있다고 믿습니다.

위 내용은 uniapp 점프 URL 절대 주소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!