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

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

<View
  className="course-name"
  style={{ color: "#1e90ff" }}
  onClick={() => {
    Taro.setClipboardData({
      data: course.link,
      success: () => {
        Taro.showToast({
          title: '链接已复制',
          icon: 'success',
          duration: 2000
        })
      }
    })
  }}
>
  {course.className}
</View>

这样用户点击课程名时，会复制到剪贴板，配合一个 Toast 提示，交互也很自然。

进阶：自动判断策略

在项目里，可以做一个「自动判断」：

• 如果 course.link 的域名在白名单里 → 走 WebView。
• 否则 → 自动复制。

简单写法：

const whiteList = ['example.com', 'study.company.com']

const openLink = (link: string) => {
  const domain = new URL(link).hostname

  if (whiteList.includes(domain)) {
    Taro.navigateTo({
      url: `/pages/webview/index?url=${encodeURIComponent(link)}`
    })
  } else {
    Taro.setClipboardData({
      data: link,
      success: () => {
        Taro.showToast({ title: '链接已复制', icon: 'success' })
      }
    })
  }
}

这样在不同环境下都能兜底，用户体验更统一。

踩坑记录

1. WebView 无法打开？ 90% 是域名没加到「业务域名」，或者 Https 证书有问题。
2. 链接里有特殊字符？ 记得用 encodeURIComponent / decodeURIComponent 做参数传递。
3. 公司内网地址打不开？ 必须用复制方案，WebView 没法解决。

总结

• 微信小程序里 不能直接跳转外部网页，只能走 <WebView />。
• 能加业务域名 → WebView 打开
• 不能加 → 复制链接兜底
• 最佳实践：写一个 统一的打开链接函数，自动选择策略。

这样既符合微信的限制，又能保证用户体验。