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

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

news 2026/4/29 21:24:32

    最近开发了个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系统&#xff0c;pc端的表单使用form-create开发&#xff0c;form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。移动端使用uniapp开发&#xff0c;但是因为form-create移动端只支持vant&#xff0c;不支持uniapp。官…...

编程日记 2025/2/19 23:09:36

macos安装jmeter测试软件

java环境安装 a. 验证安装环境 java -version # 如果有版本信息&#xff0c;说明已安装 b. 安装jdk # 安装 Homebrew&#xff08;如未安装&#xff09; /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 安装 O…...

编程日记 2025/2/19 23:08:34

【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…...

编程日记 2025/2/19 23:06:31

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

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux网络编程 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 ​ Linux网络编程笔记&#xff1a; https://blog.cs…...

编程日记 2025/2/19 23:05:30

MoE硬件部署

文章目录 MoE硬件部署硬件需求**专家硬件映射&#xff1a;模块化计算单元****路由硬件加速&#xff1a;门控网络专用单元****内存与通信优化****能效控制策略****实例&#xff1a;假设部署Mixtral 8x7B到自研AI芯片** 资源分配硬件资源预分配&#xff08;编译时&#xff09;运行…...

编程日记 2025/2/19 23:01:23

MYSQL中的性能调优方法

MySQL性能调优是数据库管理的重要工作之一&#xff0c;目的是通过调整系统配置、优化查询语句、合理设计数据库架构等方法&#xff0c;提高数据库的响应速度和处理能力。以下是常见的MySQL性能调优方法&#xff0c;结合具体的案例进行说明。 1. 优化查询语句 查询语句是数据库…...

编程日记 2025/2/19 23:00:21

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

文章目录 设计模式三大类型统一区分与记忆指南**一、创建型模式&#xff08;对象如何生&#xff1f;&#xff09;****二、结构型模式&#xff08;对象如何组&#xff1f;&#xff09;****三、行为型模式&#xff08;对象如何动&#xff1f;&#xff09;****1. 行为型类模式&…...

编程日记 2025/2/19 22:57:18

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

充电设备与平台交互协议-外发版 V1.0.0.05 1 充电设备与平台交互协议 &#xff08;外发版&#xff09; 充电设备与平台交互协议-外发版 V1.0.0.05 2 版本 版本日期 修改人 版本说明 1.0.0.00 2022.05.05 研发部 外发初版 1.0.0.01 2022.08.26 研发部 0x32 增加鉴权参数 0x34 增…...

编程日记 2025/2/19 22:53:08

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

大语言模型内容安全的方式有哪些 LLM（大语言模型）内容安全方式主要是通过技术手段对模型生成的内容进行检测、过滤和干预，以确保输出符合道德、法律和社会规范。以下是一些常见的方式方法及其原理和著名的应用案例： 基于规则的过滤 原理：制定一系列明确的规则和模式，例…...

编程日记 2025/2/19 22:47:00

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

ISO 14229-1:2023 UDS诊断【ECU复位0x11服务】_TestCase10 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月18日 关键词&#xff1a;UDS诊断协议、ECU复位服务、0x11服务、ISO 14229-1:2023 TC11-010测试用例 用例ID测试场景验证要点参考条款预期结果TC…...

编程日记 2025/2/19 22:42:55

Android WindowContainer窗口结构

Android窗口是根据显示屏幕来管理&#xff0c;每个显示屏幕的窗口层级分为37层&#xff0c;0-36层。每层可以放置多个窗口&#xff0c;上层窗口覆盖下面的。 要理解窗口的结构&#xff0c;需要学习下WindowContainer、RootWindowContainer、DisplayContent、TaskDisplayArea、T…...

编程日记 2025/2/19 22:37:45

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

在本教程中&#xff0c;我们将一起实现一个微信小程序——计划时钟。这个小程序的核心功能是帮助用户添加任务、设置任务的时间范围&#xff0c;并且能够删除和查看已添加的任务。通过以下步骤&#xff0c;我们将带你从零开始实现一个具有基本功能的微信小程序计划时钟。 项目…...

编程日记 2025/2/19 22:34:40

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.裁剪 懒得改文案了&#xff0c;海报编辑器换方案了&#xff0c;如果后面用别的再更。 缘由-胡扯 导火…...

编程日记 2025/2/19 22:32:38

wangEditor 编辑器 Vue 2.0 + Nodejs 配置

资料 Vue2.0 版本的安装&#xff1a;https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8上传图片配置&#xff1a;https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87 安装步骤 1.安装界面基础部分 <!-- 富文本编辑器…...

编程日记 2025/2/19 22:23:24

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

DeepSeek官网 目前阶段&#xff0c;DeepSeek R1是不能直接生成图片的&#xff0c;但可以通过优化文本后转换为SVG或HTML代码&#xff0c;再保存为图片。另外&#xff0c;Janus-Pro是DeepSeek的多模态模型&#xff0c;支持文生图&#xff0c;但需要本地部署或者使用第三方工具。…...

编程日记 2025/2/19 22:22:23

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

一般的在arm嵌入式平台&#xff0c;大多数板子都要硬解码硬件渲染的框架&#xff0c;使用即可。 在x86下比较麻烦了。 优化的思路一共有以下几个方面&#xff0c; 1. 软解码变成硬解码 2. 将YUV转QImage的操作转移到GPU 3. QWidget渲染QImage变成opengGL渲染AVFrame 这三点…...

编程日记 2025/2/19 22:21:22

机器学习入门-读书摘要

先看了《深度学习入门&#xff1a;基于python的理论和实践》这本电子书&#xff0c;早上因为入迷还坐过站了。。 因为里面的反向传播和链式法则特别难懂&#xff0c;又网上搜了相关内容进行进一步理解&#xff0c;参考的以下文章&#xff08;个人认为都讲的都非常好&#xff0…...

编程日记 2025/2/19 22:15:13

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

1. 明确重构目标 优化性能 减少页面加载时间降低资源占用 提升代码可维护性 更规范的代码风格更清晰的代码结构更明确的模块设计 扩展功能 为项目添加新功能改进现有功能 2. 评估项目现状 审查代码 全面检查现有代码&#xff0c;找出代码中的问题&#xff0c;如代码冗余、耦合…...

编程日记 2025/2/19 22:14:11

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

2025年初&#xff0c;中国推出了具有开创性且高性价比的「大型语言模型」&#xff08;Large Language Model — LLM&#xff09;DeepSeek-R1&#xff0c;引发了AI的巨大变革。本文回顾了LLM的发展历程&#xff0c;起点是2017年革命性的Transformer架构&#xff0c;该架构通过「…...

编程日记 2025/2/19 22:13:10

RabbitMQ服务异步通信

消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; 1. 消息可靠性 消息从发送&#xff0c;到消费者接收&#xff0c;会经理多个过程&#xff1a; 其中的每一步都可能导致消息丢失&#xff0c;常见的丢失原因包括&#xff1a; 发送时丢失&#xff1a; 生…...

编程日记 2025/2/19 22:09:04

会话管理与访问控制：OWASP Developer Guide企业级安全解决方案

会话管理与访问控制&#xff1a;OWASP Developer Guide企业级安全解决方案 【免费下载链接】DevGuide The OWASP Developer Guide 项目地址: https://gitcode.com/gh_mirrors/devguid/DevGuide OWASP Developer Guide提供了全面的企业级安全解决方案&#xff0c;其中会话…...

编程新知 2026/4/29 21:07:20

这个框架会过时吗——AI的天花板和你的判断力

前言 Kubernetes 本身并不复杂&#xff0c;是我们把它搞复杂的。无论是刻意为之还是那种虽然出于好意却将优雅的原语堆砌成 鲁布戈德堡机械 的狂热。平台最初提供的 ReplicaSets、Services、ConfigMaps&#xff0c;这些基础组件简单直接&#xff0c;甚至显得有些枯燥。但后来我…...

编程新知 2026/4/29 20:28:51

Rust Trait 泛型结合使用技巧

Rust语言以其安全性和高性能著称&#xff0c;而Trait与泛型的结合使用更是其强大特性的核心之一。Trait定义了类型的行为&#xff0c;泛型则允许代码复用&#xff0c;二者的巧妙结合能大幅提升代码的灵活性和可维护性。本文将深入探讨Rust中Trait与泛型结合使用的技巧&#xff…...

编程新知 2026/4/29 18:43:26

C++笔记 STL——set

在 C 的标准模板库&#xff08;STL&#xff09;中&#xff0c;set 是一个核心的关联式容器&#xff0c;它以自动排序和元素唯一性为核心特性&#xff0c;为开发者提供了高效的元素存储、查找与管理方案。不同于数组、vector 这类顺序容器&#xff0c;set 不关注元素的插入顺序&…...

编程新知 2026/4/29 18:35:13

AI生成PPT工具怎么选？豆包vs秒出全面对比

如果你生活遇到了不清楚的问题&#xff0c;你会先做什么&#xff1f;以前我们会先去搜索百度&#xff0c;而现在&#xff0c;我更倾向于直接询问AI&#xff0c;而我们的国名级AI就是豆包。那么&#xff0c;如果我们想要做一个PPT&#xff0c;豆包能不能帮我们完成呐&#xff1f…...

编程新知 2026/4/29 18:18:11

从数据盲区到战斗专家：GBFR Logs如何重塑你的《碧蓝幻想：Relink》游戏体验

从数据盲区到战斗专家&#xff1a;GBFR Logs如何重塑你的《碧蓝幻想&#xff1a;Relink》游戏体验 【免费下载链接】gbfr-logs GBFR Logs lets you track damage statistics with a nice overlay DPS meter for Granblue Fantasy: Relink. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/4/29 18:16:10

recycleview列表多种样式，列表为空的设置,列表刷新

刷新列表&#xff1a;尽量使用&#xff1a;adapter.notifyItemRangeChanged&#xff08;0&#xff0c;list.size()&#xff09;&#xff0c;或者类似方法&#xff0c;有动画&#xff1b;adapterpublic class Adapter2 extends RecyclerView.Adapter<Adapter2.ViewHolder2>…...

编程新知 2026/4/29 17:57:54

2026届必备的六大降AI率助手实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 知网AI检测系统通过对文本展开深入剖析来生成特征&#xff0c;凭借这些特征去识别机器写作。…...

编程新知 2026/4/29 17:38:45

3步掌握喜马拉雅音频下载：xmly-downloader-qt5完全指南

3步掌握喜马拉雅音频下载&#xff1a;xmly-downloader-qt5完全指南 【免费下载链接】xmly-downloader-qt5 喜马拉雅FM专辑下载器. 支持VIP与付费专辑. 使用GoQt5编写(Not Qt Binding). 项目地址: https://gitcode.com/gh_mirrors/xm/xmly-downloader-qt5 你是否经常遇到…...

编程新知 2026/4/29 15:59:45

douyin-downloader终极指南：5分钟学会抖音无水印批量下载

douyin-downloader终极指南&#xff1a;5分钟学会抖音无水印批量下载 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

编程新知 2026/4/29 15:03:40