UniApp 跳转外链的实现详解

UniApp 是一个基于 Vue.js 的跨平台开发框架，可以方便地开发多个平台的应用程序，包括小程序、H5、App 等。在 UniApp 中，要实现跳转到外部链接（即打开一个网页）可以采用以下步骤：

1. 创建目标页面

首先，我们需要创建一个目标页面，用于加载外部链接。

在 pages 目录下创建一个新的文件夹，例如 webview，然后在该文件夹下创建一个 webview.vue 文件。

<template>
  <view class="container">
    <web-view :src="externalUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      externalUrl: ''
    };
  },
  onLoad() {
    this.externalUrl = this.$route.query.url;
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
</style>

在上述代码中，我们使用了 <web-view> 组件来显示外部链接。externalUrl 是从路由参数中获取的外部链接，作为 src 属性传递给 <web-view> 组件。

2. 配置路由

接下来，我们需要在 router/index.js 文件中配置路由，以便能够访问到目标页面。

import Vue from 'vue';
import Router from 'uni-simple-router';

Vue.use(Router);

const router = new Router({
  routes: [
    // 其他页面路由配置...
    {
      path: '/pages/webview/webview',
      name: 'webview'
    }
  ]
});

export default router;

在上述代码中，我们添加了一个名为 webview 的路由项，指向目标页面的路径 /pages/webview/webview。

3. 触发跳转

最后，在需要触发跳转到外链的地方，我们可以使用 uni.navigateTo 或 uni.redirectTo 方法进行页面跳转。

// 在某个页面的方法中触发跳转外链
uni.navigateTo({
  url: '/pages/webview/webview?url=https://www.example.com'
});

在上述代码中，我们使用 uni.navigateTo 方法指定了要跳转到的目标页面路径 /pages/webview/webview，并通过添加 url 参数将外部链接传递给目标页面。

现在，当点击触发跳转的按钮时，就会打开指定的外部链接页面。

这样，我们就实现了在 UniApp 中跳转外部链接的功能。请根据自己的项目结构和需求进行相应调整和优化。

参考链接：

• UniApp 官方文档
• UniApp 路由管理
• UniApp 组件 - web-view