uniapp은 http로 직접 점프합니다.

uniapp은 Vue.js와 WeChat 애플릿 개발 프레임워크를 통합하는 다중 터미널 개발 프레임워크입니다. 이를 통해 Vue.js 구문을 사용하여 코드를 작성하고 여러 플랫폼에서 실행할 수 있습니다. uniapp에서 http링크를 직접 점프하는 방법은 매우 간단합니다. 아래에서 자세히 살펴보겠습니다.

1. 유니앱이란?

전문 멀티 터미널 개발 프레임워크인 uniapp은 Android 및 iOS 애플리케이션을 별도로 개발할 때 발생하는 모든 문제를 해결합니다. 대신, 개발자는 애플리케이션을 작성하고 동시에 여러 플랫폼에서 실행할 수 있습니다. 동시에 uniapp의 코드는 서로 다른 플랫폼 간에 공유될 수도 있으므로 개발 프로세스가 더 쉽고 빨라집니다.

2. uniapp에서 http로 직접 이동하는 방법

uniapp에서 http 링크로 직접 이동하려면 현재 웹 보기 구성 요소를 가져와서 웹에 내장된 NavigateTo 메서드를 사용해야 합니다. 보기 구성 요소 점프.

템플릿에 버튼을 정의하여 점프 작업을 실행할 수 있습니다.

<template>
  <div>
    <button @click="jumpToUrl">跳转到百度</button>
  </div>
</template>

그런 다음 스크립트에서 지정된 http 링크로 이동하는 jumpToUrl 함수를 정의해야 합니다.

<script>
  export default {
    data () {
      return {
        url: 'https://www.baidu.com'
      }
    },
    methods: {
      jumpToUrl () {
        uni.navigateTo({
          url: '/pages/webview/webview?url=' + encodeURIComponent(this.url)
        })
      }
    }
  }
</script>

위 코드에서는 먼저 이동할 링크를 저장하기 위해 url 변수를 정의합니다. 그런 다음 jumpToUrl 함수에서 uni.navigateTo 메서드를 사용하여 점프하고, 점프할 링크를 webview 구성 요소에 매개 변수로 전달합니다.

3. 웹 보기 구성 요소 구현

위 코드에서는 웹 보기 구성 요소를 사용하여 http 링크로 이동합니다. 따라서 페이지 디렉토리에 새로운 webview 폴더를 생성하고 이 컴포넌트를 구현하기 위한 webview.vue 파일을 생성해야 합니다.

<template>
  <div class="webview">
    <web-view :src="url" :title="title" @message="receiveMessage" />
  </div>
</template>

<script>
  export default {
    data () {
      return {
        url: '',
        title: ''
      }
    },
    onLoad (options) {
      this.url = decodeURIComponent(options.url)
      this.title = options.title || ''
    },
    methods: {
      receiveMessage (e) {
        console.log(e.detail)
      },
    }
  }
</script>

위 코드에서는 먼저 템플릿의 web-view 태그를 사용하여 webview 구성 요소를 표시합니다. 그런 다음 스크립트에서 표시할 링크와 제목을 저장하는 데이터 개체를 정의합니다. 동시에 webview 구성요소로부터 메시지를 수신하기 위한 receiveMessage 메소드도 정의했습니다.

4. Summary

위의 작업을 통해 유니앱에서 http 링크를 직접 점프하는 방법을 성공적으로 구현했습니다. 먼저 템플릿에 점프 작업을 트리거하는 버튼을 정의합니다. 그런 다음 스크립트에서 점프 작업을 정의하고 uni.navigateTo를 통해 webview 구성 요소로 점프합니다. 마지막으로 점프 링크를 표시하는 webview 구성 요소도 구현했습니다. 이런 방식으로 uniapp의 http 링크로 직접 이동할 수 있습니다.

위 내용은 uniapp은 http로 직접 점프합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!