博客

引言：

首先，这里的跳转涉及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
  })
}