H5喚醒app，第三方開源庫

時間 2020-07-09

標籤 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="width: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-libjavascript

引入js ：css

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

不用再判斷瀏覽器版本，安卓微信會經過應用寶打開，ios會進入appstore。html

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()
                }
        	}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。