Пробудите практику App в Zhuanzhuan

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

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

Архитектура вызывающей функции

Давайте сначала передадим изображение Gif, чтобы увидеть, что такое конец вызова.唤端Как показано выше, в браузере Safari, когда мы нажимаем кнопку вызова приложения, система подсказывает нам, нужно ли нам «открыть в Zhuanzhuan». После нажатия «ОК» будет вызвано приложение Zhuanzhuan.

Однако внимательные ученики обязательно спросят, если в моей системе не установлено приложение Zhuanzhuan, каков будет эффект от нажатия кнопки? Это очень распространенный сценарий.Пользователям, которые не установили связанные приложения, часто приходится переходить на страницу загрузки, чтобы пользователи могли загрузить их.

То есть вызывающий обычно включаетПробудить приложение,Скачать приложениетак же какАвтоматическая загрузка после того, как приложение не проснетсяэти три функции.

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

Подводя итог, мы используем блок-схему, чтобы проиллюстрировать общую функциональную архитектуру вызывающей программы.唤端功能架构

Архитектура технологии завершения вызова

После разговора о том, что такое терминал вызова, перейдите к основному блюду и расскажите о конкретной технической архитектуре терминала вызова. Технология, используемая вызывающим абонентом, обычно может называться технологией Deep Link. На разных платформах реализованы разные реализации этой технологии, и основные из них следующие:

  • Схема URL (общая для всех платформ)
  • Universal Link (Универсальная ссылка, эксклюзивно для iOS)
  • Ссылки на приложения и производные намерения Chrome (только для Android)

Конечно, вышеперечисленное является только общими международными стандартами, нам также необходимо учитывать «внутренние особенности», включая, помимо прочего,WeChat папа, микроблоги, браузер UC и т. д., для этих приложений основные методы вызова имеют такие несколько

  • Универсальная ссылка (некоторые приложения доступны и скоро будут запрещены основными отечественными приложениями)
  • WeChat APIlaunchApplicationа такжеgetInstallState(Необходимо подать заявку на белый список, что очень сложно)
  • Открыть вкладку WeChat<wx-open-launch-app>(Метод рекомендации WeChat требует проверки, и этот процесс громоздкий)
  • Перейти к сокровищнице приложений, а затем вызвать терминал через сокровищницу приложений (применимо к среде WeChat Android)
  • Появится маска, подсказывающая пользователю, нажмите кнопку в правом верхнем углу, а затем выберите «Открыть в браузере» (просто~)

В прошлом это выглядит немного истерично, по-старому, давайте полностью рассмотрим техническую архитектуру терминала вызова через диаграмму функциональной архитектуры.唤端技术架构Что ж, после прочтения схемы функциональной архитектуры у вас еще больше закружилась голова? Не волнуйтесь, я подробно объясню основные методы, упомянутые выше.

Подробное объяснение общих методов вызова

В этой части мы в основном вводимURL Scheme,Universal Link,微信唤端а также自家公司AppЗавершение реализации по четырем техническим сценариям

URL Scheme

Схема URL-адреса на самом деле является частью протокола перед URL-адресом, например, этот адресhttps://m.zhuanzhuan.com,вhttpsэто схема, а это значит, что этоhttpsадрес г.

Давайте посмотрим на другой адресzhuanzhuan://jump/core/myBuyList/jump?tab=0, при посещении этого адреса, если есть регистрация в системеzhuanzhuan:// => 转转App, затем система будет использовать приложение Zhuanzhuan, чтобы открыть ссылку, а затем приложение проанализирует путь и поисковые части URL-адреса и выполнит соответствующие операции.

Итак, как зарегистрироваться в системеzhuanzhuanКак насчет этой схемы, Android можно найти вmanifestчерезintent-filterконфигурация, iOS может бытьinfo.plistфайл добавленURL typesдля регистрации Схемы.

Метод вызова схемы

Вызов Scheme также очень прост, мы можем передатьlocation.hrefилиiframeилиa标签звонить Между этими тремя методами нет существенной разницы, каждый из которых позволяет системе получить доступ к URL-адресу, но в некоторых средах, когда метод не работает, необходимо использовать другую форму.

После длительного периода исследований мы обобщили следующие передовые практики.

  • В среде QQ iOS используйтеa标签Способ вызова схемы URL более стабилен
  • Кроме вышеперечисленного, используйтеlocation.hrefПросто вызовите схему URL
  • Если вы хотите, чтобы вызывающий абонент не переходил на страницу с ошибкой, когда схема URL-адреса работает неправильно, вы можете использоватьiframeформе, но нужно обратить внимание на совместимость отдельных моделей

Конкретный код трех режимов вызовов выглядит следующим образом

// SCHEMA_PATH 为 URL Scheme 地址

// location.href 形式
window.top.location.href = SCHEMA_PATH;

// a标签形式
const a = document.createElement("a");
a.setAttribute("href", SCHEMA_PATH);
a.click();

// iframe形式
iframe = document.createElement('iframe');
iframe.frameBorder = '0';
iframe.style.cssText = 'display:none;border:0;width:0;height:0;';
document.body.append(iframe);
iframe.src = SCHEMA_PATH;

Не удалось вызвать автоматическую загрузку терминала

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

  1. Когда вы нажимаете для вызова терминала, таймер задерживает n секунд (мы установили 2,5 секунды) для выполнения операции загрузки
  2. мониторvisibilitychangeСобытие, если страница скрыта, это означает, что звонящий успешен и таймер сброшен.
  3. еслиvisibilitychangeСобытие не срабатывает, значит вызов представителя завершился неудачно, и операция загрузки будет выполнена через n секунд.

Конкретный код выглядит следующим образом

// n秒后执行下载
const timer = setTimeout(() => {
  this.__download(options);
}, options.delay);

// 页面隐藏，那么代表已经调起了app，就清除下载的定时器
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
);

Однако у этого метода есть фатальная проблема, т.nСколько надо брать, разные мобильные телефоны, время звонка на терминал не одинаковое.

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

Здесь мы проверили и обнаружили, что n установлено на 2500–3000 мс, что является более подходящим значением.

Проблемы со схемой URL на iOS

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

  1. Пользователь нажимает кнопку вызова (запись Time1)
  2. В Safari появляется окно подтверждения, открытое в «Zan Zhuan».
    • На данный момент, хотя всплывающее окно с предупреждением не блокирует запуск кода, весь код продолжает работать, но интерфейс не изменился.
  3. Пользователь щелкает, чтобы открыть Zhuanzhuan (запись Time2), и переходит к Zhuanzhuan.
  4. Пользователь возвращается в Safari, если Time2 - Time1 больше установленного времениn, то продолжится выполнение предыдущего логического кода. Также будет казаться, что после успешного вызова логика загрузки продолжается.

Для этой задачи более интуитивно понятно смотреть на эту анимацию.Первый раз нажать на терминал, а потом нажать открыть через некоторое время. Второй раз - щелкнуть, чтобы открыть немедленноURLScheme在iOS下的问题

Universal Link

Выше упоминались некоторые проблемы схемы URL в iOS. На самом деле, в системе iOS есть лучший способ — Universal Link, который будет представлен далее. Универсальная ссылка находится вiOS 9Новая функция вhttpsСсылка на протокол для открытия приложения. В то же время, поскольку он используетсяhttpsпротокола, поэтому, если клиент не был успешно запущен, веб-страница будет открыта напрямую, и больше не нужно судить, был ли вызов успешным. А при использовании Universal Link больше не будет всплывающих окон открывать или нет.Для пользователей эффективность вызова терминала выше.

Давайте сначала рассмотрим пример вызова по универсальной ссылке, такой как этот адресhttps://mjump.zhuanzhuan.com/zhuanzhuan/index.html, прямой доступ к ней — это загрузочная страница начальной загрузки, но в проекте черезlocation.hrefПрыжок, но он может напрямую вызывать Чжуаньчжуань.PS: при нажатии кнопки выполняется кодlocation.href = https://mjump.zhuanzhuan.com/zhuanzhuan/index.html ios的通用链接

Процесс настройки Universal Link, статьи в интернете относительно разбросаны, здесь я разберу его принципы и ключевые моменты, и свяжу процесс воедино, чтобы облегчить понимание и избежать подводных камней.

  1. Когда приложение будет выпущено, вAssociated DomainНастроить доменное имя
    • Это доменное имя не может совпадать с доменным именем страницы, которая будет вызываться в будущем. Например, доменное имя перенаправленной сетиm.zhuanzhuan.com, то это доменное имя не может его использовать, вы можете использоватьmjump.zhuanzhuan.com
  2. система iOS вустановка приложенияКогда запрос настроен вAssociated domainСреднее доменное имя (вот оноhttps://mjump.zhuanzhuan.com) корневой путь или.well-knownфайл конфигурации путиapple-app-site-association, и зарегистрируйте его в системе
    • Содержимое этого файла примерно такое, где appID — это идентификатор приложения в системе,pathsмы упомянем позже
{
  "applinks": {
    "apps": [ ],
    "details": [
      {
        "appID": "ECVV5G85CD.com.wuba.zhuanzhuan",
        "paths": [
          "zhuanzhuan/*",
          "/qq_conn/1104903352/*"
        ]
      },
      {
        "appID": "ECVV5G85CD.com.zhuanzhuan.yige",
        "paths": [
          "yige/*"
        ]
      },
      {
        "appID": "75BF75R4NH.com.wuba.*",
        "paths": [
          "*"
        ]
      }
    ]
  }
}
  1. когда страницамеждоменный доступкогда, например, изhttps://m.zhuanzhuan.comперенаправить наhttps://mjump.zhuanzhuan.com/zhuanzhuan/index.html,потому чтоmjump.zhuanzhuan.comНа шаге 2 он был зарегистрирован системой, поэтому система вставит путь к странице, которыйzhuanzhuan/index.htmlчасть, и пути в файле конфигурации выше совпадают. Если они совпадают, будет вызвано соответствующее приложение в файле конфигурации. Если он не совпадает или у пользователя не установлено приложение, то доступ по адресу выполняется в обычном режиме.
    • Поскольку вызывающий объект не работает, он будет доступенhttps://mjump.zhuanzhuan.com/zhuanzhuan/index.htmlадрес, поэтому этот адрес не может быть 404
    • Доступ к этому адресу непосредственно в браузере не вызовет приложение, потому что оно немеждоменный доступ
    • После запуска приложения откройте указанную страницу, чего можно добиться, добавив параметры в URL-адрес, а затем нативный анализ параметров.

WeChat

WeChat, как суперприложение, был бы очень рад подумать об этом, если бы мог использовать трафик WeChat для вызова терминала. Однако WeChat наложил много ограничений на терминал звонков, и пользоваться им не так просто.

Универсальные возможности звонков WeChat

WeChat7.0.5Версия выпустила Universal Link, поэтому в системе iOS вы можете использовать Universal Link для совершения звонка в WeChat. При реальном использовании я обнаружил странную проблему, то есть некоторые приложения могут быть вызваны напрямую в другое приложение в WeChat без каких-либо промежуточных подсказок. И когда Zhuanzhuan находится на терминале вызова, будет подсказка «Может выйти из WeChat и открыть стороннее приложение» 😹微信提示

На стороне Android мы можем использовать сокровище приложения для вызова терминала WeChat. Сначала перейдите к сокровищнице приложений, затем вызовите соответствующее приложение через сокровищницу приложений, и сокровищница приложений также будет открыта.应用宝 App Link, что можно сделать, чтобы вызвать указанную страницу

WeChat API — запуск приложения

Предоставлен ранний WeChatlaunchApplicationа такжеgetInstallStateметод вызова терминала. вlaunchApplicationВы можете напрямую вызвать приложение,getInstallStateМожет проверить, установлено ли приложение (только для Android). Приложения, открывшие белый список, могут вызывать терминалы через эти два API. Для тех, кто не открывал его сейчас, должно быть сложно открыть его.Вы можете использовать открытую вкладку, рекомендованную WeChat, для вызова терминала.

Вот краткий обзорlaunchApplicationпроцесс использования

  1. Сначала получите подпись для конфигурации конфигурации
wx.config({
  debug: false,
  appId: conf.appId,
  timestamp: conf.timestamp,
  nonceStr: conf.noncestr,
  signature: conf.signature,
  beta: true,
  jsApiList: ['launchApplication', 'getInstallState'], // 使用这两个API
  openTagList: ['wx-open-launch-app'],
})
  1. Используйте следующие два API для вызова терминала
 /**
   *  @description 微信拉起第三方App方法
   *  @param {Object} options -必填项，以json形式传参
   *  @param {String} options.appID - 必填项，供iOS使用
   *  @param {String} options.parameter - 必填项，schema://parameter 通过系统接口拉起第三方app。中文或特殊字符需要encode
   *  @param {String} options.extInfo - 必填项，该参数仅Android使用，对应Android微信opensdk中的extInfo，格式自定义，由第三方APP自行解析处理ShowMessageFromWX.Req 的微信回调
   * */
  launchApplication(options) {
    return WeixinJSBridge.invoke('launchApplication', options, res => {
      console.log(res)
    })
  }

  /**
   *  @description 微信判断第三方App是否安卓 (仅仅Android支持, IOS无效、无法判断)
   *  @param {Object} options -必填项，以json形式传参
   *  @param {String} options.packageName - 必填项，安卓的包名
   *  @param {String} options.packageUrl - 必填项，schema 协议
   * */
  getInstallState(options) {
    return WeixinJSBridge.invoke('getInstallState', options, res => {
      console.log(res)
    })
  }

После приведенной выше конфигурации мы можем взглянуть на демонстрационную анимацию терминала WeChat.微信唤端

Открытая вкладка WeChat — wx-open-launch-app

WeChat Open Tag – это компонент вызывающего абонента, официально предоставляемый WeChat. Подробнее о том, как его использовать, см.официальная документация. Здесь следует отметить, что для этой функции требуется учетная запись службы общедоступной платформы, а также учетная запись открытой платформы и приложение. Поскольку общедоступная платформа, связанная с приложением нашей компании, отличается от основной части открытой платформы, эта функция не использовалась успешно. Студенты, которым она нужна, могут попробовать ее.

Чтобы узнать о разнице между открытой платформой и общедоступной платформой, вы можете обратиться к предыдущей статье автора «Краткое понимание открытой экосистемы WeChat» —zhuanlan.zhihu.com/p/189968202

Ваше собственное приложение вызывает другие приложения

Наконец, я хочу рассказать о своем собственном приложении, чтобы вызвать такие приложения, как Alipay и WeChat. На самом деле, для FE это не сложно, просто пусть родные штатные нам дадут метод вызова😁. Приложение может вызывать системный API, напримерopenURLд., очень удобно вызывать другие приложения. Нам нужно обратить внимание на то, чтобы динамически вводить SDK приложения, чтобы гарантировать завершение инициализации SDK при его пробуждении. Конкретную логику динамического введения можно найти в исходном коде~

исходный код

Много подробных суждений звонилки, и объяснить это в статье сложно.Открываем стабильную версию библиотеки звонилки, которую использует Zhuanzhuan, с которой удобно всем общаться и учиться.Код написан в общем , в основном для справки.Жалобы, ваши жалобы - источник нашей реконструкции😁 Адрес источника:GitHub.com/ переадресовать...

Секция благосостояния

В соответствии с уведомлением мы опубликуем практику и мышление Zhuanzhuan в гибридном, микро-интерфейсе, Umi и других инфраструктурных и промежуточных технологиях.Приглашаем всех обратить внимание и надеемся на дальнейшее общение с вами.
Статья также будет отправлена ​​в общедоступный аккаунт "Da Zhuan Zhuan FE", и в общедоступном аккаунте будет проведена лотерея. Призом в этой статье является физическая книга "Расширенное программирование на JavaScript (четвертое издание)". Приглашаем всех заплатить внимание ✿✿ヽ(°▽° )ノ✿

Категории