uni-app跳转外部链接方式汇总--超全

一、简介

在开发移动端应用程序（APP）的过程中，我们经常需要展示来自外部HTTP/HTTPS链接的页面内容。这些外部页面可能包含用户协议、新闻资讯、产品详情等信息，对于提升用户体验和增强应用功能至关重要。然而，与在Web环境中通过window.open或内嵌iframe轻松展示外部链接不同，APP端面临着更多的技术挑战和更好的交互体验限制。

接下来介绍常用的几种外部链接打开方式。

二、打开方式

1.plus.runtime.openWeb

1.1 是什么

plus.runtime.openWeb 是一个在HTML5+规范中定义的API，它允许在移动应用（如使用HTML5+开发的Hybrid应用）中打开一个新的Web页面。这个API通常是由DCloud公司的5+ App（HBuilderX的配套运行环境）或类似框架提供的，用于在原生应用环境中嵌入和展示Web内容。

1.2 怎么用

plus.runtime.openWeb("url地址");

2.plus.runtime.openURL

2.1 是什么

plus.runtime.openURL 是HTML5+ API中的一个方法，它允许在移动应用中打开指定的URL地址。这个方法通常用于在Hybrid应用（如使用HBuilderX或DCloud公司的5+ App框架开发的应用）中，从应用内部打开外部链接，如网页或第三方应用的授权页面。

1.2 怎么用

plus.runtime.openURL("url地址");

1.3 openURL和openWeb的区别

plus.runtime.openURL 和plus.runtime.openWeb 均可实现跳转APP跳转外部链接的功能。两者的主要区别见下表：

|---------|---------------------------------------------|--------------------------------------------|
| | plus.runtime.openWeb | plus.runtime.openURL |
| 1.打开方式 | 在应用内部打开一个新的Web页面 | 调用系统默认的浏览器打开URL |
| 2.自定义程度 | 更多的自定义选项，如设置窗口标题、大小、位置等 | 自定义程度相对较低，因为它主要依赖于系统浏览器的默认行为 |
| 3.使用场景 | 更适合于需要在应用内部展示网页内容的场景，如应用内的文档、用户指南或嵌入式网页广告等。 | 更适合于需要跳转到外部网页或第三方应用的场景，如打开支付页面或跳转到其他相关网站等。 |
| 4.安全性 | 安全性较低，需注意防止跨站脚本攻击和跨站请求伪造等。 | 安全性较高，仍需确保URL的合法性和安全性。 |

1.4 openURL和openWeb的实现效果

3.web-view组件

3.1.简要介绍

web-view组件是一个在小程序中用于嵌入网页的容器，它允许开发者在小程序内展示外部网页内容，从而丰富小程序的功能，并为用户提供更加多样化的浏览体验。

3.2.使用步骤

（1）在代码目录pages下面建立文件夹webview，并新增webview.vue文件，webview.vue中为使用web-view跳转外部链接的方法。

<template>
  <view>
    <web-view :src="extraUrl"></web-view>
  </view>
</template>
 
<script setup>
import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

const extraUrl = ref('')

onLoad((val) => {
  extraUrl.value = val.url
})
</script>

（2）在路由文件pages.json中添加webview的路由。

// 外部链接跳转
		{
			"path": "pages/webview/webview",
			"style": {
			  "navigationStyle": "custom",
			  "app-plus": {
				"bounce": "none" // 将回弹属性关掉
			  }
			}
		}

（3）在需要跳转外部链接的页面中使用，配合uni.navigateTo实现外部链接的成功跳转。

// 点击跳转到外部
	const toPath = (path) => {
		uni.navigateTo({
		   url: `/pages/webview/webview?url=${path}`,
		});
	};

3.3 注意事项

需要说明的是：

（1）使用微信小程序或APP均可使用该方式，该方式是在应用内容打开外部链接；

（2）建议优先使用HTTPS协议，并避免在链接中带有中文字符（在iOS中可能会有打开白屏的问题）。

4.uni-link跳转

4.1简要介绍

uni-link是uni-app的一个外部网页超链接组件，通过在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页，以实现打开外部链接的方式。

4.2使用方式

<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link>

4.3api参数说明

5.uview-plus跳转外部链接

5.1简要介绍

uview-plus是uni-app生态专用的UI框架，在uview-plus中通常使用up-link的方式进行外部链接的跳转实现，在APP中通常是打开系统默认浏览器的方式打开外部链接。

5.2 使用方式

<up-link href="https://uviewui.com/" text="打开uview-plus UI文档"></up-link>

5.3api参数说明

5.4 补充介绍

uview-plus中的up-text也可实现外部超链接的跳转，仅需设置mode="link"即可，但该种方式不支持字体颜色等样式修改，故不推荐使用。

<up-text mode="link" text="Go to uview-plus docs" href="https://www.uviewui.com" ></up-text>

三、补充说明

在uni-app中实现外部链接跳转时，方法多样，既可以选择在应用内直接打开以提升交互连贯性，也可以利用系统默认浏览器打开以享受更广泛的兼容性。具体选择哪种方式，应基于实际需求及为用户提供更佳体验的原则进行权衡。