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

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

news 2026/2/9 23:51:38

    最近开发了个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

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/12/18 6:00:45

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/11/20 18:21:59

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

编程新知 2026/2/1 20:22:45