Технический анализ гибридного приложения — реальный бой

введение

В прошлой статье мы подробно объяснили основные принципы гибридного приложения и понялиКак общаются нативная сторона и сторона H5да иКонструкция моста и доступ. И в этой статье мы начнем дальше практиковать эти причины и использовать код для действительной реализации полного и стабильного гибридного решения. Если у вас все еще есть вопросы по поводу принципа, пожалуйста, переместитеАнализ технологии гибридных приложений — принципыТолько в понимании основы теории в сочетании с дальнейшей практикой можно действительно углубиться в технологию.

Если у вас есть лучшие решения или предложения, вы можете перейти кgithub.com/xd-taydeОбсуди со мной!

небоскреб

После разговора о большом количестве теоретических знаний некоторые друзья могут сказать: «Ты обманываешь?». 😅. Тогда давайте кратко представим один из проектов, которые мы реализовали с помощью этого решения.

Это гибридный модуль, полностью встроенный в приложение, дополненный углубленным сотрудничеством Native и H5, в общей сложности4 страницы, где домашняя страница и производственная страница созданы H5, а страница камеры и страница сохранения представляют собой мультиплексированные исходные страницы.

Проект был запущен на один год и накопленИспользуется более 1 миллиарда раз. Это решение выдержало испытание и все еще оптимизируется и расширяется в процессе.

Использование этой реализации основано на следующих соображениях:

всего модуляизменчивый стиль, общий пользовательский интерфейс соответствует внешнему виду, и весь модуль находится в постоянной итерации;
Изменчивость логического процесса проекта велика, что требует мощной возможности горячего обновления H5 для обеспечения своевременногоРеагируйте на изменения данных с помощью быстрых проб, ошибок и исправлений;
Страница съемки и страница сохранения — это модули, которые уже есть у клиента, и их можно настроить напрямую.мультиплекс;
Нужна помощь от клиентаДоступ к нескольким SDK, такие как комплексная обработка изображений с использованием алгоритма SDK.

Кратко ознакомившись с проектом, приступим к созданию bridge.js. Так как эта серия статей в основном посвящена фронтенду детской обуви, мы в основном расширяем часть H5, то есть реализацию bridge.js, которая будет внедряться в шапку каждой страницы, часть SDK в клиенте не будет подробно разобран, и упомяну только некоторые детали.

Создание основы --- архитектура bridge.js

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

nativeCallа такжеpostMessageЭти два основных API соединяют нативную сторону и сторону H5.

Далее мы рассмотрим реализацию кода каждой части.

(1) Использование позиции деловой стороны

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

(2) H5 --> Исходный

Давайте посмотрим прямоnativeCallВнутренняя реализация:

Его можно разложить на следующие 4 шага:

Создать уникальный идентификатор обработчика, начать накопление с 0;
Правила выставления параметров по значению обработчикаСохранить в пуле параметров(_парамсторе);
с обработчикомРегистрация пользовательских событий и привязка обратного вызова, а также сохранить обратный вызов в _callbackStore,addEvent(), хранение предназначено в основном для отвязки событий;
как iframeотправить протокол, и нести обработчик уникального идентификатора,send();

Native:

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

воплощать в жизньв соответствии с соглашениемФункция;

На этом процесс H5 --> Native завершается.После того, как клиент выполнит соответствующую функцию, он начинает возвращать результат выполнения.

(2) Собственный --> H5

Родной:

После того, как Native завершит функцию, вызовите ее напрямую.Bridge.postMessage(handler, data),БудуРезультатыи доnativeCallПрошло болеелоготипВернитесь к H5;

Н5:

H5 после получения уникального идентификатораИнициализировать соответствующее пользовательское событие, срабатывает после монтирования данных, здесь задействовано следующее:fireEventЭта функция:

Таким образом, мы завершили механизм двустороннего взаимодействия между двумя концами и разобрались с основным кодом всего bridge.js, включая:

Наиболее важные открытые API:nativeCallа такжеpostMessage;
Клиент получает функцию параметра:getParam;
система обратного вызова по событиюaddEventа такжеfireEvent;
для отправки протоколаsend.

Совместимость с Android:

Если вы читали предыдущую статьюПринципыдетская обувь, у вас может возникнуть вопрос: когда Android 4.4 или ниже, используйтеloadUrlВызов функции js, но возвращаемое значение функции не может быть получено в это время, что означает, что Android не может пройти 4.4-getParamЭта функция используется для получения параметров протокола.Здесь требуется обработка совместимости, и мы можем использовать кривую для спасения страны.Используемый принцип - другая H5 -> Native, упомянутая в предыдущей статье.программа:

Оперативный перехват в WebView

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

Когда Android принимает протокол и получает значение обработчика;
Используйте без проблем с совместимостьюloadUrlВыполнить js:Bridge.getParam(handler), напрямую передать возвращаемое значение непосредственно через js вpromptпроблема:

путем переписыванияonJsPromptЭтот метод перехватывает содержимое приглашения, выданного на предыдущем шаге, и анализирует соответствующие параметры;

Таким образом, все платформы Android могут выполнять сбор параметров, и метод унифицирован, и нет необходимости быть совместимым с разными платформами, что очень удобно. ~~🤘🏻🤘🏻

Глядя на это сейчас, тебе не кажется, что жарить курицу легко? . Я могу написать 100 за минуту. 😂. Вот так! На самом деле, основной принцип очень прост, но это всего лишь самый базовый фундамент, и, основываясь на фундаменте, мы можем начать строить наше здание слой за слоем!

Строительство зданий --- Настройка протоколов

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

Сначала мы можем разделить эти протоколы нафункциональное соглашениеа такжеделовое соглашение.

функциональное соглашение

Этот вид договора относится кУлучшить основные функции всего набора программнекоторые общие протоколы дляcommand://Как общий заголовок, он инкапсулирован в SDK и может использоваться во всех приложениях и WebView:

1. Механизм инициализации

Как упоминалось в предыдущей статье, из-за асинхронного характера внедрения bridge.js нам нужно, чтобы клиент уведомлял H5 после завершения внедрения.

Здесь мы можем договориться оОбщее событие инициализации, здесь мы согласны как_init_, поэтому внешний интерфейс может контролировать вход, аналогично нашему обычно используемомуDOMContentLoaded:

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

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

Точно так же мы можемЗаключить больше событий жизненного цикла страницы, например, поскольку приложение часто скрыто в фоновом режиме, при его активации мы можем задать жизненный цикл:_resume_, который можно использовать для активации страницы H5.

Tips:Здесь мы можем продемонстрировать, что черезмеханизм событияПреимуществом callback-системы является то, что мы можем отслеживать события наиболее привычным способом, а клиент может напрямую использоватьbridge.fireEvent('_init_', data)Запуск событий, так что это можно сделать элегантноНативное -> H5 одностороннее взаимодействие.

2. Механизм обновления пакетов

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

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

ресурс:

H5: по одному для каждого пакета кодовУникальный и увеличивающийся номер версии;
Родной: ПредоставляетсяЗагрузите пакет и распакуйте его в соответствующий каталог.Внешний интерфейс может вызывать эту функцию по следующему протоколу.

Сервер: Предоставляет интерфейс, который можетПолучите номер версии и адрес загрузки последнего пакета кода онлайн.

обработать:

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

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

3. Система среды и многоязычная система

Часто мы разделяем наши проекты на несколько отдельных сред, изолированных друг от друга. Поскольку гибридный модуль находится в приложении, среда должна быть согласована с приложением.Здесь вы можете напрямую использовать первый пункт, упомянутый выше._init_данные переносятся вdata.envсоответствовать:

env: 0 - официальная среда 1 - тестовая среда 2 - среда разработки

Точно так же многоязычность также может использоваться напрямую.e.data.languageпрямое совпадение;

Советы:

Механизм среды обычно в основном используется для соответствия внутренней среде, а формальная среда и тестовая среда соответствуют разным интерфейсам. Здесь есть нечто особенное, то есть нужно обратить внимание на обновление пакета кода.Вышеуказанные условия обновления пакета должны включать три аспекта:Номер версии, среда и версия приложения, в разных средах и разных версиях приложения его также следует обновить до соответствующего последнего пакета кода.

4. Станция передачи событий

Поскольку страница разработана на H5, Native может потребоваться управлять страницей H5, например, в наиболее часто используемых сценариях:

Когда на странице появляется всплывающее окно или SPA переключает страницы,Клавиша возврата AndroidОн должен быть в состоянии выполнить соответствующий резервный вариант, а не закрывать напрямую, потому что у WebView нет истории.

Подобно этому виду спроса, здесь вы можете настроитьцентр событий(_eventListeners_), который используется для прослушивания ключа возврата сущности клиента:

5. Механизм передачи данных

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

Советы:

Гибридные модули обычно нужно вводить из соответствующей записи, поэтому вот оптимизированный способ:

Приложение сначала получает онлайн-данные при запуске и напрямую проходит после входа в WebView._init_или триггерgetDataОтправить прямо на H5, что может сократить количество запросов и оптимизировать взаимодействие с пользователем.

6. Прокси-запросы

Наиболее часто используемый запрос в H5, обычно мы можем использовать ajax напрямую, но здесь есть несколько проблем:

наиболее общийзапросить перекрестный домен;
данныеАлгоритм шифрования;
ПользовательПодтверждение входа;

Запрос клиента не будет иметь этих проблем, поэтому мы можем проксировать запрос, который мы отправляем клиентом, и мы можем настроить 4 протокола:getProxy,postProxy,getProxyLogined,postProxyLogined, который имеетLoginedПротокол означает, что при запросеПереносить такие параметры, как токен и uid вошедшего в систему пользователя., используемый на некоторых интерфейсах, требующих регистрационной информации. Преимущество этого в том, что

Стороне H5 не нужно иметь дело с большим количеством сложной информации и не нужно выполнять перекрестную передачу;
Он может унифицировать экспорт запросов H5 и Native, что удобно для обработки.

7. Еще

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

getNetwork: Получить статус сети;
openApp: разбудить другие приложения;
setShareInfoа такжеcallShare: делиться контентом на сторонних платформах;
link: открыть страницу с новым WebView;
closeWebview: закрыть веб-просмотр;
setStorageа такжеgetStorage: установить и получить кэшированные данные;
loading: вызов клиента общей загрузки;
setWebviewTitle: Установите заголовок WebView;
saveImage: сохранить изображение на локальный диск;
...

Здесь можно определить более общие протоколы, и существует принцип, которому следует следовать, то есть эта часть протокола должна бытьБазовые функции должны быть чистыми и применимыми ко всем сторонам бизнеса.. В соответствии с концепцией, упомянутой в предыдущей статье, эта часть поддерживается и обновляется как общий SDK, поэтому она не должна связываться с какой-либо логикой бизнес-уровня.

Иногда нам нужно настроить некоторую бизнес-логику, например, в упомянутом выше проекте нам нужно преобразовать пользовательские изображения в мультяшные изображения с помощью алгоритмов. Такое требование очень ориентировано на бизнес и не распространяется на другие проекты, поэтому мы должны превратить его в деловое соглашение.

деловое соглашение

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

Этот тип протокола обычно не входит в состав SDK, поэтому его необходимо настроить детскими ботинками клиента для WebView проекта, и использовать базовые функции, предоставляемые bridge.js, для реализации соответствующих сложных функций. В других записях проекта эти протоколы использовать нельзя.

Суммировать

Вы вздохнули с облегчением, когда прочитали слово резюме? . 😅. Благодаря этим двум статьям мы, наконец, полностью разобрали интерфейсную часть гибридного решения. Вы чувствуете себя отдохнувшим и готовым сразу же приступить к гибридному путешествию? Хлопать хлопать! ! 👏👏👏! !

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

Из-за нехватки места я напишу еще одну статью по оптимизации для этой части, когда у меня будет время, в основном для того, чтобы обсудить с вами некоторые решения по оптимизации, которые мы можем придумать. Я с нетерпением жду, когда большие ребята дадут нам больше предложений и решений. Спасибо~~😇

больше статейПрикоснись ко мнеИли обратите внимание на публичный аккаунт, чтобы прочитать. . 😻😻😻