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

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

news 文章来源：https://blog.csdn.net/qq_42103673/article/details/134048010 2025/5/23 5:57:26

原生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方式&#xff1a; 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

汽车托运哪个平台好

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

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

TailwindCSS使用并开启JIT（vue2）

前提vue2工程 安装 不要安装官网最新版&#xff0c;因为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&#xff1a;悬停active&#xff1a;激活focus&#xff1a;获取焦点:link&#xff1a;未访问&#xff08;链接&#xff09;:checked&#xff1a;勾选&#xff08;表单&#xff09;first-child&#xff1a;第一个子元素nth-child()&#xff1a;指定索引的子元素&…...

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

Dunham‘s sports EDI需求分析

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

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

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

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

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

LAMP项目部署实战

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

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

Tauri2 mobile development traps

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

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

使用Jenkins触发gitlab的webhook

满足条件&#xff1a; 首先手动构建可以完成构建 例如&#xff1a; 打开项目点击配置 在“Build Triggers”栏勾选&#xff0c;Build when a change is pushed to GitLab. GitLab webhook &#xff1b;如下 复制URL链接&#xff0c;我的链接是&#xff1a;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

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

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

编程日记 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 模型 参考资料 由于计算机不能直接对各种字符进行运算&#xff0c;为此需要…...

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

一致性哈希算法原理

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

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

洗鞋店小程序&#xff0c;干洗店软件&#xff0c;洗护行业小程序,上门取衣小程序,预约干洗小程序,校园干洗店小程序,工厂干洗店小程序,干洗店小程序开发&#xff0c;成品软件开发 洗衣工厂软件、功能强大&#xff01; 包含以下主要功能&#xff1a; * 用户选择洗护用品&#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 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往…...

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

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

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

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

微信公众号排版写作

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

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

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

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

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

mysql中limit和offset的用法详细介绍

有的时候我们在学习或者工作中会使用到SQL语句&#xff0c;那么介绍一下limit和offset的使用方法。 mysql里分页一般用limit来实现&#xff0c;例如&#xff1a; 1、select* from user limit 3 表示直接取前三条数据 2、select * from user limit 1,3; 表示取1后面的第2,3,…...

编程日记 2023/10/26 12:19:44

vivado简单仿真入门

打开软件 创建工程 create project ![在这里插入图片描述](https://img-blog.csdnimg.cn/892eda626d394733920854b71ca8f726.png)先next,保留工程路径&#xff0c;配置环境 配置芯片环境 本次芯片类型 xc7k325tffg900-2 创建之后完整的demo 编写仿真内容 timescale 1ns/1…...

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

Elsevier (爱思唯尔) 期刊 投稿流程与注意点

&#x1f604; Elsevier (爱思唯尔) 期刊投稿流程中还是遇到了不少问题的&#xff0c;本篇文章总结一些说明文档和提交要点。 ⭐ LaTex 模板说明 & 投稿流程与准备 latex模版和投稿流程相关参考说明可看下面几个网址&#xff0c;总结的非常全面了&#xff1a; Elsevier&am…...

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

centos Let‘s Encrypt 免费https证书申请，并且自动续约

一、首先我们要使用certbot 工具 官网地址&#xff1a; https://certbot.eff.org/instructions?wsother&oscentosrhel8 下载 snap 工具 sudo yum install snapd sudo systemctl enable --now snapd.socket sudo ln -s /var/lib/snapd/snap /snap sudo systemctl status…...

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

nodejs+vue城市轨道交通线路查询系统-计算机毕业设计

着社会的快速发展&#xff0c;计算机的影响是全面且深入的。社会生产水平的不断提高&#xff0c;日常生活中人们对备忘记账系统方面的要求也在不断提高&#xff0c;因特网的使用越来越广泛&#xff0c;而在众多的因特网中&#xff0c;万维网更是为人们带来了新鲜的体验。在这当…...

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

MFC Windows 程序设计[332]之十进制转十六进制编辑框(附源码)

MFC Windows 程序设计[332]之十进制转十六进制编辑框 程序之美前言主体运行效果核心代码逻辑分析结束语程序之美 前言 MFC是微软公司提供的一个类库（class libraries），以C++类的形式封装了Windows API，并且包含一个应用程序框架，以减少应用程序开发人员的工作量。其中包…...

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

转化率的催化剂：网站客服机器人如何推动企业销售？

随着5G的推广&#xff0c;人工智能技术的普及程度越来越高&#xff0c;人机交互已经成为这个时代的常态&#xff0c;无论是在我们的日常生活中还是在企业服务中都非常常见。如今&#xff0c;无论是营销型企业还是客服型企业&#xff0c;都纷纷采用网站客服机器人服务&#xff0…...

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

Go 包操作之如何拉取私有的Go Module

Go 包操作之如何拉取私有的Go Module 在前面&#xff0c;我们已经了解了GO 项目依赖包管理与Go Module常规操作&#xff0c;Go Module 构建模式已经成为了 Go 语言的依赖管理与构建的标准。 在平时使用Go Module 时候&#xff0c;可能会遇到以下问题&#xff1a; 在某 modul…...

编程日记 2023/10/26 12:09:34

VR酒店专业情景教学演示

VR酒店情景教学为学生带来的全新学习体验。在这个虚拟环境中&#xff0c;学生可以亲身经历各种酒店管理场景&#xff0c;从客房清洁、餐厅服务&#xff0c;到客人接待、突发事件处理&#xff0c;都能得到生动的模拟和实践。 客房清洁是酒店管理中最基础却也最重要的一环。通过V…...

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

odps函数

1、wm_concat 聚合函数&#xff0c;可以实现对分组后的列数据拼接成一行。 参数&#xff1a;第一个参数为分隔符&#xff0c;第二个参数为要聚合的列&#xff1b; select prov_code,wm_concat(-,city_name) from code_china_area group by prov_code; 2、datediff 日期函数…...

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