網頁跳轉APP

需求：
1 從原生APP打開一個H5活動頁，點擊活動頁上的商品圖標，可以回到APP上的商品詳情；
2 從原生APP打開一個H5活動頁，分享到微信朋友圈后，在朋友圈打開后，H5頁面要提示去下載APP；
3 分享一個H5鏈接（比如發送短信附上一個URL），點擊鏈接可以進入APP，未下載APP可以跳轉到APP下載頁面。

代碼實現：

//移動終端瀏覽器版本信息
var browser = {
    versions: function () {
        var u = navigator.userAgent;
        return { 
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            iPhone: u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
            webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
        };
    }()
};

//加載綁定事件
function active(){
    var urldata = GetUrlParam();
    var activeId = +urldata.id || 1;
    console.log("activity id is " + activeId);
    console.log(browser.versions);
    if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
        $("body").on("click", "#app ul li a", function () {
            var id = $(this).attr("data-id");
            window.webkit.messageHandlers.activeToast.postMessage({ body: 'id=' + id , active:'activeId='+activeId});
        });
    } else if(browser.versions.android) {
        $("body").on("click", "#app ul li a", function () {
            var id = $(this).attr("data-id");
            window.android.activeToast(id,activeId);
        });
    } else {
        console.log("showBottom,not opon in webview");
        var html="<div id='bottom'><a href='http://a.app.qq.com/o/simple.jsp?pkgname=com.i_banmei.yym'><div class='tLoad clear'><img class='fl' style='margin:15px;' width='50px' src='../../images/default_logo_512.png' alt=''><div class='con'><p class='content'>伴美整形APP</p><p class='content'>讓求美者找到好醫生</p></div><div class='con con1'><img src='../images/down.png' style='width:75px; margin:0;'></div></div></a></div>"
        $("body").append(html);
    }
}
active();

 

 完整代碼：https://download.csdn.net/download/u013864585/10672590

 

 

 

 

參考:

簡書：通過JS頁面喚醒app（安卓+ios）
https://www.jianshu.com/p/0180e3ee8108

OC與JS交互之WKWebView
https://www.cnblogs.com/markstray/p/5757264.html

JS傳遞值給android/相互傳值
https://blog.csdn.net/meijuanyou/article/details/54973556

 

附加：
JS對象的方法定義了一個函數，並作為對象的屬性存儲。
https://www.cnblogs.com/lcs-java/p/8468642.html

JS function的定義方法，及function對象的理解。
https://www.cnblogs.com/pingchuanxin/p/5722139.html