Различные сцены напоминают о действиях в приложении

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

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

несколько шагов

  1. Определить браузер и динамически загрузить логику загрузки соответствующего браузера
  2. пройти черезuniversal link,URL Scheme,a 标签,iframeНесколько способов узнать, как лучше всего вызвать этот браузер.
  3. Если приложение загружено, оно перейдет к логике открытия, а если оно не загружено, оно перейдет к логике загрузки.
  4. Если браузер, о котором известно, что он не может вызывать, приводит к тому, что другие браузеры открывают

обработать:

Сравнение различных методов возбуждения

Ни один метод не идеален, каждый метод имеет свои преимущества и недостатки, и только попробовав все методы в разных браузерах, можно использовать лучший.

универсальная ссылка

Универсальная ссылкаuniversal linkдаIOS 9.0Новые функции, которые доступны только в версиях выше. Эта функция аналогична диплинкингу, и ее можно легко открыть, открывhttpsссылка для прямого запуска вашего клиентского приложения (приложение установлено на телефоне). по сравнению с предыдущимURL Schemeэта новая функция реализованаweb-appОн может обеспечить отличный пользовательский опыт, когда он легко связан.

Попробуйте универсальные ссылки

Попробуем, слева универсальная ссылка.universal linkкстати, правильноURL SchemeСпособ.

Слева вы можете напрямую открыть приложение, а справа вам нужно подтвердить, открывать ли его.

解决的bug:существуетios 12.3После версии,SafariБудет баг, т.URL Schemeа такжеdownload AppЕсли использовать их вместе один за другим, они будут разбужены одновременно.Appзатем введитеApp store, опыт очень плохой. использоватьuniversal linkЭту проблему можно решить отлично.

Конфигурация универсального канала

Он должен находиться в корневом каталоге или под доменным именем /.well-known.注意Не используйте имя бизнес-домена для добавления файла конфигурации к доменному имени. Он должен использоваться в разных доменах, иначе он не сможет вызвать приложение и напрямую открыть страницу.

  • 访问链接Мы предполагаем, что есть три приложения, а именноappa,appb,appc, мы получаем доступhttps://jump.test.com/appa/index.htmlВы можете вызватьappa.
  • 配置下载页Если не установленappaбудет прыгать на404страница, потому что мы эту страницуhttps://jump.test.com/appa/index.htmlНа самом деле его не существует, поэтому нам нужно поместить эту страницу вnginxПрокси на страницу загрузки.
  • 疑问Тогда у вас может возникнуть вопрос, если бы я возбудилappБудет ли после этого эта страница переходить на страницу загрузки? Ответ — нет. Если приложение разбудить, оно не будет продолжать переход на страницу. Только когда его не удастся разбудить, оно перейдет на страницу загрузки.

конфигурация ассоциации сайта-приложения-яблока

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "ABCD.com.aaa.appa",
        "paths": ["appa/*"]
      },
      {
        "appID": "ABCD.com.aaa.appb",
        "paths": ["appb/*"]
      },
      {
        "appID": "ABCD.com.aaa.appc",
        "paths": ["appc/*"]
      },
      {
        "appID": "ABCD.com.aaa.*",
        "paths": ["*"]
      }
    ]
  }
}

Плюсы и минусы универсальных ссылок:

  • 优点: Обеспечивает отличный пользовательский опыт, также очень удобен в использовании и решает проблему возбуждения.appа такжеapp storeЭта проблема
  • 缺点: доступно только на iOS 9 и выше, отдельные браузеры не поддерживают проблемы совместимости.

Метод схемы URL

Применение

Определите, какое приложение вызывается в соответствии с протоколом.

location.href = "testa://test.aaa.com/home";

Определите, следует ли разбудить приложение

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

const timer = setTimeout(() => {
  this.__download(options);
}, options.delay);

const visibilitychange = function() {
  const tag = document.hidden || document.webkitHidden;
  tag && clearTimeout(timer);
};

document.addEventListener("visibilitychange", visibilitychange, false);
document.addEventListener("webkitvisibilitychange", visibilitychange, false);
window.addEventListener(
  "pagehide",
  function() {
    clearTimeout(timer);
  },
  false
);

Преимущества и недостатки схемы URL:

  • 优点1. Хорошая совместимость, большинство моделей могут быть совместимы 2. Простота в использовании
  • 缺点1. Вы не можете судить, было ли загружено приложение, вам нужно написать собственное логическое суждение 2. Пользовательский опыт не так хорош, как метод универсальной ссылки.

тег и метод iframe

Оба они выполняются путем создания элемента через свойства атрибутов элемента.

этикетка

const a = document.createElement("a");
a.setAttribute("href", __SCHEMA_PATH);
a.click();

iframe

const ifr = document.createElement("iframe");
iframe.src = path;
ifr.src = nativeUrl;
ifr.style.cssText = "display:none;border:0;width:0;height:0;";
document.body.appendChild(ifr);
setTimeout(function() {
  document.body.removeChild(ifr);
}, 1000);

Преимущества и недостатки

  • 优点Если вы обнаружите, что есть проблема с вызовом приложения в отдельных сценариях, вы можете попробовать эти два.
  • 缺点IFRAMES в основном устарены, результаты тегов доступны только в отдельных моделях.

Суммировать

  1. 微信Белый список должен быть настроен, или универсальная ссылка также может быть вызвана в ios, выражение немного другое
const wxconfig = {
  debug: false,
  appId: conf.appId, // 公众号的 appid
  timestamp: conf.timestamp,
  nonceStr: conf.noncestr,
  signature: conf.signature,
  beta: true,
  jsApiList: ["launchApplication", "getInstallState"]
};
(window.wx && window.wx.config(wxconfig)) || (window.wxconfig = wxconfig);
  1. Браузер Baidu должен использоватьuniversal linkспособ вызвать в IOS
  2. qq в ios для использованияa 标签Кстати, даже путь Universal Links не вызывает его
if (isIOS) {
  const a = document.createElement("a");
  a.setAttribute("href", __SCHEMA_PATH);
  return a.click();
}
location.href = __SCHEMA_PATH;
  1. В тесте на Weibo можно активировать как JD.com, так и Taobao.Предполагается, что установлен белый список.В настоящее время хорошего способа найти нет.Его можно открыть только в других браузерах.

Результаты теста

В настоящее время нельзя вызвать только Weibo, другие можно вызвать обычным образом.

Сцены ios андроид Настраивать ли белый список
WeChat ✔️ ✔️ да
qq ✔️ ✔️ нет
chrome ✔️ ✔️ нет
Браузер Сяоми ✔️ ✔️ нет
uc ✔️ ✔️ нет
qq browser ✔️ ✔️ нет
360 browser ✔️ ✔️ нет
Гепард ✔️ ✔️ нет
sogou ✔️ ✔️ нет
baidu browser ✔️ ✔️ нет
safari ✔️ ✔️ нет
Вейбо X X да

опыт

AD: Приложение Zhuanzhuan — это приложение, разработанное нашей компанией, которая в основном отвечает за операции с подержанными товарами. Его можно скачать по ссылке ниже转转AppПриходи и попробуй ~

№ zhuanzhuan.com/common/pro_…

Категории