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

需求:外部浏览器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固定页面,如下:
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/599696.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

提取COCO数据集中特定的类—vehicle 4类

提取COCO数据集中特定的类—vehicle 4类 1 安装pycocotools2 下载COCO数据集3 提取特定的类别4 多类标签合并 1 安装pycocotools pycocotools github地址 pip install githttps://github.com/philferriere/cocoapi.git#subdirectoryPythonAPI2 下载COCO数据集 COCO官网下载2…

【Java多线程(4)】案例:设计模式

目录 一、什么是设计模式&#xff1f; 二、单例模式 1. 饿汉模式 2. 懒汉模式 懒汉模式-第一次改进 懒汉模式-第二次改进 懒汉模式-第三次改进 一、什么是设计模式&#xff1f; 设计模式是针对软件设计中常见问题的通用解决方案。它们提供了一种被广泛接受的方法来解决…

GEE数据集—— 2020 年全球森林覆盖图10 米的空间分辨率

简介 欧洲共同体联合研究中心的全球森林覆盖图以 10 米的空间分辨率提供了 2020 年森林存在和不存在的明确空间表示。 2020 年是欧盟 "关于在欧盟市场上提供和从欧盟出口与毁林和森林退化相关的某些商品和产品 "的条例&#xff08;EUDR&#xff0c;条例&#xff08…

vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户

1.后端返回的json数据结构为&#xff1a; {"message":"下载失败&#xff0c;下载文件不存在&#xff0c;请联系管理员处理&#xff01;","code":500} 2.vue 请求后台接口返回的 Blob数据 3.问题出现的原因是&#xff0c;正常其他数据列表接口&…

AcWing 1388. 游戏(每日一题)

原题链接&#xff1a;1388. 游戏 - AcWing题库 玩家一和玩家二共同玩一个小游戏。 给定一个包含 N 个正整数的序列。 由玩家一开始&#xff0c;双方交替行动。 每次行动可以在数列的两端之中任选一个数字将其取走&#xff0c;并给自己增加相应数字的分数。&#xff08;双方…

ctfshow web入门 命令执行 web53--web77

web53 日常查看文件 怎么回事不让我看十八 弄了半天发现并不是很对劲&#xff0c;原来我发现他会先回显我输入的命令再进行命令的回显 ?cnl${IFS}flag.php||web54 绕过了很多东西 基本上没有什么命令可以用了但是 grep和?通配符还可以用 ?cgrep${IFS}ctfshow${IFS}???…

hadoop分布式计算组件

什么是计算、分布式计算&#xff1f; 计算&#xff1a;对数据进行处理&#xff0c;使用统计分析等手段得到需要的结果 分布式计算&#xff1a;多台服务器协同工作&#xff0c;共同完成一个计算任务 分布式计算常见的2种工作模式 分散->汇总(MapReduce就是这种模式)中心调…

一起学习python——基础篇(8)

今天讲一下python的关键字。 关键字是什么&#xff1f;关键字是有特别意义的标识符&#xff08;编程语言事先定义好的&#xff09;&#xff0c;也叫保留字。关键字不能用作变量名&#xff0c;函数名&#xff0c;参数。 关键字有哪些&#xff1f;我大概列一下&#xff1a;if、…

KingbsaeES数据库分区表的详细用法

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 分区表是一种将大型数据库表拆分为更小、更可管理的部分的技术。它通过将表数据分散存储到多个物理存储单元中&#xff0c;可以提高查询和数据维护的性能&#xff0c;并优化对大型数据集的处理。本篇文章以kingbase为…

4月7号总结

java学习 一.正则表达式 定义&#xff1a;正则表达式是一种用于描述字符串模式的表达式&#xff0c;通常被用于文本搜索、匹配和替换。它是一种强大的工具&#xff0c;可以在文本处理和文本分析中进行复杂的匹配和操作。 通过字符串引用里面的方法matches&#xff0c;然后执行…

多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测

多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络…

有原则的程序员如何超越竞争对手(附演讲视频》

接受干净的编码实践&#xff0c;建立可维护的代码结构&#xff0c;并有效地管理自己&#xff0c;对于成为当今专业行业中具有竞争力和受欢迎的程序员至关重要。 在本指南中&#xff0c;我们将探讨每个熟练的程序员都应该精通的基本编码主题&#xff1a; - 遵守编程标准 …