如何做招生网站怎样建立自己的网站平台
在移动应用开发中，内嵌 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 执行实现双向交互