uniapp跳转url绝对地址-uni-app-PHP中文网

uniapp跳转url绝对地址

王林

发布： 2023-05-22 10:20:36

原创

1728人浏览过

随着移动设备的飞速发展，越来越多的企业开始关注跨平台开发，而uniapp是其中的佼佼者。它不仅可以实现快速、高效的跨平台开发，还具有全局性能优化、自定义组件及插件、多种开发模式等诸多优势。但是，相信对于很多初学者来说，uniapp中一些基础问题也会让人困扰。比如，如何跳转一个url绝对地址？下面我们就来分享一下uniapp中处理这个问题的方法。

在uniapp中，跳转页面是十分常见的需求，我们首先可以使用uni.navigateTo或uni.redirectTo来实现跳转。它们都是基于应用内的相对路径进行跳转的。但如果我们要跳转到外部的url绝对地址，该怎么办呢？

其实，在uniapp中跳转url绝对地址也并不难。这里我们可以使用html标签中的a标签进行跳转，示例如下：

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

登录后复制

以上代码可跳转到百度网站，示例中的href属性的值即为url绝对地址。但是，如果希望在uniapp中跳转url绝对地址的话，需要做一些处理。

我们可以基于以上方法来实现一个简单的跳转功能。下面是一个demo示例：

<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页面。在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页面，在webview页面中，我们可以成功展示目标页面的内容。

以上是在uniapp中实现跳转url绝对地址的方法，通过结合html的标签和uniapp的页面跳转实现了这个需求。相信这个例子可以为初学者解决这个问题，也为我们日常的开发带来便利。

以上就是uniapp跳转url绝对地址的详细内容，更多请关注php中文网其它相关文章！