微信小程序跳转外部链接：WebView 与复制链接方案

背景：小程序的安全限制

微信对小程序的外部链接有严格限制：

• 只能通过 WebView 组件来加载 H5 页面。
• 这个 H5 的域名，必须提前在 微信公众平台 → 开发设置 → 业务域名 配置。
• 没配置的域名，一律打不开。

所以，解决问题的第一步就是搞清楚：目标链接的域名是否可控、能否添加到业务域名里。

方案一：业务域名 + 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=${encodeURIComponent(course.link)}`
})

这样就能在小程序里「无缝」打开外部网页，用户体验和原生浏览器几乎一样。

方案二：域名不可控 → 自动复制链接

有些情况，外部系统的域名是公司内网的，根本没法加到微信后台的「业务域名」里。这时 WebView 打不开，只能换个思路：

点击课程 → 直接复制链接 → 提示用户去内网环境手动打开。

实现也很简单，用 Taro 的 setClipboardData：

<View
  className=
  style={{ :  }}
  onClick={ {
    .({
      : course.,
      :  {
        .({
          : ,
          : ,
          : 
        })
      }
    })
  }}
>
  {course.}
</>