当前位置：首页 > news >正文

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

news 2025/4/28 6:30:39

在移动应用开发中，内嵌 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);}	
}