alamat mutlak url lompat uniapp

Dengan perkembangan pesat peranti mudah alih, semakin banyak syarikat memberi perhatian kepada pembangunan merentas platform, dan uniapp ialah salah satu yang terbaik. Ia bukan sahaja membolehkan pembangunan merentas platform yang pantas dan cekap, tetapi juga mempunyai banyak kelebihan seperti pengoptimuman prestasi global, komponen tersuai dan pemalam, dan berbilang mod pembangunan. Walau bagaimanapun, saya percaya bahawa untuk ramai pemula, beberapa masalah asas dalam uniapp juga akan mengelirukan. Sebagai contoh, bagaimana untuk melompat ke alamat url mutlak? Sekarang mari kita kongsikan cara menangani masalah ini dalam uniapp.

Dalam uniapp, lompatan halaman adalah keperluan yang sangat biasa. Kita boleh menggunakan uni.navigateTo atau uni.redirectTo untuk mencapai lompatan. Mereka semua melompat berdasarkan laluan relatif dalam aplikasi. Tetapi bagaimana jika kita mahu melompat ke alamat mutlak url luaran?

Malah, tidak sukar untuk melompat ke alamat URL mutlak dalam uniapp. Di sini kita boleh menggunakan teg dalam teg html untuk melompat Contohnya adalah seperti berikut:

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

Kod di atas boleh melompat ke tapak web Baidu Nilai atribut href dalam contoh ialah URL mutlak alamat. Walau bagaimanapun, jika anda ingin melompat ke alamat mutlak URL dalam uniapp, anda perlu melakukan beberapa pemprosesan.

Kita boleh melaksanakan fungsi lompat mudah berdasarkan kaedah di atas. Berikut ialah contoh tunjuk cara:

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

Ubah suai halaman utama uniapp dan tambah butang Klik butang untuk melompat ke halaman paparan web. Dalam halaman webview, kita boleh menggunakan kaedah uni.getQueryString untuk mendapatkan alamat URL mutlak dalam parameter permintaan dan membenamkan teg iframe dalam halaman untuk memaparkan halaman web sasaran.

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

Akhir sekali, konfigurasikan laluan halaman dalam uniapp's mainfest.json seperti berikut:

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

Apabila kami mengklik butang pada halaman utama, uniapp akan memaparkan kotak pengesahan terlebih dahulu akan melompat Ke halaman webview, dalam halaman webview, kita boleh berjaya memaparkan kandungan halaman sasaran.

Di atas ialah kaedah untuk melaksanakan alamat mutlak url lompat dalam uniapp Keperluan ini dicapai dengan menggabungkan teg html dan lompatan halaman uniapp. Saya percaya contoh ini boleh menyelesaikan masalah ini untuk pemula dan juga membawa kemudahan kepada perkembangan harian kita.

Atas ialah kandungan terperinci alamat mutlak url lompat uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!