在做小程序开发的过程中,我们经常会遇到这样一个需求:用户在小程序里点开一个课程或资料,需要跳转到公司内部的学习系统或者外部网站。
问题来了:
- 小程序禁止直接用
<a>标签跳转外部网页 - 也不能像浏览器里那样用
window.open - 那么,怎么实现呢?
这篇文章我会结合实际项目,聊聊两种常见方案:
- 业务域名 + WebView 打开外部链接
- 不在业务域名里的 → 自动复制链接
1️⃣ 背景:小程序的安全限制
微信对小程序的外部链接有严格限制:
- 只能通过
<WebView />组件来加载 H5 页面。 - 这个 H5 的域名,必须提前在 小程序后台 → 开发设置 → 业务域名 配置。
- 没配置的域名,一律打不开。
所以,解决问题的第一步就是搞清楚:目标链接的域名是否可控、能否添加到业务域名里。
2️⃣ 方案一:业务域名 + WebView
如果域名可控,那就很简单:
(1)后台配置业务域名
在微信公众平台 → 开发 → 开发管理 → 开发设置 里,把外部系统的域名加到「业务域名」里。
(2)封装一个 Webview 页面
新建一个 pages/webview/index.tsx 页面:
import { WebView } from '@tarojs/components'
import { useRouter } from '@tarojs/taro'
export default function WebviewPage() {
const router = useRouter()
const { url } = router.params
// 从路由参数里取出外部链接
return (
<WebView src={decodeURIComponent(url || '')} />
)
}
(3)点击跳转时传递外部链接
在业务页面中,比如课程列表:
Taro.navigateTo({
url: `/pages/webview/index?url=`
})

