如何在HTML网页中调起APP

对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的

myapp://

myapp://open

myapp://type=1&id=2sdeo223lwe

这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。

//实际上就是新建一个iframe的生成器

var  createIframe=(function(){

  var iframe

    return function(){

        if(iframe){

            return iframe

        }else{

            iframe = document.createElement('iframe')

            iframe.style.display = 'none'

            document.body.appendChild(iframe)

            return iframe      

        }

    }

})()

之后我们还需要一个url scheme:

//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的

var baseScheme = "myApp://"

var createScheme=function(options){

    var urlScheme=baseScheme

    for(var item in options){

        urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&"

    }

    urlScheme = urlScheme.substring(0, urlScheme.length - 1)

    return encodeURIComponent(urlScheme)

}

这种scheme形式的其实不是最好的,根据我们踩过的坑，觉得约定为与http协议相近可能更好一些，具体的协议需要前端人员自己去和app端人员约定。

ok万事具备，iframe有了，urlScheme也有了，该去打开app了

var openApp=function(){

    var localUrl=createScheme()

    var openIframe=createIframe()

    if(isIos()){

        //判断是否是ios,具体的判断函数自行百度

        window.location.href = localUrl

        var loadDateTime = Date.now()

        setTimeout(function () {

            var timeOutDateTime = Date.now()

            if (timeOutDateTime - loadDateTime < 1000) {

                window.location.href = "你的下载页面"

            }

        }, 25)

    }else if(isAndroid()){

        //判断是否是android，具体的判断函数自行百度

        if (isChrome()) {

            //chrome浏览器用iframe打不开得直接去打开，算一个坑

            window.location.href = localUrl

        } else {

            //抛出你的scheme

            openIframe.src = localUrl

        }

        setTimeout(function () {

            window.location.href = "你的下载页面"

        }, 500)

    }else{

        //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊

        openIframe.src = localUrl

        setTimeout(function () {

            window.location.href = "你的下载页面"

        }, 500)

    }

}

以上就是你要打开scheme的主要代码了，好吧，实际上不只是打开app，还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去，而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本，呵呵，这是多老的ios版本的表现了，实际上现在的ios已经没有这么做，有些版本会跟安卓的表现一样，而有些则是直接跳转根本不会去打开，还有打开的时候那个恶心的系统d窗是什么鬼。好吧，实际上至此你会发现，ios9.0以上的有些打不开直接跳，有些打得开还会有允许d窗，而微信则是无论如何都打不开，实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store。

转自：《怎么在网页中打开你的app》@AlfredMou -- segmentfault

如下：

首先APP把自己注册为某网址的打开方式，比如abcdef://xxxxxx之类的。前面一段abcdef可以随意瞎改，只要不与其他应用冲突就行。

然后网页里跳转到adcdef://xxxxxx这个链接，浏览器无法打开此链接(浏览器一般只能打开http https ftp)，就会把这个链接扔给系统，系统会根据默认打开方式扔给应用打开。

Deeplink在实际运用中的效果

Deeplink（深度链接）能被运用于任意渠道触点（微信、QQ、微博、短信、邮箱、各大浏览器、其他App等），直接从这些平台跳转至目标内容页，省去中间“打开App首页”“搜索页面”等无效步骤。

深度链接（Deeplink）对于“App社交分享、裂变传播转化、沉默用户唤醒、用户流失召回、短信邮箱营销、地推首单激活、搜索引擎引流”等运营场景都有着奇效，一方面能快速实现场景还原，带来更高效的用户体验。

官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22

Vue中使用：

https://blog.csdn.net/qq_35537652/article/details/110368520?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

https://blog.csdn.net/jane900/article/details/107410321

用于页面中提供一个可跳转指定App的按钮。

此功能仅开放给 已认证的服务号 ，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转满足一定条件的App。在使用该标签之前，首先需要前往 微信开放平台 的 管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置 中绑定所需要跳转的App。详细配置规则参考文档 《微信内网页跳转APP功能》 。

备注：对于 extinfo 属性，用于携带额外信息，格式自定义，由跳转的App自⾏解析处理。对应iOS微信openSDK中的messageExt字段（LaunchFromWXReq.message.messageExt），或对应Android微信openSDK中的messageExt字段（ShowMessageFromWX.Req.message.messageExt），详细参见文档 《App获取开放标签<wx-open-launch-app>中的extinfo数据》 。

备注： error 事件返回值 errMsg 说明如下。

---