引言:
首先,这里的跳转涉及4种情况:端内跳端内、端内跳端外、端外跳端内和端外跳段内。
从端内跳转实际上是通过服务器端将请求转发到另外的页面,这个时候跳转到的目标页面,可以根据端内外情况不同获取相应请求中的对象属性和参数。端内跳段内时一般需要设置一个正在加载toast作为缓冲,防止网络等原因影响用户体验。
从端外跳转到端内的话,服务器端向客户端发送了一个指令,获取目前手机是否安装了 App,如果已经下载安装了则直接拉起 App,否则尝试从端外下载App(此时需要融合下载参数判并配置不同下载器信息后执行下载回调);如果是端外跳端外则比较简单,直接进行链接跳转即可。
跳转核心逻辑:
const gotoHttpOrMap = (url, options = {}) => {
// 1.往端内跳; isMap表示在端内
if (url.indexOf('map') === 0) {
if (isMap) {
const loading = Vue.prototype.$mps.toast({
text: '正在加载...',
type: 'loading',
autoDismiss: false,
interactive: false,
});
mapGotoScheme(url);
setTimeout(() => {
loading.close();
});
} else {
const { launchCallback, downloadCallback, enterfrom } = options;
openLinkOrDownloadMapApp({ type: 'map', launchLink: url, launchCallback, downloadCallback, enterfrom });
}
} else {
// 2.http型连接 往端外跳
if (isMap) {
mapGotoPage({ url, animated: true });
} else {
window.location.href = url;
}
}
};
调用函数:
let mapGotoScheme = (map, callback) => {
return $mqq.invoke('common', 'gotoPage', { map }, callback)
}
const openLinkOrDownloadMapApp = (params = {}) => {
const { type, launchLink, launchCallback, downloadCallback, referer, enterfrom = 'unknown', customDownloadParams = {} } = params;
if (['h5', 'map'].indexOf(type) < 0) {
console.error('[openLinkOrDownloadMapApp] invalid scheme type.');
return;
}
const scheme = type === 'h5' ? getSchemeForH5(launchLink, enterfrom, referer) : launchLink;
const PACKAGE_URL = 'map://';
const PACKAGE_NAME = 'com.tt.map';
api.getInstallState(PACKAGE_URL, PACKAGE_NAME, (data) => {
// 1.如果安装了,直接拉起App
if (data) {
console.log('[openLinkOrDownloadMapApp] scheme url:', scheme);
// 如果是已接入过第三方sdk的渠道,使用封装过的sdk跳转API
if (ua.isWX || ua.isQQ || ua.isQQBrowser || ua.isQQNews || ua.isQQVideo) {
api.launchApplication(scheme);
} else {
// 否则统一走跳链方式唤端(端外环境兼容性最大化,iframe方式有较大概率无法拉起)
window.location.href = scheme;
}
launchCallback && launchCallback();
} else {
// 2.如果没安装,尝试下载地图App
// 默认取全局lib中的下载参数,接收自定义的参数,最终做融合
const globalDownloadParams = { downloadIcon, downloadTitle, downloadLink };
const finalDownloadParams = Object.assign({}, globalDownloadParams, customDownloadParams);
console.log('[openLinkOrDownloadMapApp] download params:', { ...finalDownloadParams });
// 默认采用下载器方式唤起,提供最极致的速度。参数均为默认,接口请参考util.api
api.downloadApp(downloadLink, {
// 微信下载器配置
wxConfig: {
taskName: 'TencentMap',
url: downloadLink, // 微信下载器的下载资源链接
appName: downloadTitle, // 显示在微信下载器的应用名
logoUrl: downloadIcon, // 显示在微信下载器的logo
appVersion: downloadAppVersion, // 显示在微信下载器的版本号
},
// QQ下载器配置
qqConfig: {
appId: '211480546', // 固定appId
url: ua.isAndroid ? appendToUrl(downloadLink, 'alwaysApk=1') : downloadLink, // 用渠道包链接时,此处必须带有alwaysApk!
packageName: 'com.tt.map',
appName: downloadTitle, // 显示在QQ下载器的应用名
taskName: 'TencentMap',
actionCode: '2',
isAutoInstall: 1,
},
});
downloadCallback && downloadCallback();
}
});
};
let mapGotoPage = (param) => {
return $mqq.invoke('common', 'gotoPage', {
uri: 'onlineWebView',
param
})
}