uni-app vue2/vue3
在 uni-app Vue2/Vue3 中，跳转外部链接（如 HTTP/HTTPS 网址）需要使用uni.navigateTo配合 web-view 组件，或直接使用uni.openUrl（H5 和 App 端）。以下是几种实现方式：
方法1：
1.创建中转页面（如pages/webview/index.vue）：
js
<template>
<view class="container">
<!-- url需要通过路由参数传递 -->
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(options) {
// 解码参数中的URL
this.url = decodeURIComponent(options.url || '')
}
}
</script>2.在需要跳转的地方调用：
js
// 跳转到web-view页面并传递外部URL
const externalUrl = 'https://example.com';
uni.navigateTo({
url: `/pages/webview/index?url=${encodeURIComponent(externalUrl)}`
});方法2
1.使用uni.openUrl（仅 H5 和 App 端）
js
// 直接打开外部链接（H5和App端）
const externalUrl = 'https://example.com';
uni.openUrl({
url: externalUrl,
success: () => {
console.log('打开成功');
},
fail: (err) => {
console.error('打开失败', err);
// 失败时可降级到web-view方案
uni.navigateTo({
url: `/pages/webview/index?url=${encodeURIComponent(externalUrl)}`
});
}
});注意事项
1.小程序限制：
- 微信小程序需要在小程序管理后台配置域名白名单
- 支付宝小程序需要在manifest.json中配置 web-view 域名
2.参数传递：
- URL 需要使用encodeURIComponent编码后传递，避免特殊字符导致解析错误
- 在 web-view 页面使用decodeURIComponent解码
3.返回处理：
- 使用 web-view 时，用户可通过导航栏返回按钮回到原页面
- App 端可监听web-view的message事件与外部页面通信