Реализация приложения пробуждения H5 и точки внимания

внешний интерфейс APP HTML

У фронтенд-разработчика часто возникает такая потребность: если пользователь устанавливает собственное приложение, он открывает домашнюю страницу приложения или указанную страницу, а если приложение не установлено, оно переходит на соответствующую страницу загрузки. Такой спрос также является непременным звеном для нового и деления, поэтому нам нужно его решить. Давайте посмотрим, как это сделать сегодня?

Перейти к приложению

В настоящее время есть два хороших способа реализовать эту функцию: схема URL, метатеги и универсальные ссылки.

URL Scheme

Схема URL — это внешний интерфейс, который позволяет приложениям переключаться между собой. Определяя уникальный путь URL-адреса для приложения, чтобы быстро открыть указанное приложение извне, схема URL-адреса каждого приложения отличается.Если существует одна и та же схема URL-адреса, система ответит на URL-адрес приложения, которое было установлено первым. , Схема, так как схема URL-адреса установленного позже приложения перезаписывается, ее нельзя вызвать. Формат схемы URL:

[scheme]://[host]/[path]?[query]

Представьте несколько часто используемых платформ схемы URL:

  • QQ: mqq://
  • WeChat: weixin://
  • Tencent Weibo: TencentWeiBO: //
  • Таобао: таобао://
  • алипай: алипай://
  • Вейбо: sinaweibo://

Поддерживает платформы Android и iOS

метатег

Установите метатег на веб-странице, и когда вы откроете ее с помощью Safari, панель навигации вашего приложения будет отображаться вверху. Если приложение не установлено, щелкните, чтобы перейти в магазин приложений, чтобы загрузить его.Если приложение установлено, оно может разбудить приложение непосредственно через метатег вверху.

Эксклюзивно для iOS

Universal Links

Универсальные ссылки — это универсальная ссылка. Пользователи iOS 9 и более поздних версий могут легко перенаправить в приложение, щелкнув эту ссылку, без необходимости открывать и переходить через Safari. Если у пользователя не установлено приложение, веб-страница, на которую указывает эта ссылка, будет открыта в Safari.

Уникально для iOS и выпущено только в iOS 9.0.

использовать различными способами

И схема URL-адресов, и универсальные ссылки должны быть настроены, и только после настройки они могут работать.

Использование схемы URL

Использовать URL-схему несложно, самый простой способ — добавить ссылку с тегом:

<a href="weixin://">打开微信</a>

Этот метод доступа относительно прост. Его можно использовать как на Android, так и на IOS, но не на стороне WeChat. Сторона WeChat создала белый список, который полностью блокирует использование схемы URL. Если белый список не добавлен, он можно открыть напрямую, как JD.com, иначе нельзя.

использование метатегов

Путь метатегов также очень прост, просто добавьте метатеги на веб-страницу:

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=7777777, affiliate-data=myAffiliateData, app-argument=yourScheme://">

Эффект заключается в отображении липкой полосы в верхней части страницы.

Использование универсальных ссылок

Этот метод немного сложен в настройке, и я никогда не имел дела с iOS-разработкой, поэтому дам вам одинОфициальный сайтвведение

Суммировать

Каждый из вышеперечисленных методов не может быть решен идеально, либо поддерживается только Apple, либо будет много ограничений для головных приложений, поэтому вам нужно проделать много другой работы для адаптации.

Прежде всего, нам нужно подтвердить, какой метод выбрать. Основываясь на приведенном выше введении, только первый метод URL-схемы следует считать лучшим выбором. В конце концов, обе платформы поддерживают его. Следующие два - как решить проблему как открыть его в главном приложении. На самом деле, эта проблема обычно предлагает пользователю открыть его во внешнем браузере, так что это в основном решает проблему, и для ее пошаговой реализации используется следующий код.

Реализуйте функцию приложения для пробуждения

Подскажите браузеру открыть

Прежде всего, вам нужно реализовать небольшую подсказку для открытия в браузере следующим образом:

Реализовать функцию оценки главного приложения

Вот чтобы судить, является ли это WeChat или другим браузером APP через User-Agent браузера, код выглядит следующим образом:

/**
 * 判断浏览器是否为头部APP
 */
function isBlackApp() {
  var u = navigator.userAgent.toLowerCase();
  return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf('mqqbrowser') > -1;
}

Вышеупомянутая функция оценивает несколько браузеров, WeChat, Weibo, QQ, браузеры QQ. Если вы нажмете кнопку «Открыть» или «Скачать», он определит, является ли это головным приложением. Если да, вам будет предложено открыть его в браузере. В противном случае вы можете напрямую открыть свое собственное приложение. Код выглядит следующим образом:

function openTuer() {
  if (isBlackApp()) {
    // 头部APP让网页显示提示在浏览器中打开
    showTips();
  } else {
    // 不是头部APP就直接打开，这里大家开始可以不用参数，后面写好再来添加即可
    openApp(0, 0);
  }
}

Основной метод пробуждения приложения

Функция openApp также упоминалась выше, так как же она выглядит, здесь мы посмотрим, как реализовать эту функцию. Здесь, в соответствии с текущими требованиями проекта, для открытия приложения требуется два параметра: один — для открытия определенной страницы приложения, а другой — параметр arg, необходимый для открытия определенной страницы. Итак, нашей функции openApp нужны только два параметра.

Реализация openApp

Функция openApp очень проста для вызова двух функций следующим образом:

function openApp(which, arg) {
    jumpApp("testApp://which=" + which + "&arg=" + arg);
    noApp();
}

Первая функция отвечает за открытие АРР, а вторая отвечает за адресную обработку перехода, если АРР не открыт или АРР не установлен.

Реализация jumpApp

Для реализации данной функции следует отметить, что iframe можно использовать до iOS8, но после этого он работать не будет.Он заблокирован Apple, поэтому его можно только перепрыгнуть через страницу.Конкретный код выглядит следующим образом:

function jumpApp(t) {
  try {
    var e = navigator.userAgent.toLowerCase(),
      n = e.match(/cpu iphone os (.*?) like mac os/);
    if (((n = null !== n ? n[1].replace(/_/g, ".") : 0), parseInt(n) >= 9)) {
      window.location.href = t;
    } else {
      var r = document.createElement("iframe");
      (r.src = t), (r.style.display = "none"), document.body.appendChild(r);
    }
  } catch (e) {
    window.location.href = t;
  }
}

Реализация noApp

Реализация noApp также очень проста для определения таймера.Если нет ответа в течение определенного периода времени, он перейдет на указанную страницу загрузки. Конкретный код выглядит следующим образом:

var timer = null;
function noApp() {
  var t = Date.now(),
    r = "http://www.tuerapp.com";
  timer = setTimeout(function() {
    return Date.now() - t > 2200
      ? (clearTimeout(timer), !1)
      : !document.webkitHidden && !document.hidden && void (location.href = r);
  }, 2000);
}

На данный момент основные функции реализованы.В реальном процессе может быть еще много проблем.Если они есть, пожалуйста, оставьте сообщение.

Категории