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

uniapp-设置UrlSchemes从外部浏览器H5打开app

news 2026/2/7 12:10:24

需求：外部浏览器H5页面，跳转到uniapp开发的原生app内部。

1、uniapp内部的配置：

（1）打开manifest->App常用其他设置，如下，按照提示输入您要设置的urlSchemes：

在这里插入图片描述
（2）填写配置之后，可到manifest->源码试图查看，如下：

在这里插入图片描述
（3）uniapp中修改了manifest配置之后，一定要重新打包，然后再运行到手机，否则可能会出现打开app失败：
问题：如果ios手机出现以下提示，应该是没有重新打包的缘故，如下：

在这里插入图片描述

重新打包步骤：官方打包自定义基座步骤
1）发行-原生App-云打包-iOS，如下依次填写自己家的包名，密码、证书、文件等，然后选择打自定义调试基座，点击打包即可：

在这里插入图片描述
2）打包成功之后，依次点击运行-运行到手机或模拟器-运行到iOS App基座，然后在自己的测试机上面测试即可：

在这里插入图片描述

2、H5端：

（1）H5页面代码（全）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><style>#app{width: 100%;height: 100%;}.box{width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;margin-top: 200px;}.text{width: 90%;font-size: 24px;font-weight: 600;padding-bottom: 100px;}.btn{width: 200px;height: 60px;line-height: 60px;border: none;background-color: #FF7A14;font-size: 20px;color: #fff;border-radius: 80px;}</style>
</head>
<body><div id="app"><div class="box"><p class="text">已完成，请返回APP继续操作！</p><button class="btn" @click="goBackApp">返回</button></div></div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>// 兼容var browser = {versions: function() {var u = navigator.userAgent,app = navigator.appVersion;return {/*是否为移动终端*/ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),/*ios终端*/android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,};}(),language: (navigator.browserLanguage || navigator.language).toLowerCase()};var myApp = new Vue({el: '#app',data:{},methods:{goBackApp(){if(browser.versions.ios){window.location.href = "jjstest://pages/machine/index";}else if(browser.versions.android){window.location.href = "jjstest://pages/machine/index";}else{alert('暂不支持跳转')}},}})
</script>
</html>

解释：
在这里插入图片描述
（2）把页面给后端，让后端把html页面放到服务器上，然后手机打开该html链接，点击返回按钮，根据提示确认打开，即可返回到app固定页面，如下：

在此记录，也希望能帮助到各位~

uniapp-设置UrlSchemes从外部浏览器H5打开app

需求：外部浏览器H5页面，跳转到uniapp开发的原生app内部。 1、uniapp内部的配置： （1）打开manifest->App常用其他设置，如下，按照提示输入您要设置的urlSchemes： （2&am…...

编程日记 2024/4/8 8:51:02

校园圈子小程序，大学校园圈子，三段交付，源码交付，支持二开

介绍在当今的数字化时代，校园社交媒体和在线论坛成为了学生交流思想、讨论问题以及分享信息的常用平台。特别是微信小程序，因其便捷性、用户基数庞大等特点，已逐渐成为构建校园社区不可或缺的一部分。以下是基于现有资料的校园小程序帖子发…...

编程日记 2024/4/8 8:50:01

基于kmeans的聚类微博舆情分析系统

第一章绪论 1.1研究背景如今在我们的生活与生产的每个角落都可以见到数据与信息的身影。自从上十世纪八十年代的中后期开始，我们使用的互联网技术已经开始快速发展，近些年来云计算、大数据和物联网等与互联网有相领域的发展让互联网技术达到了史无前例…...

编程日记 2024/4/8 8:49:00

【Docker常用命令（四）】

目录 Docker常用命令（四）注意 Docker常用命令（四） docker pause docker pause 命令用于暂停容器中的所有进程。docker pause CONTAINER [CONTAINER...]常用子命令和选项：无特定常用选项。docker port docker port 命令…...

编程日记 2024/4/8 8:46:58

黑豹程序员-Spring Task实现定时任务

定时任务项目中，我们有一个特殊的要求，无需人为去触发，而是自动去触发程序。通常有一定的频率，每天，某时等。实现的四种方式 1、java自身提供定时任务java.util.Timer类，但太过简单，几乎无…...

编程日记 2024/4/8 8:45:57

云原生安全当前的挑战与解决办法

云原生安全作为一种新兴的安全理念，不仅解决云计算普及带来的安全问题，更强调以原生的思维构建云上安全建设、部署与应用，推动安全与云计算深度融合。所以现在云原生安全在云安全领域越来受到重视，云安全厂商在这块的投入也是越来…...

编程日记 2024/4/8 8:43:54

Qt——Qt实现数据可视化之QChart的使用总结（使用QChart画出动态显示的实时曲线）

【系列专栏】：博主结合工作实践输出的，解决实际问题的专栏，朋友们看过来！《项目案例分享》《极客DIY开源分享》《嵌入式通用开发实战》《C++语言开发基础总结》《从0到1学习嵌入式Linux开发》...

编程日记 2024/4/8 8:42:53

（React生命周期）前端八股文修炼Day8

一 React的生命周期有哪些 React组件的生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。React类组件的生命周期方法允许你在组件的不同阶段执行代码。挂载…...

编程日记 2024/4/8 8:41:52

考研||考公||就业||其他？-------愿不再犹豫

大三下了，现在已经开学一个多月了，在上个学期的时候陆陆续续吧周围有的行动早的人已经开始准备考研了，当然这只是下小部分人吧，也有一部分人是寒假可能就开始了，更多的则是开学的时候，我的直观感受是图书馆…...

编程日记 2024/4/8 8:39:50

使用 Selenium 和 OpenCV 识别验证码（使用 Java）

验证码的自动识别对于爬虫来说是一个常见的挑战。在这篇文章中，我们将展示如何使用 Selenium 和 OpenCV，结合 Java，来自动化识别网站上的验证码。配置 Maven 依赖首先，我们需要在 Maven 项目中添加 Selenium 和 OpenCV 的依赖。…...

编程日记 2024/4/8 8:36:47

什么是数据库?如何安装SQL Server(超详细版)

文章目录什么是数据库数据库与数据库管理系统数据库系统之间的区别和联系数据库在生活中的应用安装SQL Server数据库系统要求安装步骤(超详细)安装前的准备安装SSMS 什么是数据库数据库，顾名思义，是存储数据的“仓库”。它不仅仅是简单的数据存储&…...

编程日记 2024/4/8 8:34:45

Golang 开发实战day08 - Multiple Return values

Golang 教程08 - Multiple Return values 1. Multiple return values 1.1 如何理解多个返回值？ Go语言中的多返回值，就像你听了一首歌曲yellow，可以从歌曲里反馈出忧郁和害羞！Goland的多个返回值就类似于如此，设定一…...

编程日记 2024/4/8 8:32:43

如何成为一名优秀的工程师下

身为工程师，理所当然要重视实践，自然科学不管发展到何时都离不开实验。电子学本身就是为了指导工程实践。所以不要谈空洞的理论。现在很多毕业生都面临这样的问题，总是谈一些空洞的理论，甚至错误的但还不以为然的理论。实践可以…...

编程日记 2024/4/8 8:31:42

Docker【1】：Docker制作Oracle19C镜像

Docker【1】：Docker制作Oracle19C镜像 1、参考官方文档2、下载相关文件2.1、工具包2.2、Oracle安装包 3、制作镜像3.1、拷贝下载的oracle安装包到制作工具对应版本目录下3.2、开始制作镜像包3.3、制作完成 4、导出导入镜像4.1、镜像导出4.2、镜像导入 5、运行Oracle…...

编程日记 2024/4/8 8:29:39

Layui三级联动插件使用方法

Layui高版本中没有在提供三级联动这个动画了，而是封装成了一个插件，使用方式也很简单官网省市县区三级联动下拉选择器 layarea - Layui 第三方扩展组件平台 (layuion.com)https://dev.layuion.com/extend/layarea/#doc html页面约束整个选择器需要…...

编程日记 2024/4/8 8:27:36

使用iPhone/安卓手机代替门禁卡

文章目录基础知识ID卡和IC卡ID卡技术IC卡技术IC卡加密方式手机NFC只能模拟IC卡，而不支持ID卡电梯卡可能使用滚动码验证方式，不支持使用手机模拟 （IC类型）门禁卡验证方式仅验证ID（卡号）验证ID分区信息 iPho…...

编程日记 2024/4/8 8:26:35

UE4_动画基础_角色的缩放

以第三人称模板进行制作。一、首先为角色缩放新建粒子效果 1、新建niagara system，重命名为NS_Shrink。 2、双击打开设置参数： 发射器重命名： Emitter State： 发射器一次喷发数量： 粒子初始大小，生命周…...

编程日记 2024/4/8 8:25:34

【云开发笔记No.20】中台架构的分类

中台现在成了一个到处都在说的词了，甚至在组织架构中，弄几个万金油，也说有了一个中台支撑部门。一方面是滥用，另一个方面，也说明确实有它的作用和意义。在云计算和数字化转型日益盛行的今天，中台架构已成…...

编程日记 2024/4/8 8:24:33

【leetcode面试经典150题】18.整数转罗马数字（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主，题解使用C语言。（若有使用其他语言的同学也可了解题解思路，本质上语法内容一致&…...

编程日记 2024/4/8 8:23:32

NLopt

非线性优化–NLopt (nonlinear optimization)是一个免费的开源的库，提供了很多种非线性优化算的使用接口。 1、其中非常大的优势就是提供多种支持的语言，包括C/ C/ Julia/ Python/ R/ Fortran/ Lua/ OCaml/ Octave等都支持 1. 区别 **COBYLA&#xff0…...

编程日记 2024/4/8 8:21:28

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...

编程新知 2026/1/27 5:01:54

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

1、uniapp内部的配置：

2、H5端：

相关文章：