adresse absolue de l'URL de saut Uniapp

Avec le développement rapide des appareils mobiles, de plus en plus d'entreprises commencent à s'intéresser au développement multiplateforme, et uniapp est l'un des meilleurs. Il permet non seulement un développement multiplateforme rapide et efficace, mais présente également de nombreux avantages tels que l'optimisation globale des performances, des composants et plug-ins personnalisés et de multiples modes de développement. Cependant, je pense que pour de nombreux débutants, certains problèmes fondamentaux d'uniapp seront également déroutants. Par exemple, comment accéder à une adresse URL absolue ? Voyons maintenant comment résoudre ce problème dans uniapp.

Dans uniapp, le saut de page est une exigence très courante. Nous pouvons d'abord utiliser uni.navigateTo ou uni.redirectTo pour réaliser le saut. Ils sautent tous en fonction de chemins relatifs au sein de l'application. Mais que se passe-t-il si nous voulons accéder à une adresse absolue d’URL externe ?

En fait, il n'est pas difficile d'accéder à l'adresse URL absolue dans uniapp. Ici, nous pouvons utiliser la balise a dans la balise html pour sauter. L'exemple est le suivant :

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

Le code ci-dessus peut accéder au site Web Baidu. La valeur de l'attribut href dans l'exemple est l'adresse absolue de l'url. Cependant, si vous souhaitez accéder à l'adresse absolue de l'URL dans uniapp, vous devez effectuer un certain traitement.

Nous pouvons implémenter une fonction de saut simple basée sur la méthode ci-dessus. Voici un exemple de démonstration :

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

Modifiez la page d'accueil d'uniapp et ajoutez un bouton. Cliquez sur le bouton pour accéder à une page Web. Dans la page Webview, nous pouvons utiliser la méthode uni.getQueryString pour obtenir l'adresse absolue de l'URL dans le paramètre de requête et intégrer une balise iframe dans la page pour afficher la page Web cible.

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

Enfin, configurez le chemin de la page dans le mainfest.json d'uniapp comme suit :

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

Lorsque nous cliquons sur le bouton de la page d'accueil, uniapp affichera d'abord une boîte de confirmation. Après confirmation, il passera à la page d'affichage Web. la page Webview, nous pouvons afficher avec succès le contenu de la page cible.

Ce qui précède est une méthode pour implémenter l'adresse absolue de l'URL de saut dans uniapp. Cette exigence est réalisée en combinant les balises html et le saut de page uniapp. Je pense que cet exemple peut résoudre ce problème pour les débutants et également apporter de la commodité à notre développement quotidien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!