uniapp jump url absolute address

With the rapid development of mobile devices, more and more companies are beginning to pay attention to cross-platform development, and uniapp is one of the best. It not only enables fast and efficient cross-platform development, but also has many advantages such as global performance optimization, custom components and plug-ins, and multiple development modes. However, I believe that for many beginners, some basic problems in uniapp will also be confusing. For example, how to jump to an absolute url address? Below we will share how to deal with this problem in uniapp.

In uniapp, page jump is a very common requirement. We can first use uni.navigateTo or uni.redirectTo to achieve the jump. They all jump based on relative paths within the application. But what if we want to jump to an external url absolute address?

In fact, it is not difficult to jump to the absolute URL address in uniapp. Here we can use the a tag in the html tag to jump. The example is as follows:

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

The above code can jump to the Baidu website. The value of the href attribute in the example is the absolute URL address. However, if you want to jump to the absolute address of the URL in uniapp, you need to do some processing.

We can implement a simple jump function based on the above method. The following is a demo example:

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

Modify the homepage of uniapp and add a button. Click the button to jump to a webview page. In the webview page, we can use the uni.getQueryString method to obtain the absolute address of the URL in the request parameter, and embed an iframe tag in the page to display the target web page.

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

Finally, configure the page path in uniapp's mainfest.json as follows:

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

When we click the button on the homepage, uniapp will pop up a confirmation box first. After confirmation, it will jump To the webview page, in the webview page, we can successfully display the content of the target page.

The above is a method to implement jump url absolute address in uniapp. This requirement is achieved by combining html tags and uniapp page jump. I believe this example can solve this problem for beginners and also bring convenience to our daily development.

The above is the detailed content of uniapp jump url absolute address. For more information, please follow other related articles on the PHP Chinese website!