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

在 UniApp 中实现 App 与 H5 页面的跳转及通信

news 来源：原创 2025/7/28 3:04:31

在移动应用开发中，内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架，提供了灵活的方式实现 App 与 H5 的跳转和双向通信。本文将详细讲解实现方法，并提供可直接复用的代码示例。

文章目录

一、 App 内嵌 H5 页面（使用 `web-view` 组件）
二、 App 跳转外部浏览器打开 H5
三、App 与 H5 的双向通信
四、注意事项和常见问题
五、完整代码示例
六、总结

一、 App 内嵌 H5 页面（使用 `web-view` 组件）

1.核心场景

在 App 内直接显示第三方活动页、帮助文档等。
保持应用内导航体验，避免跳转外部浏览器。

2.实现步骤
（1）创建 web-view 页面
在 UniApp 项目中新建页面 pages/webview/webview.vue

<template><view class="webview-container">// 全屏加载H5页面<web-viewid="my-webview":src="h5Url"@message="handleH5Message"></web-view></view>
</template><script setup>
import { ref } from 'vue';const h5Url = ref('');onLoad((options) => {// 接收跳转时传递的 URL 参数if(options.url){h5Url.value = decodeURIComponent(options.url);uni.setNavigationBarTitle({ title: options.title || '加载中...'});} else{uni.showToast({ title: '页面参数错误', icon: 'none' });setTimeout(() => uni.navigateBack(), 1500);}
});// 接收 H5 页面发送的消息
const handleH5Message = (e) => {console.log('收到 H5 消息：', e.detail.data);// 示例：根据消息关闭页面if(e.detail.data.action === 'close') {uni.navigateBack();}
}
</script>

（2）跳转到 H5 页面
在需要跳转的地方调用：

// 示例：在按钮点击事件中跳转
const openH5Page = () => {const targetUrl = 'https://www.example.com/h5-page';uni.navigateTo({url: `/pages/webview/webview?url=${encodeURIComponent(targetUrl)}&title=活动页`})
}

二、 App 跳转外部浏览器打开 H5

1.核心场景

用户协议、隐私政策等需脱离应用环境的页面
调用第三方支付、地图等外部服务

2.实现代码

const openExternalBrowser = (url) => {// 判断平台：App 端使用 plus.runtime, H5 端使用 window.openconst platform = uni.getSystemInfoSync().platformif(platform === 'android' || platform === 'ios'){plus.runtime.openURL(url);} else {window.open(url, '_blank');}
}// 调用示例
openExternalBrowser('https://www.example.com/external-page');

三、App 与 H5 的双向通信

1. H5 向 App 发送消息
（1）H5 页面代码
在 H5 页面中，通过 uni-postMessage 发送消息：

<!DOCTYPE html>
<html>
<body><button onclick="sendMessageToApp()"> 发送消息给 APP</button><script>function sendMessageToApp() {// 发送消息给 UniAppuni.postMessage({data: {action: 'close',message: '用户点击了关闭按钮'}})}</script>
</body>
</html>

（2）UniApp 接收消息
在 web-view 组件中监听 @message 事件：

<web-view:src="h5Url"@message="handleH5Message"
></web-view>

2. App 向 H5 发送消息
（1）UniApp 调用 H5 方法
通过 evalJS 执行 H5 页面的代码

// 获取 web-view 上下文（需指定 web-view 的 id）
const webViewContext = uni.createWebViewContext(my-webview);// 调用 H5 页面中的函数
const sendMessageToH5 = () => {webViewContext.evalJS(handleAppMessage('Hello from App!'))
}

（2）H5 页面接收消息
在 H5 页面中定义全局函数：

<script>// 供 App 调用的函数function handleAppMessage(msg){alert('收到 APP 消息：' + msg)}
</script>

四、注意事项和常见问题

1.跨域问题（H5端）

问题：H5 页面与 UniApp 服务域名不同时，可能触发跨域限制。
解决方案：
1.配置 H5 服务端支持 CORS
2.本地开发时，在 manifest.json 中设置代理

{"h5": {"devServer": {"proxy": {"/api": {"target": "https://api.example.com","changeOrigin": true}}}}
}

2.微信小程序特殊处理

配置域名白名单：在微信公众平台设置 request 合法域名和 web-view 业务域名
强制 HTTPS：所有 H5 链接必须使用 HTTPS

3.页面返回逻辑
处理 Android 返回键和导航栏返回按钮

// 监听 Android 返回键
uni.onBackPress(() => {uni.showModel({title: '提示',content: '确定要离开当前页面吗？',success: (res) => {if(res.confirm){uni.navigateBack();}}});return true; // 阻止默认返回行为
})

五、完整代码示例

1. UniApp 项目结构

src/├── pages/│   └── webview/│       └── webview.vue   # web-view 容器页面└── utils/└── bridge.js         # 封装通信工具

2.通信工具封装（bridge.js）

// 封装通信方法
export const H5Bridge = {// 发送消息到 H5sendToH5: (message) => {const webViewContext = uni.createWebViewContext('h5-container');webViewContext.evalJS(`handleAppMessage(${JSON.stringify(message)})`)},// 接收 H5 消息onH5Message: (callback) => {uni.$on('h5-message', callback);}	
}

六、总结

通过 web-view 组件和 uni.postMessage/evalJS, UniApp 实现了 App 与 H5 页面的无缝跳转和双向通信。关键点总结：

内嵌 H5：保持应用内体验，适合常规内容展示
外部跳转：适合需要调用系统能力的场景（如支付）。
通信机制：通过消息事件和 JS 执行实现双向交互

在 UniApp 中实现 App 与 H5 页面的跳转及通信

在移动应用开发中，内嵌 H5 页面或与外部网页交互是常见需求。UniApp 作为跨平台框架，提供了灵活的方式实现 App 与 H5 的跳转和双向通信。本文将详细讲解实现方法，并提供可直接复用的代码示例。文章目录一、 App 内嵌 H5 页面（使…...

编程日记 2025/7/28 3:04:31

目标跟踪最新文章阅读列表

AAAI2025 TrackFormer: Multi-Object Tracking with Transformers 论文：https://arxiv.org/abs/2101.02702 代码：https://github.com/timmeinhardt/trackformer AAAI2025 SUTrack 单目标跟踪论文：https://pan.baidu.com/s/10cR4tQt3lSH5V2RNf7-3gg?pwd=pks2 代码：htt…...

编程日记 2025/7/28 3:03:49

Spark RDD行动算子与共享变量实战：从数据聚合到分布式通信

RDD行动算子： 行动算子就是会触发action的算子，触发action的含义就是真正的计算数据。 1、reduce import org.apache.spark.{SparkConf, SparkContext} object value11 { def main(args: Array[String]): Unit { // 创建 SparkConf 对象并设置应用…...

编程日记 2025/7/26 17:23:06

《2025全球机器学习技术大会：阿里云讲师张玉明深度剖析通义灵码AI程序员》

4 月 18 日 - 19 日，由 CSDN & Boolan 联合举办的 2025 全球机器学习技术大会（ML-Summit）于上海顺利举行。大会聚焦人工智能与机器学习前沿技术，汇聚了来自科技与人工智能领域的数位顶尖专家以及数千名开发者和研究者&#xf…...

编程日记 2025/7/25 22:37:54

python+adafruit_pca9685 测试舵机存储当前角度

测试代码如下： # -*- coding: UTF-8 -*- import time from board import SCL, SDA import busio from adafruit_pca9685 import PCA9685 from adafruit_motor import servo 测试控制1块驱动板或者多块 pip install Adafruit-PCA9685 --break-system-packages pip i…...

编程日记 2025/7/23 11:31:58

视觉/深度学习/机器学习相关面经总结（2）（持续更新）

目录 1、跨模态对齐的方案2、位置编码方式1. **正弦和余弦位置编码（Sinusoidal Positional Encoding）**2. **可学习的位置编码（Learnable Positional Encoding）**3. **相对位置编码（Relative Positional Encoding&…...

编程日记 2025/7/26 14:19:03

缓存并发更新的挑战

缓存并发更新的挑战 1. 引言：并发更新的挑战2. 并发场景下的常见“坑”最后写入胜出 (Last-Write-Wins)脏读 (Dirty Read)丢失更新 (Lost Update)不可重复读 (Non-repeatable Read)幻读 (Phantom Read)写偏斜 (Write Skew)缓存与数据库不一致分布式系统中的时序问题…...

编程日记 2025/7/26 18:45:16

LeetCode题解1297. 子串的最大出现次数

（好久没写题解了，忙着学ai去了） 先来看题目很显然，题目就是要我们在给定的字符串中找到一个满足要求的连续子串。首先，要求子串中不同字母的数目得小于等于maxLetters，我们可以用一个DifLettsers函数来…...

编程日记 2025/7/26 5:13:33

零基础小白如何上岸数模国奖

零基础小白如何上岸数模国奖我自己本人第一次参加数模国赛顺利上岸国奖，当然那段经历也是比较痛苦了，差不多也是从当年四月开始接触数学建模，第一次参加妈妈杯成绩并不理想，后面不断参加数模比赛进行模拟，最后顺利上岸…...

编程日记 2025/7/22 14:59:57

Redux-Saga vs Redux-Thunk

Redux-Saga与Redux-Thunk对比 #mermaid-svg-zbDYIbzoVqlMJXiE {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-zbDYIbzoVqlMJXiE .error-icon{fill:#552222;}#mermaid-svg-zbDYIbzoVqlMJXiE .error-text{fill:#55222…...

编程日记 2025/7/21 20:25:32

Win11 配置 Git 绑定 Github 账号的方法与问题汇总

目录一、创建 Github 项目库（远程仓库）二、配置安装好的 Git1. 设置用户信息2. 查看已配置的信息3. 建立本地仓库4. Git 常用命令速查表三、配置 SSH 公钥1. 生成 ssh key出现的问题 2. 启动 ssh-agent 并添加秘钥3. 在 Github 上绑定 ssh 公钥出现的问…...

编程日记 2025/7/26 8:52:35

李臻20242817_安全文件传输系统项目报告_第9周

安全文件传输系统项目报告（第 9 周） 1. 代码链接 Gitee 仓库地址：https://gitee.com/li-zhen1215/homework/tree/master/Secure-file 代码结构说明： project-root/├── src/ # 源代码目录│ ├── main.c # 主程序入口│ ├…...

编程日记 2025/7/28 2:40:14

OceanBase TPCC测试常见报错汇总

OceanBase TPCC测试常见报错汇总报错1：加载测试数据时创建tablegroup失败报错2：加载测试数据时执行超时报错3：加载测试数据时funcs.sh函数找不到报错4：加载数据时报错超过租户内存上限办法一：增加租户内存办法二：调高转储线程数办法三：调整MemStore内存占比和冻结触发阈…...

编程日记 2025/7/23 10:22:34

文心一言开发指南06——千帆大模型平台新手指南

编程日记 2025/7/26 5:31:04

解决SSLError: [SSL: DECRYPTION_FAILED_OR_BAD_RECORD_MAC] decryption faile的问题

问题描述： 在pip安装第三方库时，出现SSL的问题。传输层安全性协议（TLS）及其前身安全套接层（SSL）是现在的 HTTPS 协议中的一种安全协议，目的是为互联网通信提供安全及数据完整性保障。而较新版…...

编程日记 2025/7/27 4:28:51

Clang中ext_vector_type和address_space attribute的使用

Clang中ext_vector_type和address_space __attribute__的使用一.背景二. 关键概念详解三.示例代码与验证四. 总结一.背景在使用 Clang 编译可执行程序时，遇到类似下面的链接错误： undefined reference to atomic_add(int volatile AS4*, int) undef…...

编程日记 2025/7/25 12:58:28

echarts自定义图表

普通柱状图自定义柱状图实现思路 4个图层背景边框实体内部透明地步透明间隙红色柱形数据数据使用自定义字体倾斜柱形上方扁平矩形矩形颜色透明 label字体颜色和背景色相同实现矩形块上下靠padding实现向下 paddingBottom使用负数完整代码 <!DOCTYPE html> <…...

编程日记 2025/7/22 5:26:23

【应用密码学】实验二分组密码（2）

一、实验要求与目的 1） 学习AES密码算法原理 2） 学习AES密码算法编程实现二、实验内容与步骤记录（只记录关键步骤与结果，可截图，但注意排版与图片大小） 字符串加解密运行python程序，输入…...

编程日记 2025/7/24 4:31:37

【深度学习】多头注意力机制的实现|pytorch

博主简介：努力学习的22级计算机科学与技术本科生一枚🌸博主主页： Yaoyao2024往期回顾：【深度学习】注意力机制| 基于“上下文”进行编码,用更聪明的矩阵乘法替代笨重的全连接每日一言🌼: 路漫漫其修远兮，吾…...

编程日记 2025/7/27 4:28:24

OceanBase数据库磁盘空间管理

OceanBase数据库磁盘空间管理日志盘空间管理日志盘容量参数日志盘空间满应急处理数据盘空间管理数据盘容量参数数据文件自动扩展数据盘空间满应急处理表占用的磁盘空间日志盘空间管理日志盘容量参数 🐯 与日志盘redo_dir相关的四个重要参数： log_…...

编程日记 2025/7/25 5:20:02

自然语言处理之机器翻译：Statistical Machine Translation（SMT）的评估方法解析与创新实践

## 机器翻译与评估的重要性机器翻译（Machine Translation, MT）作为自然语言处理（NLP）的核心任务之一，旨在通过计算机实现跨语言的信息传递。随着全球化进程加速，机器翻译在商业、科研、社交等领域的应用愈发广泛。然而，翻译质量直接决定了其实际价值，因此**翻译质量…...

编程日记 2025/7/23 8:08:19

数据集下载（AER 和causaldata R包）

1.AER #install.packages("AER") library(AER)# 引用R包 citation("AER") # 参考文献：Kleiber, Christian, and Achim Zeileis. Applied econometrics with R. Springer Science & Business Media, 2008.# 查看有哪些数据集 data(package …...

编程日记 2025/7/28 1:04:52

【Linux系统】详解Linux权限

文章目录前言一、学习Linux权限的铺垫知识1.Linux的文件分类2.Linux的用户2.1 Linux下用户分类2.2 创建普通用户2.3 切换用户2.4 sudo（提升权限的指令） 二、Linux权限的概念以及修改方法1.权限的概念2.文件访问权限和访问者身份的相关修改&#xff08…...

编程日记 2025/7/27 20:07:28

Go语言--语法基础4--基本数据类型--字符串类型

在 Go 语言中，字符串也是一种基本类型。相比之下， C/C 语言中并不存在原生的字符串类型， 通常使用字符数组来表示，并以字符指针来传递。 Go 语言中字符串的声明和初始化非常简单，举例如下： var str st…...

编程日记 2025/7/25 18:54:31

分布式GPU上计算长向量模的方法

分布式GPU上计算长向量模的方法当向量分布在多个GPU卡上时，计算向量模(2-范数)需要以下步骤： 在每个GPU上计算本地数据的平方和跨GPU通信汇总所有平方和在根GPU上计算总和的平方根实现方法下面是一个完整的CUDA示例代码，使用NCCL进行多…...

编程日记 2025/7/27 15:29:30

项目班——0422——日志

...

编程日记 2025/7/23 11:38:36

【音视频】音频编码实战

FFmpeg流程从本地⽂件读取PCM数据进⾏AAC格式编码，然后将编码后的AAC数据存储到本地⽂件。示例的流程如下所示。关键函数说明： avcodec_find_encoder：根据指定的AVCodecID查找注册的编码器。avcodec_alloc_context3：为AVCod…...

编程日记 2025/7/23 11:14:08

Git Bash 下使用 SSH 连接出现 “Software caused connection abort” 问题

目录一、检查网络环境和防火墙设置（失败）二、尝试使用 GitHub 的备用 SSH 端口 443（成功）三、检查 SSH Key 是否被正确加载四、检查是否多个 SSH 进程干扰或者服务异常五、使用 HTTPS 方式临时解决（非 SSH&#xff09…...

编程日记 2025/7/23 4:43:28

K8S Pod 常见数据存储方案

假设有如下三个节点的 K8S 集群： k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点容器运行时是 containerd 一、理论介绍 1.1、Volumes 卷 Kubernetes 的卷是 pod 的⼀个组成部分，因此像容器⼀样在 pod 的规范（pod.spec&#x…...

编程日记 2025/7/23 4:27:05

JavaScript 模板字符串：更优雅的字符串处理方式

什么是模板字符串？ 模板字符串（Template Literals）是 ES6（ES2015）引入的一种新的字符串表示方式，它提供了更强大、更灵活的字符串拼接功能。与传统的字符串使用单引号（）或双引号&am…...

编程日记 2025/7/25 11:21:56

DeepSeek智能时空数据分析（五）：基于区域人口数量绘制地图散点-大模型搜集数据NL2SQL加工数据

序言：时空数据分析很有用，但是GIS/时空数据库技术门槛太高时空数据分析在优化业务运营中至关重要，然而，三大挑战仍制约其发展：技术门槛高，需融合GIS理论、SQL开发与时空数据库等多领域知识；空…...

编程日记 2025/7/17 10:25:49

PostSwigger 的 CSRF 漏洞总结

本文所提供的关于 web 安全的相关信息、技术讲解及案例分析等内容，仅用于知识分享与学术交流目的，旨在提升读者对 web 安全领域的认知与理解。以下仅仅是作者对 PostSwigger Web 安全的知识整理和分享，严禁任何非法犯罪活动。限制 CSRF 的三…...

编程日记 2025/7/26 1:27:34

vue项目页面适配

vue项目页面适配目的：结合动态设置根字体大小的脚本（如通过 JavaScript 监听屏幕尺寸变化），实现页面元素在不同设备上的自适应缩放 1、安装postcss-pxtorem ### 若项目未集成 postcss，需同步安装： npm …...

编程日记 2025/7/25 15:13:43

AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok的客户端开源应用程序，集成了 Monaco 编辑器。

一、软件介绍文末提供程序和源码下载学习 AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok、Felo、Cody、JENOVA、Phind、Perplexity、Genspark 和 Google AI Studio 的客户端应用程序，集成了 Monaco 编辑器。使用 Electron 构建的强大桌面应用程序&a…...

编程日记 2025/7/23 21:24:12

Flutter Dart新特性NulI safety late 关键字、空类型声明符?、非空断言!、required 关键字

目录 late 关键字 required关键词: 常用的Model对象使用required Null safety翻译成中文的意思是空安全 null safety 可以帮助开发者避免一些日常开发中很难被发现的错误，并且额外的好处是可以改善性能后的版本都要求使用nul1 safety。Flutter2.2.0(2021年5月19日…...

编程日记 2025/7/27 20:40:38

CF2096G Wonderful Guessing Game 构造

题解首先考虑没有 ? ? ? 回答的时候，答案是多少。猜猜需要多少个询问。 ⌈ log ⁡ 2 n ⌉ ? ⌈ log ⁡ 3 n ⌉ ? \lceil \log_2n\rceil ? \lceil \log_3n\rceil ? ⌈log2n⌉?⌈log3n⌉? 可以构造一个表，行表示不同的询问，…...

编程日记 2025/7/16 11:28:31

制作一款打飞机游戏26：精灵编辑器

虽然我们基本上已经重建了Axel编辑器，但我不想直接使用它。我想创建一个真正适合我们当前目的的编辑器，那就是编辑精灵（sprites）。这将是今天的一个大目标——创建一个基于模板的编辑器，用它作为我们实际编辑器的起点。…...

编程日记 2025/7/21 2:25:38

深入Java JVM常见问题及解决方案

1. 简介 Java虚拟机（JVM）是Java程序运行的核心环境，但其复杂性可能导致内存泄漏、性能下降、类加载失败等问题。本文从内存管理、垃圾回收、性能调优、异常处理四大方向，结合工具使用与实战案例，详解JVM问题的排查与解…...

编程日记 2025/7/22 11:43:11

【MySQL】Java代码操作MySQL数据库 —— JDBC编程

目录 1. Java的JDBC编程 1.1 Java的数据库编程：JDBC 1.2 JDBC工作原理 1.3 如何在项目中导入数据库驱动包如何下载数据库驱动包 jar包如何引入项目中 2. 编写JDBC代码 1. 创建并初始化一个数据源(DataSource) 2. 和数据库服务器建立连接 3. 构造 SQL 语句…...

编程日记 2025/7/21 1:09:50

Marmoset Toolbag 5.0 中文汉化版八猴软件中文汉化版免费下载

八猴安装包下载链接 https://pan.baidu.com/s/1Mgy3Mrlrb3Tvtc8w7Zn1nA?pwd6666 提取码：6666 Marmoset Toolbag是由Monkey公司推出一款专业动画渲染软件，也叫做八猴渲染器。该软件主要特征功能是可以进行实时模型观察、材质编辑和动画预览，…...

编程日记 2025/7/23 10:15:37

Java编程中常见错误的总结和解决方法

1. 找不到文件问题描述：尝试编译一个名为ChangeCha.java的文件，但编译器找不到这个文件。错误信息：javac: 找不到文件: ChangeCha.java解决方法：检查文件名是否正确，文件是否存在于当前目录，或者路径是否…...

编程日记 2025/7/27 7:10:11

【GESP】C++三级练习 luogu-B2114 配对碱基链

GESP三级练习，字符串练习（C三级大纲中6号知识点，字符串），难度★✮☆☆☆。题目题解详见：https://www.coderli.com/gesp-3-luogu-b2114/ 【GESP】C三级练习 luogu-B2114 配对碱基链 | OneCoderGESP三级练…...

编程日记 2025/7/26 3:50:08

C++类设计新思路：封装结构体成员变量

C++类设计新思路：封装结构体成员变量引言在C++编程里，类是封装数据和行为的重要手段。常规的类设计直接把成员变量定义在类中，再通过成员函数访问和修改这些变量。不过，有时候我们可以采用不同的设计思路，例如将成员变量封装到结构体里，这样可能会带来一些好处。本文…...

编程日记 2025/7/24 4:41:45

图像预处理-形态学变换

针对二值化图像，其有两个输入，一个输出：输入为原图像、核（结构化元素），输出为形态学变换后的图像。基本操作有腐蚀和膨胀。一.核联想到之前的卷积核，也是一种核。此时的核就跟卷积核不太一…...

编程日记 2025/7/25 10:18:37

关于百度模型迭代个人见解：技术竞速下的应用价值守恒定律

就在前天，在 2025 年 4 月 25 日的百度 Create 开发者大会上，文心大模型 4.5 Turbo 与 X1 Turbo 的发布再次将 AI 行业带入 "涡轮加速" 时代。这两款模型不仅在多模态理解、逻辑推理等核心指标上实现突破，更以80% 的价格降幅重塑行…...

编程日记 2025/7/23 16:00:00

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念第一部分：概率与统计基础第1节：基础概念：随机变量、概率分布、大数定律与中心极限定理一、随机变量与概率分布：用数学描述市场…...

编程日记 2025/7/24 1:10:12

混沌工程领域常用工具的对比分析

以下是混沌工程领域常用工具的对比分析，涵盖主流工具的核心功能、优势、适用场景及局限性，帮助技术团队根据自身需求选择合适的工具：一、故障注入工具对比工具核心特点优势适用场景局限性生态集成开源/付费Chaos MonkeyNetflix 开源，随机终止生产环境实例，模拟硬件/进程…...

编程日记 2025/7/22 18:02:50

LINUX的使用（2）- 安装软件

0.防火墙相关启动防火墙： sudo systemctl start firewalld #查看防火墙列表 firewall-cmd --list-ports 设置防火墙开机自启： sudo systemctl enable firewalld 检查防火墙状态： sudo firewall-cmd --state 允许某个端口（如端…...

编程日记 2025/7/19 13:03:58