首页 > 其他分享 >uniapp-设置UrlSchemes从外部浏览器H5打开app

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

时间:2024-04-02 19:03:20浏览次数:33  
标签:uniapp app H5 height 100% 打包 页面

需求:外部浏览器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/[email protected]/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,app,H5,height,100%,打包,页面
From: https://blog.csdn.net/m0_58953167/article/details/137277739

相关文章

  • Nmap,全称Network Mapper,是一款**开源的网络探索和安全审计工具**。
    Nmap,全称NetworkMapper,是一款开源的网络探索和安全审计工具。Nmap主要用于发现网络中的设备,并识别这些设备上运行的服务和应用程序。它可以帮助用户识别潜在的安全风险,从而采取措施保护网络安全。Nmap支持多种平台,包括Windows、Mac和Linux,因此具有广泛的适用性。以下是Nma......
  • uni-app横屏设置
    1.官网全局设置https://uniapp.dcloud.io/collocation/pages?id=globalstyle"globalStyle":{"pageOrientation":"auto"} 2.某个页面横竖屏设置在manifest.json中添加配置:"orientation":[//竖屏正方向"portrait-primary&quo......
  • 解密Android APP加固过程中的代码混淆技术,实现加固定制化
    AndroidAPP加固是优化APK安全性的一种方法,常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下AndroidAPP加固的具体实现方式。混淆代码使用ipaguard工具可以对代码进行混淆,使得反编译出来的代码很难阅读和理解,官网下载ipaguard即可。加固混淆......
  • Android APP安全加固:深度解析代码混淆在保护应用安全方面的优势与局限性
    AndroidAPP加固是优化APK安全性的一种方法,常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下AndroidAPP加固的具体实现方式。混淆代码使用ipaguard工具可以对代码进行混淆,使得反编译出来的代码很难阅读和理解,官网下载ipaguard即可。加固混淆......
  • 什么是App分发?那些分发平台可以选择?
    App分发指的是将开发完成的应用程序(App)推广和发布到用户可以下载和安装的渠道,以达到更广泛的用户群体,提高应用的知名度和受欢迎程度。这个过程对于开发者来说至关重要,因为它是推广和营销的重要手段之一。App分发的意义在于,让用户能够方便地找到、下载和使用自己需要的App。通过分......
  • [附源码]JAVA计算机毕业设计电影售票app(源码+开题)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,人们的生活方式发生了翻天覆地的变化。特别是在娱乐消费领域,电影作为一种大众喜爱的文化产品,其市场规模逐年扩大。然而,传统的......
  • APP自动化测试-Appium元素定位之元素等待
    一、什么是元素等待元素等待的意义在Appium自动化测试中,元素等待是一个重要的环节。当脚本执行速度较快,而页面元素尚未加载完成时,就会导致脚本无法定位到元素,从而使执行失败。因此需要设置元素等待,从而增强脚本的健壮性,提高执行效率。元素等待的主要目的是确保在执行操作......
  • 盘点那些好用的SAP FIORI App(二) -上传凭证Upload Journal Entry
    前面我有提到过,SAP录入凭证的界面是用户不友好的,并且介绍了几种快速录入的方法,科目分配模型,参考凭证等,但是今天我要讲到的这个app是最实用的,强烈推荐大家使用,因为这个可以用excel的方法直接上传过账,并且不需要额外的定制开发。AppID:F2548点击app进入如下界面,我们可以先......
  • AppStore轻松订阅ChatGPT plus解锁GPT4的方法
    1、登录新账户1.1接着再次点击AppStore中右上角的头像,输入前面注册的美区账号&密码,点击 登录 即可。1.2点击付款方式,可以看到绑定成功的卡。这里我用的是556150的美元虚拟信用卡2、下载ChatGPTApp在AppStore里搜索ChatGPT或点击访问 ‎ChatGPTontheA......
  • uniapp上传图片
     如图:<viewclass="flex-subflex"v-else-if="field.type=='image'||!field.type"> <viewclass="flex-sub"> <imagev-if="form[field.name]":src="form[field.name]"mode="aspectF......