h5外部浏览器直接调起app

https://www.cnblogs.com/xyyt/p/6805944.html
记录一下:

1. 安卓端:

图片.png

其中,scheme必须是小写的,同时要求H5必须是“<a href="appback://">启动应用程序</a> ”

2. h5端完整示例:

<a href="javascript:testApp('appback://')" class="dl-btn" id="download">打开APP</a>
    <script>
    function testApp(url) {
          var timeout, t = 1000, hasApp = true;
          setTimeout(function () {
            if (!hasApp) {
                  //未安装app
                  if(browser.versions.ios){
                    window.location.href = '${url_ios}';  //ios下载地址
                }else{
                    window.location.href = '${url_android}';    //安卓下载地址
                   }
            }
            document.body.removeChild(ifr);
          }, 2000)

          var t1 = Date.now();
          var ifr = document.createElement("iframe");
          ifr.setAttribute('src', url);
          ifr.setAttribute('style', 'display:none');
          document.body.appendChild(ifr);
          timeout = setTimeout(function () {
             var t2 = Date.now();
             if (!t1 || t2 - t1 < t + 100) {
               hasApp = false;
             }
          }, t);
        }
        //判断访问终端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }
    </script>

3. ios端——通过URL协议实现从Safari等浏览器中跳转打开你的app
第一步:在info.plist中加入这些内容

image

其中URL identifier 可以随便取,URL Schemes 就是实现跳转URL协议的名称(可以多个)

第二步:在视图控制器中加入这样的代码用于显示跳转过来的地址:

+(void)alert:(NSString*)information{
    UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"提示" message:[NSString stringWithFormat:@"程序通过URL协议打开,该URL为:“%@”",information] delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil];
    [alert show];
    [alert release];
}

第三步:在AppDelegate.m中加入这些代码

-(BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url{
    if(!url){
        return NO;
    }
    
    NSString *urlString=[url absoluteString];
    [ViewController alert:urlString];
    return YES;
}

测试方法:在浏览器中输入“appABC://”之后就会打开这个程序,打开后程序中会显示跳转过来的链接地址。

优化版:

 <a href="fmdisk://feemoo.app/openwith?type=0&id=720024" @click="goApp" class="btn"
       ">打开APP</a>
   goApp() {
          // 安卓端跳转
          var iFrame;
          var url = "fmdisk://feemoo.app/openwith?type=0&id=720024"
          var u = navigator.userAgent;
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          if (isAndroid) {
            //安卓终端使用iframe
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            document.body.appendChild(iFrame);
            // 发起请求后这个 iFrame 就没用了,所以把它从 dom 上移除掉
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
            // 如果用户没有安装APP,则提示用户去安装APP
            setTimeout(() => {
              window.location.href = 'https://www.feimaoyun.com/#/softdown' // 这里可以自行写一个延时关闭的弹窗,也可以跳转至app下载地址
            }, 2000);
          } else if (isiOS) {
            //iOS终端直接页面跳转
            window.location.href = url;
            // 如果用户没有安装APP,则提示用户去安装APP
            setTimeout(() => {
              window.location.href = 'https://www.feimaoyun.com/#/softdown' // 这里可以自行写一个延时关闭的弹窗,也可以跳转至app下载地址
            }, 2000);
          } else {
            window.location.href = url;
          }
        },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容