uniapp 自定义App UrlSchemes

news2024/9/20 8:58:57

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

1、uniapp内部的配置:

(1)打开manifest->App常用其他设置,如下,按照提示输入您要设置的urlSchemes:

 (2)填写配置之后,可到manifest->源码试图查看,如下:

 (3)uniapp中修改了manifest配置之后,一定要重新打包,然后再运行到手机,否则可能会出现打开app失败:
问题:如果ios手机出现以下提示,应该是没有重新打包的缘故,如下:

 修改完成后打自定义调试基座运行到手机!!!!

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>

解释:

 部署到服务器:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

3W 1.5KVDC 3KVDC 隔离宽范围输入,单、双输出 DC/DC 电源模块——TP2L-3W 系列

TP2L-3W系列是一款高性能、超小型的电源模块&#xff0c;宽范围2:1,4:1输入&#xff0c;输出有稳压和连续短路保护功能&#xff0c;隔离电压为1.5KVDC、3KVDC工作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方&#xff0c;外部遥控功能对您的设计又多一项…

读源码系列文章--开源项目openjob之alarm告警模块

一、背景 告警模块&#xff0c;作为大多数应用都存在的一个基础功能&#xff0c;今天我们就以开源项目openjob 为例&#xff0c;分析其设计及实现。 首先&#xff0c;我们梳理一下需求&#xff1a; 支持多种告警方式&#xff0c;包括钉钉、飞书、微信和webhook。方便业务模块…

多模态大模型学杂了能力反下降?新研究:MoE+通用专家解决冲突

微调&#xff0c;能让通用大模型更加适配具体的行业应用。 但现在&#xff0c;研究人员们却发现&#xff1a; 对多模态大模型做“多任务指令微调”&#xff0c;大模型可能会“学得多错得多”&#xff0c;因为不同任务之间的冲突&#xff0c;导致泛化能力下降。 △多模态指令微…

扩展学习|一文读懂知识图谱

一、知识图谱的技术实现流程及相关应用 文献来源&#xff1a;曹倩,赵一鸣.知识图谱的技术实现流程及相关应用[J].情报理论与实践,2015, 38(12):127-132. &#xff08;一&#xff09;知识图谱的特征及功能 知识图谱是为了适应新的网络信息环境而产生的一种语义知识组织和服务的方…

WRT1900ACS搭建openwrt服务器小记

参考链接 wrt1900acs openwrt wrt1900acs openwrt 刷机 wrt1900acs原生固件刷openwrt-23.05.3-mvebu-cortexa9-linksys_wrt1900acs-squashfs-factory.img wrt1900acs openwrt更新刷openwrt-23.05.3-mvebu-cortexa9-linksys_wrt1900acs-squashfs-sysupgrade.bin 通过WEB UI来…

linux的信号量的使用

1.信号量 在多线程情况下&#xff0c;线程要进入关键代码就得获取信号量&#xff08;钥匙&#xff09;{sem_init(&sem, 0, 0);}&#xff0c;没有信号量的情况下就一直等待sem_wait(&sem)&#xff0c;只到别人把钥匙&#xff08;sem_post(&sem)&#xff09;给你。 …

从哪些方面可以看出现货黄金价格走势?

现货黄金价格的走势受到多种因素的影响&#xff0c;我们可以从宏观经济环境、货币政策、供需关系、市场情绪和技术分析几个主要方面来观察和分析这一贵金属的价格动态。现货黄金作为全球投资市场中的避险资产&#xff0c;其价格波动往往能体现出复杂的经济和政治变化。 宏观经济…

QT+多线程编程

QT的多线程编程有两种 1、自定义类继承QThread 第一种是自定义一个类继承于QThread&#xff0c;重写run()方法来实现。然后当需要使用线程的时候你就新建一个自定义对象&#xff0c;然后调用start方法开始运行。 下面的例子是widget里面创建一个线程&#xff0c;然后调用sta…

【docker】常用的把springboot打包为docker镜像的maven插件

Spring Boot Maven Plugin: Spring Boot 自带的 Maven 插件 (spring-boot-maven-plugin) 支持直接生成 Docker 镜像。通过配置&#xff0c;可以在 Maven 构建过程中自动构建 Docker 镜像&#xff0c;而无需单独编写 Dockerfile。这种方法简化了将应用打包为 Docker 镜像的过程。…

2024年第七届大数据技术国际会议(ICBDT 2024)即将召开!

2024年第七届大数据技术国际会议&#xff08;ICBDT 2024&#xff09;将于2024年9月20-22日在中国杭州的浙江工商大学举行。数据驱动未来&#xff0c;技术引领潮流。从数据挖掘算法的优化&#xff0c;到数据处理速度的提升&#xff0c;再到数据安全与隐私保护的进步&#xff0c;…

男士内裤品牌哪个好?口碑最好的男士内裤汇总

许多男士选内裤可能比较随意&#xff0c;但实际上作为长时间贴合身体皮肤的贴身衣物&#xff0c;经常会出很多汗。而普通的内裤会吸附很多汗水却不易干&#xff0c;导致细菌含量超标&#xff0c;摩擦力增强&#xff0c;容易造成破皮感染从而影响健康。 但是现在的男士内裤种类和…

专注 APT 攻击与防御——红蓝对抗渗透测试

在团体渗透测试的项目中&#xff0c;如红蓝对抗&#xff0c;团队渗透测试比赛等&#xff0c;最重要的是过程与结果实时共享于团队&#xff0c;例如&#xff1a;A同学nmap目标站&#xff0c;B同学也nmap目标站&#xff0c;这在对抗比赛中是极其浪费时间也是非常容易引起防火墙&a…

吴恩达2022机器学习专项课程C2(高级学习算法)W1(神经网络):2.4 神经网络层

目录 神经网络第一层&#xff08;隐藏层&#xff09;计算过程1.输入向量2.神经元的计算2.标识不同神经元3.层输出&#xff08;激活&#xff09;向量4.神经网络分层5.标识不同层 神经网络第二层&#xff08;输出层&#xff09;计算过程1.输入向量2.层输出&#xff08;激活&#…

Java反序列化-CC11链

前言 这条链子的主要作用是为了可以在 Commons-Collections 3.2.1 版本中使用&#xff0c;而且还是无数组的方法。这条链子适用于 Shiro550漏洞 CC11链子流程 CC2 CC6的结合体 CC2 这是CC2的流程图&#xff0c;我们取的是后面那三个链子&#xff0c;但是由于CC2 只能在 c…

美易官方:英伟达业绩将难以撑起股价?

美股市场似乎总是对各大公司的业绩表现抱有极大的期待&#xff0c;就像一个永远填不饱的“巨胃”。在这样的市场环境下&#xff0c;即使是业绩骄人的公司也可能难以支撑其股价。英伟达&#xff0c;这家在图形处理单元&#xff08;GPU&#xff09;领域享有盛誉的公司&#xff0c…

echarts双Y轴,并实现图例等

一个Y轴时yAxis为对象 yAxis: {type: value,name: 占比(%) },两个Y轴时yAxis为数组 yAxis: [{ // 左侧的type: value,name: 占比(%),nameTextStyle: {padding: [0, 0, 10, -50]},min: 0,max: 100,splitNumber: this.splitNumber, // 设置坐标轴的分割段数interval: 20, // 标轴…

doris经典bug

在部署完登录web页面查看的时候会发现只有一个节点可以读取信息剩余的节点什么也没读取到 在发现问题后&#xff0c;我们去对应的节点去看log日志&#xff0c;发现它自己绑定到前端的地址上了 现在我们已经发现问题了&#xff0c;以下就开始解决问题 重置doris 首先对be进行操…

一键 input 苹果 OpenELM,零门槛 Llama 3 教程,40+ 优质模型/数据集/教程,建议收藏!...

现在 AI 行业什么最火&#xff1f; 「大模型」一定仍然排在前三甲的位置。 自从 2022 年底 ChatGPT 面世以来&#xff0c;大模型在各行各业已经带来了太多的惊喜&#xff0c;应用场景愈发丰富&#xff0c;同时也带动了相关底层技术的普及与普适化。尤其是在开源模型繁荣发展之下…

解决 SyntaxError: Unexpected token ‘.‘ 报错问题

这个报错一般是编译问题&#xff0c;浏览器的版本过低没通过代码 解决办法&#xff1a; 在package.json文件中加上这个 "browserslist": ["> 1%","last 2 versions","not dead","not ie < 6","Android > 4&…

TradingView 使用方法

【前言】最近项目中用到了Tradingview中的K线图,基于以前从未使用过,写此篇文章记录一下Tradingview的使用。 【目标】 1 会使用Tradingview中k线图的渲染方式 2 了解一些基本的用法 一 简介 Tradingview是一个价格图表和分析软件,提供免费和付费选项,为优秀的交易技术分析…