zoukankan      html  css  js  c++  java
  • H5唤醒app,第三方开源库

    在微信浏览器内,安卓打开应用宝,ios跳进appstore,基本都可以成功
    在外部浏览器内,已安装可进入应用内,未安装进入应用宝提示下载,需客户端支持。
    <!
    DOCTYPE html> <!-- saved from url=(0034)https://www.zihexin.net/m/?c=11111 --> <html class="" id="htmlf" style="font-size: 455.556px;"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>app介绍</title> <script src="../js/jquery.min.js"></script> <script src="../js/clipboard.min.js"></script> <script src="https://unpkg.com/callapp-lib@2.1.5/dist/index.umd.min.js"></script> <link href="../css/m_style.css" rel="stylesheet" type="text/css"> </head> <body onclick="copydata()" data-clipboard-text="bar" id='bodyBar'> <style> section p{ padding-left:0;} section{ padding-top:0.2rem;} body{cursor:pointer;} </style> <div class="gridContainer"> <footer class="dow" id="dow" style="display: none;"> <p></p> <article>请点击本页面右上角选择使用浏览器打开即可</article> </footer> <script> var u = navigator.userAgent, app = navigator.appVersion; if(!(u.indexOf('MicroMessenger') > -1)){ document.getElementById("dow").style.display="none"; } </script> <div class="f_dingbu"><a href="javascript:;"><img style="100%;" src="../images/appxiazai_01.png"></a></div> <header id="dow_a" > <img src="../images/appxiazai_02.png" alt="app下载广告图" > </header> <ul class="uls"> <li class="lis"> <img src="../images/appxiazai_03.png" alt=""> </li> <li class="lis"> <img src="../images/appxiazai_04.png" alt=""> </li> <li class="lis"> <img src="../images/appxiazai_05.png" alt=""> </li> <li class="lis"> <img src="../images/appxiazai_06.png" alt=""> </li> </ul> </div>
    </body>
    </
    html>

    第三方开源实现库:https://github.com/suanmei/callapp-lib

    引入js :

    <script src="https://unpkg.com/callapp-lib@2.1.5/dist/index.umd.min.js"></script>

    不用再判断浏览器版本,安卓微信会通过应用宝打开,ios会进入appstore。

    var Terminal={};
    const options = {
            scheme: {
    		protocol:'zihexin://openapp',//和安卓ios统一的,openapp表示唤起,安卓ios配openapp之前的zihexin://
    		},
            intent: {
                package: '',
                scheme: '',
            },
            timeout: 3000,
            appstore: 'https://itunes.apple.com/cn/app/zi-he-xin/id581817870?mt=8',//appstore地址
            yingyongbao: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zihexin',//应用宝地址
            fallback: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.zihexin',//唤起应用失败,未安装时跳转到应用宝地址
        };
           const callLib = new CallApp(options);
            var clipboard = new Clipboard('#bodyBar');
            clipboard.on('success', function(e) {
                e.clearSelection();
            });
    
            clipboard.on('error', function(e) {
                
            });
            function copydata(){
                var url = window.location;
                $('#bodyBar').attr('data-clipboard-text',url);
    			 callLib.open({path:''})
            }
    		 // 获取终端的相关信息可不用
            window.onload=function(){
                     Terminal = {
                        // 辨别移动终端类型
                        platform : function(){
                            return {
                                // android终端或者uc浏览器
                                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                                // 是否为iPhone或者QQHD浏览器
                                iPhone: u.indexOf('iPhone') > -1 ,
                                // 是否iPad
                                iPad: u.indexOf('iPad') > -1,
                                //是否为微信
            					mic:u.indexOf('MicroMessenger') > -1,
                            };
                        }(),
            	 language:(navigator.browserLanguage || navigator.language).toLowerCase()
                    }
            	}
    

      

  • 相关阅读:
    兼容火狐几秒后跳转页面
    js 利用sina ip库获取ip及通信服务商
    jQuery.validate 中文API
    s:select标签的Map形式使用
    【原创随笔】reCAPTCHA加密验证Email地址,正确才可完整查看地址!
    eclipse编辑jsp文件和javascript代码很卡解决办法
    oracle 10 R2 静默安装 + psu
    【容易成功的十种能力你具备几种
    CentOS 新虚拟机网卡设置
    【与人沟通的技巧很重要】
  • 原文地址:https://www.cnblogs.com/SimonHu1993/p/10578775.html
Copyright © 2011-2022 走看看