uniapp webview嵌入外部h5网页后的消息通知
最近开发了个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网页后的消息通知
最近开发了个oa系统,pc端的表单使用form-create开发,form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发,但是因为form-create移动端只支持vant,不支持uniapp。官…...
macos安装jmeter测试软件
java环境安装 a. 验证安装环境 java -version # 如果有版本信息,说明已安装 b. 安装jdk # 安装 Homebrew(如未安装) /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 安装 O…...
【virtiofs】ubuntu24.04+qemu7.0调试virtiofs
文章目录 编译qemu编译buildroot编译linux-6.8.1编译virtiofsd启动脚本qemu调试方法环境: win11 + vmware17 ubuntu24.04 buildroot git clone git://git.busybox.net/buildroot linux-6.8.1 https://mirrors.edge.kernel.org/pub/linux/kernel/v6.x/linux-6.8.1.tar.gz virti…...
DeepSeek 和 ChatGPT 在特定任务中的表现:逻辑推理与创意生成
🎁个人主页:我们的五年 🔍系列专栏:Linux网络编程 🌷追光的人,终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 Linux网络编程笔记: https://blog.cs…...
MoE硬件部署
文章目录 MoE硬件部署硬件需求**专家硬件映射:模块化计算单元****路由硬件加速:门控网络专用单元****内存与通信优化****能效控制策略****实例:假设部署Mixtral 8x7B到自研AI芯片** 资源分配硬件资源预分配(编译时)运行…...
MYSQL中的性能调优方法
MySQL性能调优是数据库管理的重要工作之一,目的是通过调整系统配置、优化查询语句、合理设计数据库架构等方法,提高数据库的响应速度和处理能力。以下是常见的MySQL性能调优方法,结合具体的案例进行说明。 1. 优化查询语句 查询语句是数据库…...
Day48(补)【AI思考】-设计模式三大类型统一区分与记忆指南
文章目录 设计模式三大类型统一区分与记忆指南**一、创建型模式(对象如何生?)****二、结构型模式(对象如何组?)****三、行为型模式(对象如何动?)****1. 行为型类模式&…...
公牛充电桩协议对接单车汽车平台交互协议外发版
充电设备与平台交互协议-外发版 V1.0.0.05 1 充电设备与平台交互协议 (外发版) 充电设备与平台交互协议-外发版 V1.0.0.05 2 版本 版本日期 修改人 版本说明 1.0.0.00 2022.05.05 研发部 外发初版 1.0.0.01 2022.08.26 研发部 0x32 增加鉴权参数 0x34 增…...
大语言模型内容安全的方式有哪些
大语言模型内容安全的方式有哪些 LLM(大语言模型)内容安全方式主要是通过技术手段对模型生成的内容进行检测、过滤和干预,以确保输出符合道德、法律和社会规范。以下是一些常见的方式方法及其原理和著名的应用案例: 基于规则的过滤 原理:制定一系列明确的规则和模式,例…...
【ISO 14229-1:2023 UDS诊断(ECU复位0x11服务)测试用例CAPL代码全解析⑩】
ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase10 作者:车端域控测试工程师 更新日期:2025年02月18日 关键词:UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-010测试用例 用例ID测试场景验证要点参考条款预期结果TC…...
Android WindowContainer窗口结构
Android窗口是根据显示屏幕来管理,每个显示屏幕的窗口层级分为37层,0-36层。每层可以放置多个窗口,上层窗口覆盖下面的。 要理解窗口的结构,需要学习下WindowContainer、RootWindowContainer、DisplayContent、TaskDisplayArea、T…...
从零到一实现微信小程序计划时钟:完整教程
在本教程中,我们将一起实现一个微信小程序——计划时钟。这个小程序的核心功能是帮助用户添加任务、设置任务的时间范围,并且能够删除和查看已添加的任务。通过以下步骤,我们将带你从零开始实现一个具有基本功能的微信小程序计划时钟。 项目…...
moveable 一个可实现前端海报编辑器的 js 库
目录 缘由-胡扯本文实验环境通用流程1.基础移动1.1 基础代码1.1.1 data-* 解释 1.2 操作元素创建1.3 css 修饰1.4 cdn 引入1.5 js 实现元素可移动1.6 图片拖拽2.缩放3.旋转4.裁剪 懒得改文案了,海报编辑器换方案了,如果后面用别的再更。 缘由-胡扯 导火…...
wangEditor 编辑器 Vue 2.0 + Nodejs 配置
资料 Vue2.0 版本的安装:https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置:https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 安装步骤 1.安装界面基础部分 <!-- 富文本编辑器…...
DeepSeek R1生成图片总结2(虽然本身是不能直接生成图片,但是可以想办法利用别的工具一起实现)
DeepSeek官网 目前阶段,DeepSeek R1是不能直接生成图片的,但可以通过优化文本后转换为SVG或HTML代码,再保存为图片。另外,Janus-Pro是DeepSeek的多模态模型,支持文生图,但需要本地部署或者使用第三方工具。…...
x86平台基于Qt+opengl优化ffmpeg软解码1080P视频渲染效率
一般的在arm嵌入式平台,大多数板子都要硬解码硬件渲染的框架,使用即可。 在x86下比较麻烦了。 优化的思路一共有以下几个方面, 1. 软解码变成硬解码 2. 将YUV转QImage的操作转移到GPU 3. QWidget渲染QImage变成opengGL渲染AVFrame 这三点…...
机器学习入门-读书摘要
先看了《深度学习入门:基于python的理论和实践》这本电子书,早上因为入迷还坐过站了。。 因为里面的反向传播和链式法则特别难懂,又网上搜了相关内容进行进一步理解,参考的以下文章(个人认为都讲的都非常好࿰…...
前端【技术方案】重构项目
1. 明确重构目标 优化性能 减少页面加载时间降低资源占用 提升代码可维护性 更规范的代码风格更清晰的代码结构更明确的模块设计 扩展功能 为项目添加新功能改进现有功能 2. 评估项目现状 审查代码 全面检查现有代码,找出代码中的问题,如代码冗余、耦合…...
大语言模型简史:从Transformer(2017)到DeepSeek-R1(2025)的进化之路
2025年初,中国推出了具有开创性且高性价比的「大型语言模型」(Large Language Model — LLM)DeepSeek-R1,引发了AI的巨大变革。本文回顾了LLM的发展历程,起点是2017年革命性的Transformer架构,该架构通过「…...
RabbitMQ服务异步通信
消息队列在使用过程中,面临着很多实际问题需要思考: 1. 消息可靠性 消息从发送,到消费者接收,会经理多个过程: 其中的每一步都可能导致消息丢失,常见的丢失原因包括: 发送时丢失: 生…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
