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

Uniapp中嵌入H5（ uniapp开发的H5），并且在H5中跳转到APP的指定页面

news 2025/7/12 21:30:22

原生H5跳转uniapp开发的app方式：

1.在APP中使用web-view嵌入H5页面使用web-view组件实现

<template><view><web-view src="https://uniapp.dcloud.net.cn/component/web-view.html"></web-view></view>
</template>

2.在H5项目引入webview.js

<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->   导入web-view 的SDK<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>

3.调用方法跳转至app 内部的页面的关键方法 uni.reLaunch

uni.reLaunch({url: '/pages/tabBar/component/component'});

4.跳转方式：

<!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 --><script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script><script type="text/javascript">// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 H5端与app端通信document.addEventListener('UniAppJSBridgeReady', function() {uni.postMessage({data: {action: 'message'}});uni.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));});document.querySelector('.btn-list').addEventListener('click', function(evt) {var target = evt.target;if (target.tagName === 'BUTTON') {var action = target.getAttribute('data-action');switch (action) {case 'switchTab':uni.switchTab({url: '/pages/tabBar/API/API'});break;case 'reLaunch':uni.reLaunch({url: '/pages/tabBar/component/component'});break;case 'navigateBack':uni.navigateBack({delta: 1});break;default:uni[action]({url: '/pages/component/button/button'});break;}}});document.getElementById('postMessage').addEventListener('click', function() {uni.postMessage({data: {action: 'message'}});});});</script>

上面的跳转方式可以解决APP嵌入原生H5页面跳转回APP的问题，但是使用uniapp开发的H5就会失效，在uniapp开发H5页面使用 uni.reLaunch 只能跳转到H5项目本地的页面。

uniapp开发H5跳转方式：

1.在H5项目里引入 web-view.js：

通过官网链接下载 web-view.js文件（下载链接，打开链接右键另存为下载链接，），放到项目的static/js文件中

2.在main.js中引入

import App from './App'
import webView from './static/js/uni.webview.1.5.2.js'
....

3.使用方式：

				// #ifdef APP-PLUSuni.webView.postMessage({data: {action: 'uni-app',}});uni.webView.reLaunch({url: '/pages/tabBar/component/component'});

区别在于 uniapp开发的H5要在uni前面加上 webView

官方H5代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>网络网页</title><style type="text/css">.btn {display: block;margin: 20px auto;padding: 5px;background-color: #007aff;border: 0;color: #ffffff;height: 40px;width: 200px;}.btn-red {background-color: #dd524d;}.btn-yellow {background-color: #f0ad4e;}.desc {padding: 10px;color: #999999;}.post-message-section {visibility: hidden;}</style></head><body><p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p><div class="btn-list"><button class="btn" type="button" data-action="navigateTo">navigateTo</button><button class="btn" type="button" data-action="redirectTo">redirectTo</button><button class="btn" type="button" data-action="navigateBack">navigateBack</button><button class="btn" type="button" data-action="reLaunch">reLaunch</button><button class="btn" type="button" data-action="switchTab">switchTab</button></div><div class="post-message-section"><p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p><div class="btn-list"><button class="btn btn-red" type="button" id="postMessage">postMessage</button></div></div><script type="text/javascript">var userAgent = navigator.userAgent;if (userAgent.indexOf('AlipayClient') > -1) {// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {// QQ 小程序document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');} else if (/toutiaomicroapp/i.test(userAgent)) {// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');} else if (/swan/i.test(userAgent)) {// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');} else if (/quickapp/i.test(userAgent)) {// quickappdocument.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');}if (!/toutiaomicroapp/i.test(userAgent)) {document.querySelector('.post-message-section').style.visibility = 'visible';}</script>//跳转方式，下面一部分代码
<!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 --><script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script><script type="text/javascript">// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。 H5端与app端通信document.addEventListener('UniAppJSBridgeReady', function() {uni.postMessage({data: {action: 'message'}});uni.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));});document.querySelector('.btn-list').addEventListener('click', function(evt) {var target = evt.target;if (target.tagName === 'BUTTON') {var action = target.getAttribute('data-action');switch (action) {case 'switchTab':uni.switchTab({url: '/pages/tabBar/API/API'});break;case 'reLaunch':uni.reLaunch({url: '/pages/tabBar/component/component'});break;case 'navigateBack':uni.navigateBack({delta: 1});break;default:uni[action]({url: '/pages/component/button/button'});break;}}});document.getElementById('postMessage').addEventListener('click', function() {uni.postMessage({data: {action: 'message'}});});});</script></body>
</html>

Uniapp中嵌入H5（ uniapp开发的H5），并且在H5中跳转到APP的指定页面

原生H5跳转uniapp开发的app方式： 1.在APP中使用web-view嵌入H5页面使用web-view组件实现 <template><view><web-view src"https://uniapp.dcloud.net.cn/component/web-view.html"></web-view></view> </template>…...

编程日记 2023/10/26 12:42:07

汽车托运哪个平台好

随着汽车的增多，很多车主都产生了汽车托运业务的需求，但是在托运市场存在着很多鱼目混珠的无良中介和托运公司，它们的存在扰乱了市场秩序。那么面对这种情况，应该怎么选择出一家安全靠谱的汽车托运公司呢? 1. 按公里收费与按线路…...

编程日记 2023/10/26 12:41:06

前提vue2工程安装不要安装官网最新版，因为vue2还不支持 npm install -D tailwindcssnpm:tailwindcss/postcss7-compat postcss^7 autoprefixer^9init 配置 npx tailwindcss init -p这样根目录多了两个文件 tailwind.config.js和postcss.config.js main.js 引…...

编程日记 2023/10/26 12:40:05

【CSS】伪类和伪元素

伪类 :hover：悬停active：激活focus：获取焦点:link：未访问（链接）:checked：勾选（表单）first-child：第一个子元素nth-child()：指定索引的子元素&…...

编程日记 2023/10/26 12:39:04

Dunham‘s sports EDI需求分析

Dunhams Sports，成立于1937年，是美国领先的运动用品零售商之一。公司总部位于密歇根州，致力于提供广泛的体育用品和户外装备。Dunhams Sports的使命是为顾客提供最优质的运动体验，他们以卓越的服务和品质，赢得了无数荣…...

编程日记 2023/10/26 12:38:03

如何在Linux将Spring Boot项目的Jar包注册为开机自启动系统服务

有时候我们需要将Spring Boot打包出来jar文件当做系统服务注册到系统中，本文教你如何操作目录结构以下是目录结构，jar文件是从maven package打包出来的，config/application.yml是原先在项目的resources文件夹里，外置出来方便适…...

编程日记 2023/10/26 12:37:02

LAMP项目部署实战

一、LAMP环境部署 1、回顾LAMP LAMP Linux Apache MySQL PHP Apache：主要用于接收用户的请求，处理业务逻辑，返回结果给客户端（浏览器） PHP：编程语言的一种，主要应用于Web开发。主要实现注…...

编程日记 2023/10/26 12:36:02

Tauri2 mobile development traps

时间点：2023/10/24。最近在倒腾移动端开发，不想学原生和 flutter，试了试 react-native，开发体验没有想象中的舒服，干脆直接上 tauri 2 吧，半年前就听说 tauri 2 支持移动端，到现在应该可堪小用。…...

编程日记 2023/10/26 12:35:01

使用Jenkins触发gitlab的webhook

满足条件： 首先手动构建可以完成构建例如： 打开项目点击配置在“Build Triggers”栏勾选，Build when a change is pushed to GitLab. GitLab webhook ；如下复制URL链接，我的链接是：http://192.168.44…...

编程日记 2023/10/26 12:33:59

Vcenter 6.5 web 报错503解决办法

Vc web打不开就重启服务 service-control --stop --all service-control --start --all 单独启动xeb服务 service-control --start vpxd 参考 C: \Program Files\ VMware \vCenter Server \bin) service-control --list service-control --start xXx service-control -…...

编程日记 2023/10/26 12:32:58

计算机网络-计算机网络体系结构-应用层

目录一、网络应用模型客户/服务器模型(Client/Server) P2P模型(Peer-to-peer) 二、域名解析系统(DNS) 域名域名服务器解析过程三、文件传输协议(FTP) FTP控制原理四、电子邮件组成结构协议 SMTP MIME POP3 IMAP 五、万维网和HTTP协议概述 HTTP 报…...

编程日记 2023/10/26 12:31:58

软考-网络安全漏洞防护技术原理与应用

本文为作者学习文章，按作者习惯写成，如有错误或需要追加内容请留言（不喜勿喷） 本文为追加文章，后期慢慢追加 by 2023年10月网络安全漏洞概念网络安全漏洞指的是网络系统或应用程序中存在的安全弱点，被…...

编程日记 2023/10/26 12:28:54

【自然语言处理】理解词向量、CBOW与Skip-Gram模型

文章目录一、词向量基础知识1.1 One-hot表示1.2 Distributed表示二、word2vec基础知识2.1 CBOW和Skip-gram 三、基于Hierarchical Softmax的 CBOW 模型和 Skip-gram 模型3.1 CBOW 模型3.2 Skip-gram 模型参考资料由于计算机不能直接对各种字符进行运算，为此需要…...

编程日记 2023/10/26 12:27:53

一致性哈希算法原理

文章目录前言正文一、抛砖引玉，简单Hash算法的短板二、一致性Hash算法的基本概念2.1 一致性Hash算法本质也是取模2.2 便于理解的抽象，哈希环2.3 服务器如何映射到哈希环上2.4 对象如何映射到哈希环上，并关联到对应的机器三、一致性Hash算法…...

编程日记 2023/10/26 12:26:53

回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测

回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测目录回归预测 | MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料效果一览基本介绍 MATLAB实现BO-LSTM贝叶斯优化长短期神经网络多输入…...

编程日记 2023/10/26 12:25:51

工厂干洗店洗鞋店系统，校园洗护小程序来了

洗鞋店小程序，干洗店软件，洗护行业小程序,上门取衣小程序,预约干洗小程序,校园干洗店小程序,工厂干洗店小程序,干洗店小程序开发，成品软件开发洗衣工厂软件、功能强大！ 包含以下主要功能： * 用户选择洗护用品&#x…...

编程日记 2023/10/26 12:24:50

计算机毕设 opencv 图像识别指纹识别 - python

文章目录 0 前言1 课题背景2 效果展示3 具体实现3.1 图像对比过滤3.2 图像二值化3.3 图像侵蚀细化3.4 图像增强3.5 特征点检测 4 OpenCV5 最后 0 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题目缺少创新和亮点，往…...

编程日记 2023/10/26 12:23:49

简化通知基础设施：开源的消息通知服务 | 开源专题 No.41

novuhq/novu Stars: 22.9k License: MIT Novu 是一个开源的通知基础设施项目，它提供了统一的 API 来通过多个渠道发送通知，包括应用内、推送、电子邮件、短信和聊天。主要功能有： 为所有消息提供商 (应用内、电子邮件、短信、推送和聊天) 提…...

编程日记 2023/10/26 12:22:48

微信公众号排版写作

对话框添加菜单 05 一节课学会使用微信自动回复_哔哩哔哩_bilibili 一件扫图关注一件扫描付款公众号排版 10元付费 08 —长按二维码关注和收款_哔哩哔哩_bilibili 微信开店 09 一节课开设自己的微店_哔哩哔哩_bilibili 知乎软文，设置引流矩阵 20 —在知乎写…...

编程日记 2023/10/26 12:21:47

UE4/5 批量进行贴图Texture压缩、修改饱和度

该插件下载地址： 🍞正在为您运送作品详情https://mbd.pub/o/bread/ZZWYmpxw 适用于 UE4 4.25/4.26/4.27 UE5 以上版本在Edit - Plugins中分别开启插件 Python Editor Script Plugin 插件 Editor Scripting Utilites 如果会python代码，…...

编程日记 2023/10/26 12:20:46

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...

编程新知 2025/7/11 9:54:35

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/9 17:42:02

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/7/11 18:23:18

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/7/11 6:47:21

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类二者共有的常见方法方法功能add加subtract减multiply乘divide除注意点：传参类型必须是类对象一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明创建BigInteger对象传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

LLMs 系列实操科普（1）

写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...

编程新知 2025/7/11 12:12:33

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析，分为已启动和未启动两种场景： 一、ContentProvider已启动的情况 1. 核心流程触发条件：当其他组件（如Activity、Service）通过ContentR…...

编程新知 2025/7/9 2:38:35

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/7/11 15:44:23