在移動應用開發中，內嵌 H5 頁面或與外部網頁交互是常見需求。UniApp 作為跨平臺框架，提供了靈活的方式實現 App 與 H5 的跳轉和雙向通信。本文將詳細講解實現方法，并提供可直接復用的代碼示例。
文章目錄
- 一、 App 內嵌 H5 頁面（使用 `web-view` 組件）
- 二、 App 跳轉外部瀏覽器打開 H5
- 三、App 與 H5 的雙向通信
- 四、注意事項和常見問題
- 五、完整代碼示例
- 六、總結
一、 App 內嵌 H5 頁面（使用 web-view 組件）
1.核心場景
- 在 App 內直接顯示第三方活動頁、幫助文檔等。
- 保持應用內導航體驗，避免跳轉外部瀏覽器。
2.實現步驟
（1）創建 web-view 頁面
在 UniApp 項目中新建頁面 pages/webview/webview.vue
<template><view class="webview-container">// 全屏加載H5頁面<web-viewid="my-webview":src="h5Url"@message="handleH5Message"></web-view></view>
</template><script setup>
import { ref } from 'vue';const h5Url = ref('');onLoad((options) => {// 接收跳轉時傳遞的 URL 參數if(options.url){h5Url.value = decodeURIComponent(options.url);uni.setNavigationBarTitle({ title: options.title || '加載中...'});} else{uni.showToast({ title: '頁面參數錯誤', icon: 'none' });setTimeout(() => uni.navigateBack(), 1500);}
});// 接收 H5 頁面發送的消息
const handleH5Message = (e) => {console.log('收到 H5 消息：', e.detail.data);// 示例：根據消息關閉頁面if(e.detail.data.action === 'close') {uni.navigateBack();}
}
</script>
（2）跳轉到 H5 頁面
在需要跳轉的地方調用：
// 示例：在按鈕點擊事件中跳轉
const openH5Page = () => {const targetUrl = 'https://www.example.com/h5-page';uni.navigateTo({url: `/pages/webview/webview?url=${encodeURIComponent(targetUrl)}&title=活動頁`})
}
二、 App 跳轉外部瀏覽器打開 H5
1.核心場景
- 用戶協議、隱私政策等需脫離應用環境的頁面
- 調用第三方支付、地圖等外部服務
2.實現代碼
const openExternalBrowser = (url) => {// 判斷平臺：App 端使用 plus.runtime, H5 端使用 window.openconst platform = uni.getSystemInfoSync().platformif(platform === 'android' || platform === 'ios'){plus.runtime.openURL(url);} else {window.open(url, '_blank');}
}// 調用示例
openExternalBrowser('https://www.example.com/external-page');
三、App 與 H5 的雙向通信
1. H5 向 App 發送消息
（1）H5 頁面代碼
在 H5 頁面中，通過 uni-postMessage 發送消息：
<!DOCTYPE html>
<html>
<body><button onclick="sendMessageToApp()"> 發送消息給 APP</button><script>function sendMessageToApp() {// 發送消息給 UniAppuni.postMessage({data: {action: 'close',message: '用戶點擊了關閉按鈕'}})}</script>
</body>
</html>
（2）UniApp 接收消息
在 web-view 組件中監聽 @message 事件：
<web-view:src="h5Url"@message="handleH5Message"
></web-view>
2. App 向 H5 發送消息
（1）UniApp 調用 H5 方法
通過 evalJS 執行 H5 頁面的代碼
// 獲取 web-view 上下文（需指定 web-view 的 id）
const webViewContext = uni.createWebViewContext(my-webview);// 調用 H5 頁面中的函數
const sendMessageToH5 = () => {webViewContext.evalJS(handleAppMessage('Hello from App!'))
}
（2）H5 頁面接收消息
在 H5 頁面中定義全局函數：
<script>// 供 App 調用的函數function handleAppMessage(msg){alert('收到 APP 消息：' + msg)}
</script>
四、注意事項和常見問題
1.跨域問題（H5端）
- 問題：H5 頁面與 UniApp 服務域名不同時，可能觸發跨域限制。
- 解決方案：
1.配置 H5 服務端支持 CORS
2.本地開發時，在 manifest.json 中設置代理
{"h5": {"devServer": {"proxy": {"/api": {"target": "https://api.example.com","changeOrigin": true}}}}
}
2.微信小程序特殊處理
- 配置域名白名單：在微信公眾平臺設置 request 合法域名和 web-view 業務域名
- 強制 HTTPS：所有 H5 鏈接必須使用 HTTPS
3.頁面返回邏輯
處理 Android 返回鍵和導航欄返回按鈕
// 監聽 Android 返回鍵
uni.onBackPress(() => {uni.showModel({title: '提示',content: '確定要離開當前頁面嗎？',success: (res) => {if(res.confirm){uni.navigateBack();}}});return true; // 阻止默認返回行為
})
五、完整代碼示例
1. UniApp 項目結構
src/├── pages/│ └── webview/│ └── webview.vue # web-view 容器頁面└── utils/└── bridge.js # 封裝通信工具
2.通信工具封裝（bridge.js）
// 封裝通信方法
export const H5Bridge = {// 發送消息到 H5sendToH5: (message) => {const webViewContext = uni.createWebViewContext('h5-container');webViewContext.evalJS(`handleAppMessage(${JSON.stringify(message)})`)},// 接收 H5 消息onH5Message: (callback) => {uni.$on('h5-message', callback);}
}
六、總結
通過 web-view 組件和 uni.postMessage/evalJS, UniApp 實現了 App 與 H5 頁面的無縫跳轉和雙向通信。關鍵點總結：
- 內嵌 H5：保持應用內體驗，適合常規內容展示
- 外部跳轉：適合需要調用系統能力的場景（如支付）。
- 通信機制：通過消息事件和 JS 執行實現雙向交互
