H5通过URL Scheme协议唤起App

末蓝、 2022-12-01 15:52 283阅读 0赞

### 场景 ###

> 在 h5 页面上，用户点击打开app按钮，如果已经安装了App则打开app，否则引导用户前往应用市场。

### 实现思路 ###

> 在 h5 页面上唤醒app ，需要用到 scheme协议（由app端提供），但是在微信浏览器里scheme不起作用，因此需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后尝试scheme协议唤醒app，如果唤醒失败再转向应用市场。

### URL Scheme协议 ###

URL Scheme是一种页面内跳转协议，通过这个协议可以比较方便的跳转到app某一个页面。

[scheme]://[host][:port]/[path]?[query]
    scheme: 协议名称（由开发人员自定义）(必要，其他都是可选)
    host: 域名
    port：端口
    path: 页面路径
    query： 请求参数

### 代码示例 ###

var userAgent = navigator.userAgent;
    var isWeixin = userAgent.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
    var isAndroid = /(Android)/i.test(userAgent); //android终端
    var isIOS = /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(userAgent); //ios终端
    
    // 微信内
    if (isWeixin) { 
        alert('请在浏览器上打开')
    } else { 
        //android端
        if (isAndroid) { 
            //安卓app的scheme协议
            window.location.href = 'taobao://';
            setTimeout(function () { 
               //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
               window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
            }, 1000);
        }
        //ios端
        if (isIOS) { 
            // 根据时间来判断移动端是否装有app，如果有跳转到和移动端约定好的schema,如果没有装有app则跳转到App Store
            var loadDateTime = Date.now()
            // ios的scheme协议
            window.location.href = 'taobao://'
            //3秒后去App store下载
            setTimeout(function () { 
                 var timeOutDateTime = Date.now()
                 if (timeOutDateTime - loadDateTime < 5000) { 
                    //App store下载地址
                 	window.location.href = "http://itunes.apple.com/app/id387682726";
                 }
            }, 3000);
        }
    }

> weixin：在浏览器输入 weixin://,会调起微信app

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5通过URL Scheme协议唤起App

场景 > 在 h5 页面上，用户点击打开app按钮，如果已经安装了App则打开app，否则引导用户前往应用市场。实现思路 > 在 h5 页面上唤醒app ，需要

末蓝、/ 2022年12月01日 15:52/ 0 赞/ 284 阅读

相关 unity html5唤起app,‎HTML5 Unity Toolbox su App Store

The unity toolbox of HTML5 frameworks. \-Easy to test web server websites on mobile pho

谁践踏了优雅/ 2022年10月11日 03:53/ 0 赞/ 106 阅读

相关 Mui打开android界面,MUI H5+ APP 分享H5连接通过scheme唤醒APP

添加scheme 在manifest.json文件中添加IOS及安卓的scheme节点 //IOS "apple": \{ "appid": "testguangdia

谁践踏了优雅/ 2022年10月05日 13:47/ 0 赞/ 148 阅读

相关 MUI H5+ APP 分享H5连接通过scheme唤醒APP

添加scheme > 在manifest.json文件中添加IOS及安卓的scheme节点 //IOS "apple": { "appid":

秒速五厘米/ 2022年10月01日 09:50/ 0 赞/ 199 阅读

相关常用URL Scheme

系统相关 <table> <thead> <tr> <th>应用名称</th> <th>URL Scheme</th> </tr> </t

旧城等待，/ 2022年08月30日 11:38/ 0 赞/ 90 阅读

相关 ios的URL Scheme

IOS的应用程序是运行相对独立的沙盒里的，并且在后台的应用大部分处于挂起的状态，这样不同应用的交互就成了一个难题。还好苹果提供了一个URL Scheme协议，可以让不同应用互相

柔情只为你懂/ 2022年08月07日 14:43/ 0 赞/ 141 阅读

相关通过自定义的URL Scheme启动你的App

原文地址：[http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-u

桃扇骨/ 2022年07月24日 05:02/ 0 赞/ 132 阅读

相关打开另一个APP（URL Scheme与openURL）

目标平常我们做iOS开发，会经常遇到打开其他的APP的功能。本篇文章讲的就是打开别人的APP的一些知识。我们的目标是：

深碍√TFBOYSˉ_/ 2022年06月01日 13:43/ 0 赞/ 168 阅读

相关 h5移动网页唤起App

[https://www.cnblogs.com/simba-lkj/p/8027809.html][https_www.cnblogs.com_simba-lkj_p_802

迈不过友情╰/ 2022年04月24日 01:06/ 0 赞/ 228 阅读

相关 H5嵌入APP后，通过window.WebViewJavascriptBridge原生APP与H5之间交互

原生APP跳转到H5页面时，往往需要携带一些用户信息，之前做法是在跳转的地址中拼接H5页面需要的参数，现在通过window.WebViewJavascriptBridge悄悄的

╰半橙微兮°/ 2022年02月20日 03:49/ 0 赞/ 590 阅读