fastman3-dfyjapp-callapp
Version:
h5 call app
390 lines • 16.4 kB
JavaScript
/*
* @Author: zhangkunjie
* @Date: 2021-10-22 16:00:05
* @Company: orientsec.com.cn
* @Description: callapp基础库
*/
import { isFromWeiBo, isFromApp, getQueryString, isFromWeiXin, detect } from "./utils";
import CallApp from "callapp-lib";
var g_Transfer_URLS = {};
var newCallLib = new CallApp({
scheme: {
protocol: "dfyj20170811"
},
appstore: "https://itunes.apple.com/cn/app/id961539789",
yingyongbao: "//a.app.qq.com/o/simple.jsp?pkgname=com.dfzq.winner",
fallback: "https://cfyjh5-v3.dfzq.com.cn/html5-marketing/marketing-install/index.html",
timeout: 3000,
// Universal Link，该配置仅用于iOS平台使用
universal: {
// 生产环境
host: "appullinks.dfzq.com.cn"
// // 测试环境
// host: "h5itest1.dfzq.com.cn"
}
});
// 非app展示
var openButtonHtml = function openButtonHtml() {
var footer = document.createElement("div");
footer.className = "shareNavigation-footer";
document.body.appendChild(footer);
var html = document.createElement("div");
html.className = "ui-row-flex shareNavigation";
html.id = "wraper";
document.body.appendChild(html);
var iconTtml = document.createElement("div");
var span1 = document.createElement("span");
span1.innerText = "东方证券";
var span2 = document.createElement("span");
span2.innerText = "悦享投资之美";
iconTtml.className = "logoImage";
var iconWraperhtml = document.createElement("div");
iconWraperhtml.className = "ui-col-2";
var logoTextHtml = document.createElement("div");
logoTextHtml.className = "logoText";
logoTextHtml.appendChild(span1);
logoTextHtml.appendChild(span2);
var buttonWraperhtml = document.createElement("div");
var buttonHtml = document.createElement("button");
buttonHtml.innerText = "立即打开";
buttonWraperhtml.className = "open";
buttonWraperhtml.id = "btn";
iconWraperhtml.appendChild(iconTtml);
iconWraperhtml.appendChild(logoTextHtml);
buttonWraperhtml.appendChild(buttonHtml);
html.appendChild(iconWraperhtml);
html.appendChild(buttonWraperhtml);
};
// 微信展示
var weiXinPanel = function weiXinPanel() {
var bottomText = detect.os.ios ? "在默认浏览器中打开" : "在浏览器中打开";
var weixinPanelHtml = document.createElement("div");
weixinPanelHtml.id = "weixinPanel";
document.body.appendChild(weixinPanelHtml);
var imgWraperTtml = document.createElement("div");
imgWraperTtml.id = "arraw";
var imgHtml = document.createElement("div");
imgHtml.className = "img";
imgWraperTtml.appendChild(imgHtml);
var pHtml = document.createElement("p");
pHtml.innerText = "\u8BF7\u70B9\u51FB\u53F3\u4E0A\u89D2\u6309\u94AE\uFF0C\u9009\u62E9".concat(bottomText);
weixinPanelHtml.appendChild(imgWraperTtml);
weixinPanelHtml.appendChild(pHtml);
};
// const alertPannel=(params:AlertParams)=>{
// const wraperPananelHtml=document.createElement('div');
// wraperPananelHtml.id="wraper_pannel"
// const alertWraperHtml=document.createElement('div');
// alertWraperHtml.id="alert_id";
// document.body.appendChild(wraperPananelHtml);
// const alertMainHtml=document.createElement('div');
// alertMainHtml.id="alert_main"
// const alertContentHtml=document.createElement('p');
// const alertTitleHtml=document.createElement('p')
// alertTitleHtml.id='alert_title_id';
// alertContentHtml.id='alert_conten';
// alertContentHtml.innerText="您还未下载东方赢家APP,您可以先开立账户,后续下载APP进行交易"
// alertMainHtml.append(alertContentHtml,alertTitleHtml);
// const alertButtonHtml=document.createElement('div');
// alertButtonHtml.id="btn_wraper"
// const cancelButtonHtml=document.createElement("button");
// cancelButtonHtml.id='cancel_id';
// cancelButtonHtml.innerText="取消";
// const confirmButtonHtml=document.createElement("button");
// confirmButtonHtml.id='confirm_id';
// confirmButtonHtml.innerText="立即开户";
// alertButtonHtml.append(cancelButtonHtml,confirmButtonHtml)
// alertWraperHtml.append(alertMainHtml,alertButtonHtml)
// wraperPananelHtml.append(alertWraperHtml)
// }
var callBack = function callBack(params) {
if (params === void 0) {
params = {};
}
var configuration = params.configuration;
// 要跳转的地址和配置的中转页集合
var router_url, transerUrls;
// 当前地址是否带有渠道号 且渠道号有值
if (location.href.indexOf("trackChannel") !== -1 && getQueryString("trackChannel")) {
// 判断是v1,v2和v3
if (configuration) {
transerUrls = configuration === null || configuration === void 0 ? void 0 : configuration.callAppPluginConfig.Transfer_URLS;
} else {
transerUrls = g_Transfer_URLS;
}
for (var i in transerUrls) {
if (i.replace(/\"/g, "") === getQueryString("trackChannel")) {
router_url = transerUrls[i];
} else {
alert("未找到对应地址");
router_url = getDefaulturl(configuration);
}
}
} else {
router_url = getDefaulturl(configuration);
}
return router_url.replace(/\"/g, "");
};
var getDefaulturl = function getDefaulturl(configuration) {
var default_route_url;
if (detect.os.ios) {
if (configuration) {
default_route_url = configuration === null || configuration === void 0 ? void 0 : configuration.callAppPluginConfig.DEFAULT_DOWNLOAD_IOS_URL;
} else {
default_route_url = "https://cfyjh5-v3.dfzq.com.cn/html5-marketing/marketing-install/index.html";
}
} else {
if (configuration) {
default_route_url = configuration === null || configuration === void 0 ? void 0 : configuration.callAppPluginConfig.DEFAULT_DOWNLOAD_URL;
} else {
default_route_url = "https://cfyjh5-v3.dfzq.com.cn/html5-marketing/marketing-install/index.html";
}
}
return default_route_url.replace(/\"/g, "");
};
/**
* 基础唤起app函数
* @param params
* @param path 唤起app的路径
*/
var baseCallApp = function baseCallApp(params, path) {
if (params === void 0) {
params = {};
}
if (isFromWeiBo()) {
weiXinPanel();
var weixinAllHtml_1 = document.getElementById("weixinPanel");
weixinAllHtml_1 === null || weixinAllHtml_1 === void 0 ? void 0 : weixinAllHtml_1.addEventListener("click", function () {
document.body.removeChild(weixinAllHtml_1);
});
} else if (isFromWeiXin()) {
weiXinPanel();
var weixinAllHtml_2 = document.getElementById("weixinPanel");
weixinAllHtml_2 === null || weixinAllHtml_2 === void 0 ? void 0 : weixinAllHtml_2.addEventListener("click", function () {
document.body.removeChild(weixinAllHtml_2);
});
} else {
newCallLib.open({
path: path,
callback: function callback() {
location.href = callBack(params);
}
});
}
};
/**
* 获取url 查询参数或hash后面的查询参数，返回键值对
* @param url
* @returns object
*/
var getURLParameters = function getURLParameters(url) {
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
return a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1), a;
}, {});
};
/**
* UniversalLink链接生成器
* @returns 返回一个iOS可解析的 universalUrl
*
* 采用三次编码约定：（针对<5.9.0的iOS版本，使用open=来接受，可使用 https://websanova.com/utils/url 进行测试）
* 步骤一. 对目标地址（https://{domain}/{path}/?qs#/hash?qs）中2个 qs 部分进行编码形成 queryStringEncoder；
* 步骤二. 再对 https://{domain}/{path}/?queryStringEncoder 进行编码形成 targetUrlEncoder；
* 步骤三. 再对 dfyj20170811://dl/wb?url=targetUrlEncoder 进行再编码形成 schemaUrlEncoder；
* 步骤四. 最终形成规范地址：https://appullinks.dfzq.com.cn/dfyjlink?open=schemaUrlEncoder；
*
* 采用二次编码约定：（针对>=5.9.0的iOS版本，使用callapp=来接受）
* 步骤一. 对 location.href 进行编码形成 targetUrlEncoder；
* 步骤二. 对 dfyj20170811://dl/wb?url=targetUrlEncoder 进行再编码形成 schemaUrlEncoder；
* 步骤三. 最终形成规范地址：https://appullinks.dfzq.com.cn/dfyjlink?open=schemaUrlEncoder；
*
* 注意：open和callapp需要同时携带在url上，open=用于<5.9.0的兼容，callapp=则是用于>=5.9.0的兼容
*/
var universalurl = function universalurl(targetUrl) {
// 情况1：http://192.168.114.160:10086/?recommend=1&appversion=5.7.3#/pages/fundSubscribeDetail/index?prodCode=000395
// 情况2：http://192.168.114.160:10086/?recommend=1&appversion=5.7.3#/pages/fundSubscribeDetail/index
// 情况3：http://192.168.114.160:10086/#/pages/fundSubscribeDetail/index?prodCode=000395
// 经分析，hash部分中可能存在 qs，同时 qs 也可能出现在标准体html后！另外 recommend 和 appversion 作为原生分享出来的派生参数。
// @ts-ignore
var parser = window.url;
if (!targetUrl) {
targetUrl = location.href;
}
console.log("[UL]targetUrl: " + targetUrl);
// 兼容 <5.9.0 的iOS版本
// 步骤一
// 页面标准的 qs 编码
var queryString = parser("query", targetUrl) || "";
var queryStringEncoder = "";
if (queryString) {
console.log("[UL]queryString: " + queryString);
queryStringEncoder = window.encodeURIComponent(queryString);
targetUrl = targetUrl.replace(queryString, queryStringEncoder);
}
// 页面标准的 hash 编码，需带#
var hash = parser("hash", targetUrl);
var hashEncoder = "";
if (hash) {
// 检测 hash 部分中是否包含 qs 部分
var hashQsString = parser("query", hash);
if (hashQsString) {
console.log("[UL]hashQsString: " + hashQsString);
var hashQsStringEncoder = window.encodeURIComponent(hashQsString);
targetUrl = targetUrl.replace(hashQsString, hashQsStringEncoder);
}
}
// 步骤二
var targetUrlEncoder = window.encodeURIComponent(targetUrl);
console.log("[UL]targetUrlEncoder: " + targetUrlEncoder);
// 步骤三
var schemaUrlEncoder = window.encodeURIComponent("dfyj20170811://dl/wb?url=".concat(targetUrlEncoder));
console.log("[UL]schemaUrlEncoder: " + schemaUrlEncoder);
// 步骤四
var universalLink = "https://appullinks.dfzq.com.cn/dfyjlink?open=".concat(schemaUrlEncoder);
console.log("[UL]universalLink: " + universalLink);
// 兼容 >=5.9.0 的iOS版本
// 步骤一
// 对 location.href 进行编码形成 targetUrlEncoder
// const targetUrlEncoder2 = window.encodeURIComponent(location.href);
var targetUrlEncoder2 = window.encodeURIComponent(targetUrl);
console.log("[UL]targetUrlEncoder2: " + targetUrlEncoder2);
// 步骤二. 对 dfyj20170811://dl/wb?url=targetUrlEncoder 进行再编码形成 schemaUrlEncoder；
var schemaUrlEncoder2 = window.encodeURIComponent("dfyj20170811://dl/wb?url=".concat(targetUrlEncoder2));
console.log("[UL]schemaUrlEncoder2: " + schemaUrlEncoder2);
// 步骤三
var universalLink2 = "".concat(universalLink, "&callapp=").concat(schemaUrlEncoder2);
console.log("[UL]universalLink2: " + universalLink2);
return universalLink2;
};
/**
* 唤起app打开当前location.href
* @param params fastmanV3时不用传
*/
var callAppLH = function callAppLH(params) {
if (params === void 0) {
params = {};
}
// if (detect.os.ios && isFromWeiXin()) {
if (detect.os.ios) {
// location.href = universalurl();
iosCallApp(location.href);
} else {
baseCallApp(params, "dl/wb?url=".concat(encodeURIComponent(location.href)));
}
};
/**
* 通过 Universal Link 唤起 iOS 端应用，若唤起失败则跳转至下载页
* @param targetUrl - 需要打开的原始目标链接地址
*/
var iosCallApp = function iosCallApp(targetUrl) {
var targetUniversalLinkUrl = universalurl(targetUrl);
// 示例targetUniversalLinkUrl：https://appullinks.dfzq.com.cn/dfyjlink/?open=dfyj20170811%3A%2F%2Fdl%2Fwb%3Furl%3Dhttp%253A%252F%252F192.168.92.217%253A10086%252F%2523%252Fpages%252FfundPurchaseDetail%252Findex&callapp=dfyj20170811%3A%2F%2Fdl%2Fwb%3Furl%3Dhttp%253A%252F%252F192.168.92.217%253A10086%252F%2523%252Fpages%252FfundPurchaseDetail%252Findex
// 非pathKey模式，Universal Link 拼接规则：const universalLink = `https://${host}/${open方法中的path}?${open方法中param转换的queryString}`;
// @ts-ignore
var parser = url;
try {
// 解析 Universal Link 中的查询参数部分
var param = parser("?", targetUniversalLinkUrl) || {};
// 提取 Universal Link 中的路径部分
var path = parser("1", targetUniversalLinkUrl);
console.log("[UL]path: " + path);
console.log("[UL]param: " + JSON.stringify(param));
// 调用唤端库进行 App 唤起操作
newCallLib.open({
path: path,
param: param,
callback: function callback() {
// 自定义唤端失败回调函数：进入下载页
console.log("自定义唤端失败回调函数：进入下载页");
// 跳转至App下载页
location.replace("https://cfyjh5-v3.dfzq.com.cn/html5-marketing/marketing-install/index.html");
}
});
} catch (err) {
// 容错保护，一旦发生parser解析异常，最低限度确保用户可以跳转，而不会引导跳转下载页
location.href = targetUniversalLinkUrl;
}
};
/**
* fastmanV3函数，浏览器唤起app打开url
* @param callUrl 打开的url,默认为当前页面的地址，原生界面时调用dfyjdfyj20170811://前缀
*/
var callAppUrlV3 = function callAppUrlV3(callUrl) {
if (callUrl === void 0) {
callUrl = window.location.href;
}
var path = callUrl;
if (/^dfyj/.test(callUrl)) {
// 判断是否原生指令
path = callUrl.replace("dfyj://", "");
path = path.replace("dfyj20170811://", "");
}
if (/^http/.test(callUrl)) {
// 判断是否互联网url
path = "dl/wb?url=" + encodeURIComponent(callUrl);
}
// baseCallApp({}, path);
// 判断如果是ios 则跳转UniversalLink
if (detect.os.ios) {
// location.href = universalurl(callUrl);
iosCallApp(callUrl);
} else {
baseCallApp({}, path);
}
};
/**
* 样式为：页面下面有下载导航栏，点击导航栏中的立即打开按钮，浏览器里唤起app
* @param params fastmanV2的config文件
*/
var newCallApp = function newCallApp(params, beforeCallApp) {
if (params === void 0) {
params = {};
}
if (beforeCallApp === void 0) {
beforeCallApp = function beforeCallApp() {};
}
if (!isFromApp()) {
openButtonHtml();
// 增加定位属性 location: 顶部定位，默认底部定位
// 从参数中获取位置信息
var location_1 = params.location;
// 获取名为"wraper"的元素
var wraper = document.getElementById("wraper");
// 获取类为"shareNavigation-footer"的元素，此处使用断言转换为任意类型以进行后续操作
var footer = document.querySelector(".shareNavigation-footer");
// 如果位置信息存在且为"top"，则将footer元素移动到页面顶部，并调整wraper元素的位置
if (location_1 && location_1 == "top") {
if (wraper) {
// 将footer元素添加到body元素的开头
document.body.prepend(footer);
// 设置wraper元素的顶部距离为0，使其贴紧页面顶部
wraper.style.top = "0";
// 重置wraper元素的底部距离，以适应顶部定位
wraper.style.bottom = "initial";
}
} else {
// 如果位置信息不是"top"，则将wraper元素的位置调整为默认，并设置底部距离为0，使其贴紧页面底部
if (wraper) {
// 重置wraper元素的顶部距离，以适应默认定位
wraper.style.top = "initial";
// 设置wraper元素的底部距离为0，使其贴紧页面底部
wraper.style.bottom = "0px";
}
}
var btnHtml = document.getElementById("btn");
btnHtml === null || btnHtml === void 0 ? void 0 : btnHtml.addEventListener("click", function () {
beforeCallApp();
callAppLH(params);
});
}
};
export var getCallAppHelper = function getCallAppHelper(transfer_URLS) {
if (!transfer_URLS) {
console.log("transfer_URLS is null");
return {};
}
g_Transfer_URLS = transfer_URLS;
return {
newCallApp: newCallApp,
callAppUrlV3: callAppUrlV3
};
};