uniappwebview嵌入外部h5网页后的消息通知
- 互联网
- 2025-09-05 08:30:02
最近开发了个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 = true await 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）效果
uniappwebview嵌入外部h5网页后的消息通知由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“uniappwebview嵌入外部h5网页后的消息通知”
上一篇
申论对策建议类【2022江苏B卷第一题“如何开展网络直播”】
下一篇
pod控制器
