在移动应用开发中，内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架，提供了灵活的方式实现 App 与 H5 的跳转 和双向通信。本文将详细讲解实现方法，并提供可直接复用的代码示例。
文章目录
- [一、 App 内嵌 H5 页面（使用 `web-view` 组件）](#一、 App 内嵌 H5 页面（使用
web-view组件）) - [二、 App 跳转外部浏览器打开 H5](#二、 App 跳转外部浏览器打开 H5)
- [三、App 与 H5 的双向通信](#三、App 与 H5 的双向通信)
- 四、注意事项和常见问题
- 五、完整代码示例
- 六、总结
一、 App 内嵌 H5 页面（使用 web-view 组件）
1.核心场景
- 在 App 内直接显示第三方活动页、帮助文档等。
- 保持应用内导航体验，避免跳转外部浏览器。
2.实现步骤
（1）创建 web-view 页面
在 UniApp 项目中新建页面 pages/webview/webview.vue
bash
<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 页面
在需要跳转的地方调用：
bash
// 示例：在按钮点击事件中跳转
const openH5Page = () => {
const targetUrl = 'https://www.example.com/h5-page';
uni.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(targetUrl)}&title=活动页`
})
}二、 App 跳转外部浏览器打开 H5
1.核心场景
- 用户协议、隐私政策等需脱离应用环境的页面
- 调用第三方支付、地图等外部服务
2.实现代码
bash
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 发送消息：
bash
<!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 事件：
bash
<web-view
:src="h5Url"
@message="handleH5Message"
></web-view>2. App 向 H5 发送消息
（1）UniApp 调用 H5 方法
通过 evalJS 执行 H5 页面的代码
bash
// 获取 web-view 上下文（需指定 web-view 的 id）
const webViewContext = uni.createWebViewContext(my-webview);
// 调用 H5 页面中的函数
const sendMessageToH5 = () => {
webViewContext.evalJS(handleAppMessage('Hello from App!'))
}（2）H5 页面接收消息
在 H5 页面中定义全局函数：
bash
<script>
// 供 App 调用的函数
function handleAppMessage(msg){
alert('收到 APP 消息：' + msg)
}
</script>四、注意事项和常见问题
1.跨域问题（H5端）
- 问题：H5 页面与 UniApp 服务域名不同时，可能触发跨域限制。
- 解决方案：
1.配置 H5 服务端支持 CORS
2.本地开发时，在 manifest.json 中设置代理
bash
{
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "https://api.example.com",
"changeOrigin": true
}
}
}
}
}2.微信小程序特殊处理
- 配置域名白名单：在微信公众平台设置 request 合法域名和 web-view 业务域名
- 强制 HTTPS：所有 H5 链接必须使用 HTTPS
3.页面返回逻辑
处理 Android 返回键和导航栏返回按钮
bash
// 监听 Android 返回键
uni.onBackPress(() => {
uni.showModel({
title: '提示',
content: '确定要离开当前页面吗？',
success: (res) => {
if(res.confirm){
uni.navigateBack();
}
}
});
return true; // 阻止默认返回行为
})五、完整代码示例
1. UniApp 项目结构
bash
src/
├── pages/
│ └── webview/
│ └── webview.vue # web-view 容器页面
└── utils/
└── bridge.js # 封装通信工具2.通信工具封装（bridge.js）
bash
// 封装通信方法
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 执行实现双向交互