uniapp ジャンプ URL 絶対アドレス

モバイル デバイスの急速な発展に伴い、ますます多くの企業がクロスプラットフォーム開発に注目し始めていますが、uniapp はその中でも最良の企業の 1 つです。迅速かつ効率的なクロスプラットフォーム開発が可能になるだけでなく、グローバルなパフォーマンスの最適化、カスタム コンポーネントとプラグイン、複数の開発モードなどの多くの利点もあります。ただし、多くの初心者にとって、uniapp のいくつかの基本的な問題も混乱すると思います。たとえば、絶対 URL アドレスにジャンプするにはどうすればよいでしょうか?以下では、uniapp でこの問題に対処する方法を共有します。

uniapp では、ページ ジャンプは非常に一般的な要件であり、まず uni.navigateTo または uni.redirectTo を使用してジャンプを実現します。これらはすべて、アプリケーション内の相対パスに基づいてジャンプします。しかし、外部 URL の絶対アドレスにジャンプしたい場合はどうすればよいでしょうか?

実際、uniapp で絶対 URL アドレスにジャンプすることは難しくありません。ここでは、html タグ内の a タグを使用してジャンプできます。例は次のとおりです:

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

上記のコードは、Baidu Web サイトにジャンプできます。例の 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 のホームページを変更してボタンを追加し、ボタンをクリックすると Web ビュー ページにジャンプします。 WebView ページでは、uni.getQueryString メソッドを使用してリクエスト パラメータ内の URL の絶対アドレスを取得し、ページに iframe タグを埋め込んで対象の Web ページを表示できます。

<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ページにジャンプします。WebViewページでは、目的のページのコンテンツを正常に表示できます。

上記はuniappにジャンプURLの絶対アドレスを実装する方法であり、htmlタグとuniappのページジャンプを組み合わせることでこの要件を実現します。この例は初心者にとってこの問題を解決し、日々の開発にも利便性をもたらすと信じています。

以上がuniapp ジャンプ URL 絶対アドレスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。