快捷導航

在UniApp中實現(xiàn)App與H5頁面的跳轉(zhuǎn)及通信的代碼示例

更新時間：2025年04月29日 08:54:15 作者：哎喲喂_!

在移動應用開發(fā)中,內(nèi)嵌 H5 頁面或與外部網(wǎng)頁交互是常見需求,UniApp 作為跨平臺框架,提供了靈活的方式實現(xiàn) App 與 H5 的跳轉(zhuǎn)和雙向通信,本文將詳細講解實現(xiàn)方法,并提供可直接復用的代碼示例,需要的朋友可以參考下

一、 App 內(nèi)嵌 H5 頁面（使用 web-view 組件）

1.核心場景

在 App 內(nèi)直接顯示第三方活動頁、幫助文檔等。
保持應用內(nèi)導航體驗，避免跳轉(zhuǎn)外部瀏覽器。

2.實現(xiàn)步驟

（1）創(chuàng)建 web-view 頁面

在 UniApp 項目中新建頁面 pages/webview/webview.vue

<template>
	<view class="webview-container">
		// 全屏加載H5頁面
		<web-view
			id="my-webview"
			:src="h5Url"
			@message="handleH5Message"
		></web-view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const h5Url = ref('');

onLoad((options) => {
	// 接收跳轉(zhuǎn)時傳遞的 URL 參數(shù)
	if(options.url){
		h5Url.value = decodeURIComponent(options.url);
		uni.setNavigationBarTitle({ title: options.title || '加載中...'});
	} else{
		uni.showToast({ title: '頁面參數(shù)錯誤', icon: 'none' });
		setTimeout(() => uni.navigateBack(), 1500);
	}
});

// 接收 H5 頁面發(fā)送的消息
const handleH5Message = (e) => {
	console.log('收到 H5 消息：', e.detail.data);
	// 示例：根據(jù)消息關(guān)閉頁面
	if(e.detail.data.action === 'close') {
		uni.navigateBack();
	}
}
</script>

（2）跳轉(zhuǎn)到 H5 頁面

在需要跳轉(zhuǎn)的地方調(diào)用：

// 示例：在按鈕點擊事件中跳轉(zhuǎn)
const openH5Page = () => {
	const targetUrl = 'https://www.example.com/h5-page';
	uni.navigateTo({
		url: `/pages/webview/webview?url=${encodeURIComponent(targetUrl)}&title=活動頁`
	})
}

二、 App 跳轉(zhuǎn)外部瀏覽器打開 H5

1.核心場景

用戶協(xié)議、隱私政策等需脫離應用環(huán)境的頁面
調(diào)用第三方支付、地圖等外部服務(wù)

2.實現(xiàn)代碼

const openExternalBrowser = (url) => {
	// 判斷平臺：App 端使用 plus.runtime, H5 端使用 window.open
	const platform = uni.getSystemInfoSync().platform
	if(platform === 'android' || platform === 'ios'){
		plus.runtime.openURL(url);
	} else {
		window.open(url, '_blank');
	}
}

// 調(diào)用示例
openExternalBrowser('https://www.example.com/external-page');

三、App 與 H5 的雙向通信

1. H5 向 App 發(fā)送消息

（1）H5 頁面代碼

在 H5 頁面中，通過 uni-postMessage 發(fā)送消息：

<!DOCTYPE html>
<html>
<body>
	<button onclick="sendMessageToApp()"> 發(fā)送消息給 APP</button>
	<script>
		function sendMessageToApp() {
			// 發(fā)送消息給 UniApp
			uni.postMessage({
				data: {
					action: 'close',
					message: '用戶點擊了關(guān)閉按鈕'
				}
			})
		}
	</script>
</body>
</html>

（2）UniApp 接收消息

在 web-view 組件中監(jiān)聽 @message 事件：

<web-view
	:src="h5Url"
	@message="handleH5Message"
></web-view>

2. App 向 H5 發(fā)送消息

（1）UniApp 調(diào)用 H5 方法

通過 evalJS 執(zhí)行 H5 頁面的代碼

// 獲取 web-view 上下文（需指定 web-view 的 id）
const webViewContext = uni.createWebViewContext(my-webview);

// 調(diào)用 H5 頁面中的函數(shù)
const sendMessageToH5 = () => {
	webViewContext.evalJS(handleAppMessage('Hello from App!'))
}

（2）H5 頁面接收消息

在 H5 頁面中定義全局函數(shù)：

<script>
	// 供 App 調(diào)用的函數(shù)
	function handleAppMessage(msg){
		alert('收到 APP 消息：' + msg)
	}
</script>

四、注意事項和常見問題

1.跨域問題（H5端）

問題：H5 頁面與 UniApp 服務(wù)域名不同時，可能觸發(fā)跨域限制。
解決方案：
- 1.配置 H5 服務(wù)端支持 CORS
- 2.本地開發(fā)時，在 manifest.json 中設(shè)置代理

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://api.example.com",
          "changeOrigin": true
        }
      }
    }
  }
}

2.微信小程序特殊處理

配置域名白名單：在微信公眾平臺設(shè)置 request 合法域名和 web-view 業(yè)務(wù)域名
強制 HTTPS：所有 H5 鏈接必須使用 HTTPS

3.頁面返回邏輯

處理 Android 返回鍵和導航欄返回按鈕

// 監(jiān)聽 Android 返回鍵
uni.onBackPress(() => {
	uni.showModel({
		title: '提示',
		content: '確定要離開當前頁面嗎？',
		success: (res) => {
			if(res.confirm){
				uni.navigateBack();
			}
		}
	});
	return true; // 阻止默認返回行為
})

五、完整代碼示例

1. UniApp 項目結(jié)構(gòu)

src/
  ├── pages/
  │   └── webview/
  │       └── webview.vue   # web-view 容器頁面
  └── utils/
      └── bridge.js         # 封裝通信工具

2.通信工具封裝（bridge.js）

// 封裝通信方法
export const H5Bridge = {
	// 發(fā)送消息到 H5
	sendToH5: (message) => {
		const webViewContext = uni.createWebViewContext('h5-container');
		webViewContext.evalJS(`handleAppMessage(${JSON.stringify(message)})`)
	},
	// 接收 H5 消息
	onH5Message: (callback) => {
		uni.$on('h5-message', callback);
	}	
}

六、總結(jié)

通過 web-view 組件和 uni.postMessage/evalJS, UniApp 實現(xiàn)了 App 與 H5 頁面的無縫跳轉(zhuǎn)和雙向通信。關(guān)鍵點總結(jié)：

內(nèi)嵌 H5：保持應用內(nèi)體驗，適合常規(guī)內(nèi)容展示
外部跳轉(zhuǎn)：適合需要調(diào)用系統(tǒng)能力的場景（如支付）。
通信機制：通過消息事件和 JS 執(zhí)行實現(xiàn)雙向交互

到此這篇關(guān)于在UniApp中實現(xiàn)App與H5頁面的跳轉(zhuǎn)及通信的代碼示例的文章就介紹到這了,更多相關(guān)UniApp App與H5頁面跳轉(zhuǎn)及通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: