uniapp 自定义App UrlSchemes

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

1、uniapp内部的配置:

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

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

(3)uniapp中修改了manifest配置之后,一定要重新打包,然后再运行到手机,否则可能会出现打开app失败:

问题:如果ios手机出现以下提示,应该是没有重新打包的缘故,如下:

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

2、H5端:

(1)H5页面代码(全)

html 复制代码
<!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>

解释:

部署到服务器:

相关推荐
程序员海军4 分钟前
沪漂五周年了:我越来越迷茫了
前端·人工智能·后端
一天 24h17 分钟前
Vue3父子组件传值:从零到精通
前端·javascript·vue.js·pycharm·npm·学习方法
大家的林语冰24 分钟前
CSS 新函数上市,一行代码让文本自动变色,无需 JS 也能符合 W3C 无障碍对比度标准
前端·javascript·css
爱勇宝24 分钟前
前端工程师的下一站:不是失业,而是 AI Engineer
前端·javascript·架构
小雨下雨的雨34 分钟前
电池电量检测工具 - 鸿蒙PC用Electron框架技术实现详解
前端·javascript·华为·electron·鸿蒙·鸿蒙系统
DFT计算杂谈39 分钟前
VASP 磁性结构可视化:一键生成完美 VESTA / MCIF
java·前端·css·html·css3
小李云雾1 小时前
Vue Router 从入门到精通:路由核心知识点全解析
前端·javascript·vue.js
每天吃饭的羊1 小时前
LeetCode JS 常用辅助数据结构
前端
丑过三八线1 小时前
【无标题】
前端
岳哥i1 小时前
uniapp打包原生App流程及兼容性适配
uni-app