在UniApp中实现App与H5页面的跳转及通信的代码示例

更新时间：2025年04月29日 08:54:15 作者：哎哟喂_!

在移动应用开发中,内嵌 H5 页面或与外部网页交互是常见需求,UniApp 作为跨平台框架,提供了灵活的方式实现 App 与 H5 的跳转和双向通信,本文将详细讲解实现方法,并提供可直接复用的代码示例,需要的朋友可以参考下

一、 App 内嵌 H5 页面（使用 web-view 组件）

1.核心场景

在 App 内直接显示第三方活动页、帮助文档等。
保持应用内导航体验，避免跳转外部浏览器。

2.实现步骤

（1）创建 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) => {
	// 接收跳转时传递的 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.open
	const platform = uni.getSystemInfoSync().platform
	if(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() {
			// 发送消息给 UniApp
			uni.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 = {
	// 发送消息到 H5
	sendToH5: (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 执行实现双向交互

到此这篇关于在UniApp中实现App与H5页面的跳转及通信的代码示例的文章就介绍到这了,更多相关UniApp App与H5页面跳转及通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决el-select数据量过大的3种方案
最近做完一个小的后台管理系统,快上线了,发现一个问题,有2个select的选项框线上的数据量是1w+,而测试环境都是几百的,所以导致页面直接卡住了,本文给大家总结了3种方法,需要的朋友可以参考下
2023-09-09
Vue中的Strorage本地化存储详解
这篇文章主要介绍了Vue中的Strorage本地化存储详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧
2019-04-04
vue结合vant实现联动效果
这篇文章主要为大家详细介绍了vue结合vant实现联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
在vue项目实现一个ctrl+f的搜索功能
刚刚接到领导通知，需要实现搜索功能，因为项目是vue的而且是手机端，对我来说有点小难度。经过小编的一番思索最终还是解决了，今天小编把实现过程分享到脚本之家平台，需要的朋友参考下
2020-02-02
Vue.js进阶知识点总结
给大家分享了关于Vue.js想成为高手的5个总要知识点，需要的朋友可以学习下。
2018-04-04
Vue3.0中的monorepo管理模式的实现
这篇文章主要介绍了Vue3.0中的monorepo管理模式的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Vue 框架之键盘事件、健值修饰符、双向数据绑定
这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
webpack4+express+mongodb+vue实现增删改查的示例
这篇文章主要介绍了webpack4+express+mongodb+vue 实现增删改查的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Echarts之图例legend基本配置方式
这篇文章主要介绍了Echarts只图例legend基本配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04