前言

在做小程序開發(fā)的過程中，我們經(jīng)常會遇到這樣一個需求： ?? 用戶在小程序里點開一個課程/資料，需要跳轉(zhuǎn)到公司內(nèi)部的學習系統(tǒng)或者外部網(wǎng)站。

問題來了：

• 小程序禁止直接用 <a> 標簽跳轉(zhuǎn)外部網(wǎng)頁

• 也不能像瀏覽器里那樣用 window.open

• 那么，怎么實現(xiàn)呢？

這篇文章我會結(jié)合實際項目，聊聊 兩種常見方案：

1. 業(yè)務域名 + WebView 打開外部鏈接

2. 不在業(yè)務域名里的 → 自動復制鏈接

背景：小程序的安全限制

微信對小程序的外部鏈接有嚴格限制：

• 只能通過 <WebView /> 組件來加載 H5 頁面。

• 這個 H5 的域名，必須提前在 小程序后臺 → 開發(fā)設置 → 業(yè)務域名 配置。

• 沒配置的域名，一律打不開。

所以，解決問題的第一步就是搞清楚： ?? 目標鏈接的域名是否可控、能否添加到業(yè)務域名里。

方案一：業(yè)務域名 + WebView

如果域名可控，那就很簡單：

（1）后臺配置業(yè)務域名

在 微信公眾平臺 → 開發(fā) → 開發(fā)管理 → 開發(fā)設置 里，把外部系統(tǒng)的域名加到「業(yè)務域名」里。

（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   // 從路由參數(shù)里取出外部鏈接
?
  return (
    <WebView src={decodeURIComponent(url || '')} />
  )
}

（3）點擊跳轉(zhuǎn)時傳遞外部鏈接

在業(yè)務頁面中，比如課程列表：

Taro.navigateTo({
  url: `/pages/webview/index?url=${encodeURIComponent(course.link)}`
})

這樣就能在小程序里「無縫」打開外部網(wǎng)頁，用戶體驗和原生瀏覽器幾乎一樣。

方案二：域名不可控 → 自動復制鏈接

有些情況，外部系統(tǒng)的域名是公司內(nèi)網(wǎng)的，根本沒法加到微信后臺的「業(yè)務域名」里。 這時 WebView 打不開，只能換個思路：

?? 點擊課程 → 直接復制鏈接 → 提示用戶去內(nèi)網(wǎng)環(huán)境手動打開。

實現(xiàn)也很簡單，用 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' })
      }
    })
  }
}

這樣在不同環(huán)境下都能兜底，用戶體驗更統(tǒng)一。

踩坑記錄

1. WebView 無法打開？ ?? 90% 是域名沒加到「業(yè)務域名」，或者 Https 證書有問題。

2. 鏈接里有特殊字符？ ?? 記得用 encodeURIComponent / decodeURIComponent 做參數(shù)傳遞。

3. 公司內(nèi)網(wǎng)地址打不開？ ?? 必須用復制方案，WebView 沒法解決。

總結(jié)

• 微信小程序里 不能直接跳轉(zhuǎn)外部網(wǎng)頁，只能走 <WebView />。

• 能加業(yè)務域名 → WebView 打開

• 不能加 → 復制鏈接兜底

• 最佳實踐：寫一個 統(tǒng)一的打開鏈接函數(shù)，自動選擇策略。

這樣既符合微信的限制，又能保證用戶體驗。

??‍?? 以上就是我在實際項目中踩坑總結(jié)的「小程序跳轉(zhuǎn)外部鏈接」兩種思路，希望能幫到你！ 如果你也在做類似需求，歡迎留言交流～

到此這篇關(guān)于微信小程序如何優(yōu)雅地跳轉(zhuǎn)外部鏈接的文章就介紹到這了,更多相關(guān)微信小程序跳轉(zhuǎn)外部鏈接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！