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

uniapp webview嵌入外部h5网页后的消息通知

news 2026/2/10 14:03:13

最近开发了个oa系统，pc端的表单使用form-create开发，form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发，但是因为form-create移动端只支持vant，不支持uniapp。官方的说法是移动端用vant开发后通过webview的方式嵌入到uniapp。

uniapp嵌入开发好的h5页面没有问题，但是h5页面需要保存表单数据和发起工作流，做完这个操作后需要告知uniapp关闭webview页面，并跳转uniapp相应页面。

（1）uniapp 的webview.vue页面：

<template><view><web-view :src="fileUrl" @message="handlerMessage"></web-view></view>
</template><script>export default {data() {return {fileUrl: "",}},onLoad(options) {this.fileUrl = decodeURIComponent(options.fileUrl)},methods: {handlerMessage(event) {console.log('Received message:', event.detail.data);}}}
</script><style></style>

webview页面使用message方法监听h5发送给uniapp应用的消息。

（2）h5推送消息至uniapp

我的h5页面基于vue3+vant4+vite开发。

1.首先在public目录下新建static目录，接着创建js目录。下载jweixin-1.4.0.js和uni.webview.1.5.6.js文件到本地，引入到js目录下。

2.在项目index.html中写入如下内容：

<!DOCTYPE html>
<html lang="">
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流程表单</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="text/javascript" src="/static/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="/static/js/uni.webview.1.5.6.js"></script>
<script>document.addEventListener('UniAppJSBridgeReady', function () {uni.getEnv(function (res) {if (res.plus) {console.log('当前环境为【5+App】');} else if (res.miniprogram) {console.log('当前环境为【微信小程序】');} else if (res.h5) {console.log('当前环境为h5');}});});
</script>
</body>
</html>

3.在h5页面，保存按钮点击时调用下面的方法。

//提交
async function onSubmit(formData) {let params = {procdefKey: processDefKey,formData: JSON.stringify(formData)};try {loading.value = trueawait apiSaveFormStartProcess(params);uni.postMessage({data: {action: 'startProcessCompleted'}});showSuccessToast('流程发起成功');uni.navigateBack({delta: 1});} finally {loading.value = false}
}

uni.postMessage推送消息到uniapp应用。由于message在后退、组件销毁、分享才会接受到消息。所以在提交完后，调用 uni.navigateBack触发后退。此时webview的message方法就能接受到消息了。

（3）效果

uniapp webview嵌入外部h5网页后的消息通知

相关文章：

uniapp webview嵌入外部h5网页后的消息通知

macos安装jmeter测试软件

【virtiofs】ubuntu24.04+qemu7.0调试virtiofs

DeepSeek 和 ChatGPT 在特定任务中的表现：逻辑推理与创意生成

MoE硬件部署

MYSQL中的性能调优方法

Day48（补）【AI思考】-设计模式三大类型统一区分与记忆指南

公牛充电桩协议对接单车汽车平台交互协议外发版

大语言模型内容安全的方式有哪些

【ISO 14229-1:2023 UDS诊断（ECU复位0x11服务）测试用例CAPL代码全解析⑩】

Android WindowContainer窗口结构

从零到一实现微信小程序计划时钟：完整教程

moveable 一个可实现前端海报编辑器的 js 库

wangEditor 编辑器 Vue 2.0 + Nodejs 配置

DeepSeek R1生成图片总结2（虽然本身是不能直接生成图片，但是可以想办法利用别的工具一起实现）

x86平台基于Qt+opengl优化ffmpeg软解码1080P视频渲染效率

机器学习入门-读书摘要

前端【技术方案】重构项目

大语言模型简史：从Transformer（2017）到DeepSeek-R1（2025）的进化之路

RabbitMQ服务异步通信

Java 8 Stream API 入门到实践详解

Spring AI与Spring Modulith核心技术解析

优选算法第十二讲：队列 + 宽搜优先级队列

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

Mysql中select查询语句的执行过程

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

计算机基础知识解析：从应用到架构的全面拆解