資訊專欄INFORMATION COLUMN
摘要：京東的原代碼已經混淆過了，我只能一點點反混淆并注釋。看京東是怎么解決兼容問題的。獲取相對應的如果是微信端直接使用打開如果是如果是如果是安卓瀏覽器延后毫秒判斷版本如果大于必須要使用創建元素返回新創建的對象，具有指定的類型。
從html5打開本地的app--如果本地沒有app就跳轉到下載頁面，大家都會認為這是一項很簡單的操作。網上的教程也很多，但是可行性都不高。因為手機系統和瀏覽器型號各不相同，所以兼容性會是讓各個前端工程師頭疼的問題。我們不妨看一下京東是如何解決的。京東的原代碼已經混淆過了，我只能一點點反混淆并注釋。
網上的文章千篇一律 都是采用window.location.href的方式打開的，但是這種方法的兼容性非常的渣。在ios的safari瀏覽器中無法使用，會出現還未打開app就自動跳轉到下載頁面的情況，影響用戶的使用。那么我們來看一下京東是如何解決兼容性的問題。
下面附上我的代碼翻譯和注釋。
京東打開app的js代碼鏈接
(function(){
// 判斷瀏覽器
var Navigator = navigator.userAgent;
var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version/d+.d+(.d+)?sChrome//i) == null ? true : false;
var ifAndroid = (Navigator.match(/(Android);?[s/]+([d.]+)?/)) ? true : false;
var ifiPad = (Navigator.match(/(iPad).*OSs([d_]+)/)) ? true : false;
var ifiPhone = (!ifiPad && Navigator.match(/(iPhonesOS)s([d_]+)/)) ? true : false;
var ifSafari = (ifiPhone || ifiPad) && Navigator.match(/Safari/);
var version = 0;
ifSafari && (version = Navigator.match(/Version/([d.]+)/));
version = parseFloat(version[1], 10);
// 是否從微信打開
var ifWeixin = navigator.userAgent.indexOf("MicroMessenger") >= 0; // weixin
var j = false;
var iframe = "plugIn_downloadAppPlugIn_loadIframe";
var t = false;
var i = 0;
var B = {};
var b = {};
var selector = null;
var Hquery = {};
// 判斷當前使用的js框架是zepto還是jquery
var Query = window.Zepto || window.jQuery ? true : false;
var g = [];
// 是否存在html5的localStorage 存儲
var v = window.localStorage ? true : false;
var o = "mdownloadAppPlugInskip";
var p = null;
function m() { // 打印時間 例如:2016-5-18
var M = new Date();
var N = M.getFullYear();
var O = M.getMonth() + 1;
var L = M.getDate();
strDate = N + "-" + O + "-" + L;
return strDate
}
// 微信相關操作
function r() { // weixin api
WeixinJSBridge.invoke("getInstallState", {
packageName: "com.jingdong.app.mall",
packageUrl: "openApp.jdMobile://"
}, function(M) {
var N = M.err_msg,
L = 0;
if (N.indexOf("get_install_state:yes") > -1) {
j = true
}
})
}
// 根據是否存在js框架進行dom和時間的綁定
function bind(dom, event, fun) { // bind event
if (Query) {
selector("#" + dom).bind(event, fun)
} else {
selector("#" + dom).addEventListener(event, fun, !1)
}
}
function z(L) {
var M = (L || "mGen") + (++i);
return M
}
// 微信操作
if (ifWeixin) { // if navigitor is weixin
if (window.WeixinJSBridge && WeixinJSBridge.invoke) {
r()
} else {
document.addEventListener("WeixinJSBridgeReady", r, !1)
}
}
// 如果存在js框架
if (Query) {
selector = window.$;
Hquery = window.$
} else {
selector = function(obj) {
if (typeof obj == "object") {
return obj
}
return document.querySelector(obj);
};
if (!window.$) {
window.$ = Hquery = selector
} else {
Hquery = window.$
}
}
window.onblur = function() {
for (var L = 0; L < g.length; L++) {
clearTimeout(g[L])
}
};
// 設置cookie。
function e(N) {
var M = document.cookie.indexOf(N + "=");
if (M == -1) {
return ""
}
M = M + N.length + 1;
var L = document.cookie.indexOf(";", M);
if (L == -1) {
L = document.cookie.length
}
return document.cookie.substring(M, L)
}
// 設置cookie
function l(N, P, L, Q, O) {
var R = N + "=" + escape(P);
if (L != "") {
var M = new Date();
M.setTime(M.getTime() + L * 24 * 3600 * 1000);
R += ";expires=" + M.toGMTString()
}
if (Q != "") {
R += ";path=" + Q
}
if (O != "") {
R += ";domain=" + O
}
document.cookie = R
}
// 打開的鏈接集合
function F(L) {
var url = {
downAppURl: "http://h5.m.jd.com/active/download/download.html?channel=jd-m",
downAppIos: "http://union.m.jd.com/download/go.action?to=http%3A%2F%2Fitunes.apple.com%2Fcn%2Fapp%2Fid414245413&client=apple&unionId=12532&subunionId=m-top&key=e4dd45c0f480d8a08c4621b4fff5de74",
downWeixin: "http://a.app.qq.com/o/simple.jsp?pkgname=com.jingdong.app.mall&g_f=991850",
downIpad: "https://itunes.apple.com/cn/app/jing-dong-hd/id434374726?mt=8",
inteneUrl: "openApp.jdMobile://360buy?type=1",
inteneUrlParams: null,
openAppBtnId: "",
closePanelBtnId: "",
closePanelId: "",
closeCallblack: null,
closeCallblackSource: null,
cookieFlag: null,
noRecord: false,
sourceType: "JSHOP_SOURCE_TYPE",
sourceValue: "JSHOP_SOURCE_VALUE",
openAppEventId: "MDownLoadFloat_OpenNow",
closePanelEventId: "MDownLoadFloat_Close"
};
if (L) {
for (var M in L) {
if (M && L[M]) {
url[M] = L[M]
}
}
}
return url
}
// 敲黑板 重點內容。看京東是怎么解決兼容問題的。
function openApp(N, L) { // openApp
var R = h(N); //獲取相對應的url
var O = null;
if (ifWeixin) { // 如果是微信端
var M = null;
if (j) {
M = R
} else {
M = N.downWeixin
}
location.href = M; // 直接使用location.href打開
return
}
if (ifiPad) { // 如果是ipad
O = N.downIpad
} else {
if (ifiPhone) { // 如果是iphone
O = N.downAppIos
} else {
O = N.downAppURl
}
}
if (ifChrome) { // 如果是chrome
if (ifAndroid) { //安卓瀏覽器
var Q = R;
R = y(Q);
// 延后50毫秒
setTimeout(function() {
window.location.href = R
}, 50)
}
}
if (ifSafari && version >= 9) { // 判斷safari版本 如果大于9
setTimeout(function() { // 必須要使用settimeout
var S = document.createElement("a"); //創建a元素
S.setAttribute("href", R), S.style.display = "none", document.body.appendChild(S);
var T = document.createEvent("HTMLEvents"); // 返回新創建的 Event 對象，具有指定的類型。
T.initEvent("click", !1, !1)// 初始化新事件對象的屬性, S.dispatchEvent(T) // 綁定事件
}, 0)
} else {
document.querySelector("#" + iframe).src = R // 將iframe增加src
}
var P = Date.now();
setTimeout(function() {
if (L) {
var S = setTimeout(function() {
x(P, O)
}, 1500);
g.push(S)
}
}, 100)
}
// x方法
function x(N, downUrl) {
var L = Date.now();
if (N && (L - N) < (1500 + 200)) {
window.location.href = downUrl
}
}
function h(N) {
var V = [];
var P = N.inteneUrlParams;
var T = {
category: "jump",
des: "productDetail"
};
if (N.sourceType && N.sourceValue) {
T.sourceType = N.sourceType;
T.sourceValue = N.sourceValue;
if (P && !P.sourceType && !P.sourceValue) {
P.sourceType = N.sourceType;
P.sourceValue = N.sourceValue
}
}
if (P) {
for (var U in P) {
if (U && P[U]) {
V.push(""" + U + "":"" + P[U] + """)
}
}
} else {
for (var U in T) {
if (U && T[U]) {
V.push(""" + U + "":"" + T[U] + """)
}
}
}
try {
var Q = MPing.EventSeries.getSeries();
if (Q) {
var W = JSON.parse(Q);
W.jdv = encodeURIComponent(e("__jdv"));
W.unpl = encodeURIComponent(e("unpl"));
W.mt_xid = encodeURIComponent(e("mt_xid"));
W.mt_subsite = encodeURIComponent(e("mt_subsite"))
}
var S = {
mt_subsite: encodeURIComponent(e("mt_subsite")),
__jdv: encodeURIComponent(e("__jdv")),
unpl: encodeURIComponent(e("unpl")),
__jda: encodeURIComponent(e("__jda"))
};
Q = JSON.stringify(W);
V.push(""m_param":" + Q);
V.push(""SE":" + JSON.stringify(S))
} catch (R) {
V.push(""m_param":null")
}
var M = "{" + V.join(",") + "}";
var O = N.inteneUrl.split("?");
var L = null;
if (O.length == 2) {
L = O[0] + "?" + O[1] + "¶ms=" + M
} else {
L = O[0] + "?params=" + M
}
return L
}
function y(L) {
return "intent://m.jd.com/#Intent;scheme=" + L + ";package=com.jingdong.app.mall;end"
}
function n(L) {
if (L.openAppBtnId) {
B[L.openAppBtnId] = L;
G(L.openAppBtnId, L.openAppEventId);
bind(L.openAppBtnId, "click", function() {
var P = this.getAttribute("id");
var M = B[P];
if (!t) {
var N = document.createElement("iframe");
N.id = iframe;
document.body.appendChild(N);
document.getElementById(iframe).style.display = "none";
document.getElementById(iframe).style.width = "0px";
document.getElementById(iframe).style.height = "0px";
t = true
}
var O = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
l(O, Date.now() + "_2592000000", 60, "/", "m.jd.com");
l(O, Date.now() + "_2592000000", 60, "/", "m.jd.hk");
openApp(M, true)
})
}
}
function D(M) {
if (M.closePanelBtnId && M.closePanelId) {
B[M.closePanelBtnId] = M;
G(M.closePanelBtnId, M.closePanelEventId);
var Q = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
var O = e(Q);
var P = null;
if (O) {
P = O.split("_");
if (P.length == 2) {
P[0] = parseInt(P[0], 10);
P[1] = parseInt(P[1], 10)
} else {
P = null
}
}
var L = Date.now();
if (Html5Plus() || (!M.noRecord && P && P.length == 2 && (L - P[0]) < P[1])) {
document.querySelector("#" + M.closePanelId).style.display = "none";
if (M.closeCallblack) {
var N = M.closeCallblackSource ? M.closeCallblackSource : null;
M.closeCallblack.call(N)
}
return
} else {
document.querySelector("#" + M.closePanelId).style.display = "block"
}
bind(M.closePanelBtnId, "click", function() {
var U = this.getAttribute("id");
var R = B[U];
var T = R.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + R.cookieFlag : "downloadAppPlugIn_downCloseDate";
if (!R.noRecord) {
l(T, Date.now() + "_259200000", 60, "/", "m.jd.com");
l(T, Date.now() + "_259200000", 60, "/", "m.jd.hk")
}
document.querySelector("#" + R.closePanelId).style.display = "none";
if (R.closeCallblack) {
var S = R.closeCallblackSource ? R.closeCallblackSource : null;
R.closeCallblack.call(S)
}
})
}
}
function Html5Plus() { // htmlplus
if (Navigator.indexOf("Html5Plus") >= 0) {
return true
} else {
return false
}
}
function G(P, M) {
try {
var O = document.getElementById(P);
var L = O.className;
if (L) {
L = L + " J_ping"
} else {
L = "J_ping"
}
O.className = L;
O.setAttribute("report-eventid", M)
} catch (N) {}
}
function C(L) {
var M = F(L);
n(M);
D(M)
}
Hquery.downloadAppPlugIn = C;
Hquery.downloadAppPlugInOpenApp = function(L) {
var M = F(L);
openApp(M);
}
});
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80400.html
摘要：目前市場上主流的分為三種原生即和混合三種，相對應的定制開發就是原生開發開發和混合開發。三混合原生開發混合開發開發，是指在開發一款產品的時候，為了提高效率節省成本而利用原生與的開發技術的混合應用。 目前市場上主流的APP分為三種：原生APP、Web APP（即HTML5）和混合APP三種，相對應的定 制開發就是原生開發、H5開發和混合開發。那么這三種開發模式究竟有何不同呢？...
摘要：之前，下的微信支持這種喚起方式，但是從年月日之后，微信把這個給屏蔽了不管微信基于什么原因，把下這種最便捷的喚起方式屏蔽，我們能做的只能是適應了。微博微博目前還支持喚起，我們只需要考慮未下載的情況。 背景 最近在做微信、QQ、微博中使用js喚起App，之前也做過類似的功能，不過比較粗糙，考慮的情況不太全，而且那已經是很久之前的事情了，很多技術都已過時，現在有體驗更好，功能更加完善的喚起技...
摘要：之前，下的微信支持這種喚起方式，但是從年月日之后，微信把這個給屏蔽了不管微信基于什么原因，把下這種最便捷的喚起方式屏蔽，我們能做的只能是適應了。微博微博目前還支持喚起，我們只需要考慮未下載的情況。 背景 最近在做微信、QQ、微博中使用js喚起App，之前也做過類似的功能，不過比較粗糙，考慮的情況不太全，而且那已經是很久之前的事情了，很多技術都已過時，現在有體驗更好，功能更加完善的喚起技...
閱讀 2320·2021-09-29 09:42
閱讀 556·2021-09-06 15:02
閱讀 2595·2021-09-02 15:40
閱讀 2111·2019-08-30 14:23
閱讀 1860·2019-08-30 13:48
閱讀 1289·2019-08-26 12:01
閱讀 957·2019-08-26 11:53
閱讀 2141·2019-08-23 18:31
