js для вызова приложения в WeChat, Weibo, QQ, Safari

WeChat JavaScript Android Safari
задний план

В последнее время я использовал js для вызова приложений в WeChat, QQ и Weibo, я делал подобные функции раньше, но это относительно грубо, и рассмотрение не завершено, и это было давно, и многие технологии устарели. .Теперь есть технология возбуждения с лучшим опытом и более полными функциями.Многие из предыдущих решений больше не нужны.Теперь я поделюсь с вами комплексным и последним решением для возбуждения в этой статье.помощь.

окончательный эффект

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

Прикладной процесс

clipboard.png

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

<a href="https://applink-party.mtime.cn/mtlf">下载</a>

или это:

window.location.href = 'https://applink-party.mtime.cn/mtlf'

Все деловые сужденияmtlfУ этой страницы есть два преимущества:

  • Мультисервисный общий код. В команде у каждого бизнеса может быть загрузка баннера, нет более простого способа вызова, чем местоположение по URL-адресу
  • в состоянии использоватьuniversal link

Кратко сказать универсальная ссылка

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

До iOS9 способ вызова был таким же, как сейчас в Android, оба используютschemeУ этого метода вызова есть небольшая проблема: каждый раз, когда он вызывается, он выдает подсказку: открывать ли приложение xx, чтобы, исходя из опыта, оно позволяло пользователю сделать еще один шаг.universal linkОн будет прыгать прямо и не будет останавливаться на странице.Условие — добавить новый в корневую директорию нашего проекта.apple-app-site-association.jsonСодержимое файла примерно такое:

clipboard.png

Затем наклейка app app app, а затем настроить внешний вид, вы можете достичь напрямую Evokes!

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

Как можно считать конфигурацию удачной на стороне H5? Пока один из наших URL-адресов открыт в браузере (будь то адрес cdn или перенаправление маршрутизации) и мы видим содержимое файла json, H5 будет успешно настроен. Тогда дайте этот адресiOSСтарые водители, как только с ними поговоришь, они сразу знают, что делать, ведь это так просто!

Wechat, Weibo, QQ, Safari предлагают решения на разных платформах

Блок-схема пробуждения

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

WeChat

WeChat — самый важный канал обмена, но мы мало что можем сделать. До,iOSПоддержка WeChat подuniversal linkЭтот способ вызывания, но с 8 января 2018 г.WeChat заблокировал это! ! ! Неважно, по какой причине WeChat,iOSС помощью этого наиболее удобного способа вызвать экранирование все, что мы можем сделать, это приспособиться. Итак, теперь, будь то iOS или Android, наш метод обработки одинаков:Все переходят прямо к сокровищнице приложения. Сокровище приложения iOS поможет вам открытьAppStore, сокровище приложения для Android откроет приложение напрямую (при условии, что вы его загрузили)
Примечание: WeChatitunesСсылка тоже заблокирована, так что напрямую перейти не получитсяAppStore, вы можете использовать приложение только для создания этого моста.

Вейбо

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

  • существуетiOSДалее, Weibo не поддерживает ссылку для открытия сокровищницы приложения, поэтому нам нужно научить пользователей использоватьSafariОткройте его так:

clipboard.png

  • существуетandroidпод платформу,использоватьschemeТаким образом нельзя разбудить приложение, но есть и частные случаи, то же самоеscheme, Комментарии для взрослых и NetEase Cloud Music. Вы можете попробовать это сами, когда у вас будет время, поэтому мы можем сделать вывод, что Weibo на платформе Android также имеет белый список, аналогичный WeChat, и можно использовать те, что в белом списке.schemeВозбуждение, точно так же, как WeChat для JD.com, JD.com в WeChatschemeспособ вызвал.

Так ли этоiOSещеandroid, наша схема такая:Непосредственно направляйте пользователя, чтобы использовать локальный браузер для открытия.

QQ

  • iOSПод платформой QQ в настоящее время поддерживаетuniversal linkArouse, если он не установлен, также поддерживает прямое открытие под QQ.itunesСсылки, по сравнению с другими приложениями, поддержка QQ является лучшей.
  • androidВ рамках платформы QQ также поддерживаетschemeспособ вызвать, ноВ некоторых старых моделях QQ будет с определенной вероятностью не вызывать, специфическое явление таково: когда страница открывается в первый раз, вызов завершается неудачно, а при повторном открытии вызывается успешно. По явлению можно сделать вывод, что в QQwebview, будуschemeСпособ сделать вызвать некоторые ограничения на время загрузки, проверено, около 500 мс, больше, чем это значение времени, ситуация вызовет сбой происходит. Зачем открывать второй, вызывать, вероятность успеха будет велика, потому что при первой загрузке кэшированные файлы, при открытии второй напрямую загружаются, поэтому время находится в определенных пределах.

Safari

Safari в этом случае относительно прост и поддерживаетuniversal link, также поддерживает прямое открытиеitunes, поэтому его можно обработать, как показано на рисунке.

Ступай на яму

    • существуетiOS9середина,SafariПрямой переход не поддерживаетсяitunes, так что в этом случае вам нужно сделать обработку совместимости, вы можете перейти прямо к сокровищнице приложения
    • Прежде чем посмотреть, было ли возбуждение успешным, нужно самостоятельно рассчитать время, потому что, если возбуждение прошло успешно,setIntervalВремя будет медленнее.После моего теста я больше не могу использовать этот метод.Мне просто нужно использоватьdocument.hidden || document.webkitHiddenДа, совместимость хорошая
    • судить лиSafariВ браузере общее суждение - есть ли эта строка в UA.После тестирования обнаружено, что UA Android также содержитSafariЭта строка (показана UA ниже), поэтому вам нужно добавить суждение операционной системы
    • оSchemeПробуждайте, до этого было много схем, например: использованиеiframe,<a>标签点击,window.location... После тестирования, пока вы используете тег a для щелчка, совместимость является лучшей, и код примерно такой длины:

    clipboard.png

    О тестировании

    Две платформы, так много ситуаций, хотите протестировать одну за другой? Конечно, нужно проверять поштучно, но в период разработки нет необходимости менять строку и тестировать на мобильном телефоне, что слишком неэффективно, особенно если вы выбираете мобильный телефон с Android 4.4, вы определенно можете отточить свое терпение. Для повышения эффективности я поделюсь с вами часто используемыми ПА, так что вChromeПосле настройки в симуляторе вы можете выполнять отладку локально.Обычно используются следующие UA:

    • iOS-WeChat

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN

    • iOS-QQ

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1

    • iOS-Weibo

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)

    • iOS-safari

    Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1

    • Android-WeChat

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

    • Android-QQ

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080

    • Android-Weibo

    Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)

    После завершения настройки можно переключать окружение на компьютере, как я:

    clipboard.png

    Для использования исходного кода и файлов библиотеки обратитесь к: Github, пожалуйста, нажмите на меня

    Проверка кода сканирования

    Для всего процесса возбуждения вы можете получить доступ к этой записи загрузки:party.mtime.cn/download
    Вы также можете отсканировать код:

    clipboard.png


    Категории