Начните с функции jsBridge
Страница H5 переносится WebView, а связь между JS и собственными необходимо реализовать. Обычно используемые функции следующие:
Например:
// 打开新容器承载H5
this.state.jsBridge.openWebView({
'action': 'https://XXX.XXX.com',
'login': true
})// 销毁webview
this.state.jsBridge.quitAction()// 控制客户端顶部back按钮-触发回调函数
this.state.jsBridge.handleBackAction("openCancelPayModal", window.openCancelPayModal, true);Таким образом, весь поток общения выглядит так.
Клиент будет включать в себя объекты jsbridge в нижнем окне, при вызове триггера JSBridge (например, для состояния входа в систему) будет перехвачен методом события и обработанного клиентом перехватчика.
Оптимизация коммуникационной модели jsBrige
Когда js инициирует объект jsBridge для запуска определенного метода, он фактически переходит к перехватчику клиента и отвечает нативным образом.Этот процесс заключается в отправке сообщения клиенту. Клиент вызывает функцию обратного вызова внешнего интерфейса и возвращает данные, которые фактически отправляют сообщение на страницу H5. На основе этого механизма отправки сообщений модель связи может быть дополнительно оптимизирована.
преимущество:
1. Фронтенду и клиентской стороне не нужно слишком много поддерживать метод jsBridge, нужно только поддерживать короткую цепочку функций, например:
// 打开新容器，并且要求用户已登录
this.state.jsBridge.emit({
name:'page1Event',
action: 'XXX/openWebView',
globle: false,
params: {
login: true
}
})Среди них действие относится к короткой цепочке функций, а метод emit — это мост, который инициирует сообщение в целом.
Функция, используемая для получения ответного сообщения, должна быть передана в виде обратного вызова в старой модели связи. Новая модель связи больше не требует громоздкой доставки обратного вызова, а использует общие функции для получения, такие как:
//通用的顶层方法接收客户端消息
window.onJsBridgeEvent = function (json) { console.log(json) }PS: Globle используется для обработки глобальных сообщений, что позволяет избежать потери производительности по умолчанию. Открытие Globle требует обработки имен имен страниц, требует, чтобы имя события страницы гарантировало уникальность (например: страница настроена на вкладке, также можно снова открыть страницу A в других вкладках, есть две страницы, если имя события страницы единообразно, оно будет привести к тому, что глобальные сообщения будут обрабатываться двумя A-страницами, но мы хотим, чтобы сообщение в это время было помещено только в верхнюю часть контейнера.
2. Удовлетворяйте больше интерактивных сценариев
Отправьте сообщение в webview3, чтобы уведомить клиента об уничтожении webview2, после чего может быть реализована модель связи, основанная на отправке сообщения.
Все открытые в данный момент веб-просмотры могут получать клиентские глобальные сообщения, такие как реализация таких функций, как выход из системы и коллективное уничтожение.
Принцип связи
Только что упомянутая инъекция jsBridge, перехватчик на стороне клиента.
android
Android Call Call js Метод:
1. Через loadurl веб-просмотра
2. Оцените Javascript через веб-просмотр
Инъекция jsBridge и перехватчики
1. Отображение объектов через addJavascriptInterface() WebView
2. Перехватить URL через обратный вызов метода shouldOverrideUrlLoading() WebViewClient
3. Перехватывать JS диалоговые сообщения alert(), confirm(), prompt() с помощью обратных вызовов методов WebChromeClient onJsAlert(), onJsConfirm(), onJsPrompt()
ios
использоватьWebViewJavaScriptBridge
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}Чтобы понять, что делает этот код, вы можетекликните сюда
WebViewJavascriptBridge — это объект-мост, предоставляемый ios, но он не предоставляется, когда уровень контейнера инициализируется в начале, поэтому код будет продолжаться до тех пор, пока не будут выполнены WVJBCallbacks (хранит функции, которым нужны обратные вызовы) и wvjbscheme://__BRIDGE_LOADED__.
wvjbscheme: // __ BRIDGE_LOADED__ целью этого соглашения является создание WebViewJavascriptBridge, связанные с ним кадры:
Строка 127:GitHub.com/Маркус Уэст и…
На данный момент объект jsbridge предоставляется для внешнего использования.
Следующим шагом является вызов возможностей ios, таких как вызов аутентификации клиента по реальному имени:
this.state.jsBridge.callHandler("realNameAuthentication");callHandler jsbridge как объект внутри, метод _doSend callHandler, используемый в процессе, уведомляет клиента, связанного с темой, следующим образом:
Здесь messageIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE; это:
messagingIframe.src = https + '://' + "__wvjb_queue_message__"; Здесь __wvjb_queue_message__ действует как перехватчик, запускающий ios для обработки.
По сути, он все равно перехватывается перехватчиком в итоге, но UI webview ios и перехватчик WK webview будут отличаться:
Веб-просмотр пользовательского интерфейса: shouldStartLoadWithRequest
Веб-просмотр WK:solvePolicyForNavigationAction
Оптимизация производительности веб-просмотра
процесс рендеринга веб-просмотра
(Выдержка из: Техническая группа MeituanСпециальности.Meituan.com/2017/06/09/… )
От пользователя использовать процесс примерно следующим образом:
1. Откроется новое окно
2. Страница белый экран
3. Отрисовывается основной скелет страницы, но нет данных
4. Сбор данных завершен, и общий рендеринг страницы заканчивается.
Часть причины медлительности: веб-просмотр для загрузки URL-адреса не похож на процесс загрузки браузером URL-адреса, а веб-просмотр имеет процесс инициализации.
webview init
Чтобы улучшить время инициализации, обычная практика такова:
Когда приложение запускается, скрытое веб-представление инициализируется и ожидает использования. Когда пользователь щелкает URL-адрес для загрузки, веб-представление напрямую используется для загрузки, тем самым сокращая время инициализации веб-просмотра. Недостатком является то, что это приводит к дополнительным затратам памяти.
использование кеша веб-просмотра
Чтобы повысить скорость загрузки H5, будет использоваться режим кэширования веб-просмотра.
Возьмите Android в качестве примера:
LOAD_CACHE_ONLY: не использовать сеть, только читать данные локального кеша,
LOAD_DEFAULT: берутся ли данные из сети в соответствии с установленным управлением кешем,
Load_Cache_Normal: API Уровень 17 был отбран, наступление действия с API Уровень 11 - - Load_Default Mode,
LOAD_NO_CACHE: не использовать кеш, только получать данные из сети,
LOAD_CACHE_ELSE_NETWORK, пока он доступен локально, независимо от того, истек ли срок его действия или нет, или без кеша, используйте данные в кеше.
Если элемент управления кэш-памятью страницы для NO-CESE, в режиме Load_default, в любом случае, в любом случае из сети из сети, если нет сети, будет страница ошибки; в режиме load_cache_else_network, независимо от того, есть ли сеть, как Долгое, как есть локальный кеш, используйте кэш. Когда в сети отсутствует локальный кеш. Если страница Cache-Control AS MAX-AGE = 60, используйте данные локального кэша в два режима.
Чтобы улучшить скорость рендеринга H5 в веб-просмотре, недостаточно только внешней поддержки, и клиенту необходимо принять разумный режим кэширования.кликните сюда.
Модель связи апплета WeChat
Рендеринг и логика не выполняются в одной и той же среде. Слой логики находится в чистой среде js, а уровень рендеринга передается веб-просмотру, поэтому wxml и wxss находятся на уровне рендеринга. Связь между этими двумя потоками будет ретранслируется через клиент WeChat.Логический уровень Отправка сетевых запросов также перенаправляется через Native.
Общие сведения о слоях рендеринга
Объект окна Andrews WebView должен внедрить собственный метод, такой как WeiXinJSBridge, в конечном итоге инкапсулированный в слой совместимости, который предлагает вызов (Invoke) и мониторинг (on) этих двух методов. Разработчики вставляют собственный компонент, когда, как правило, запускаемые компоненты вставляются в дерево DOM, вызывают клиентский интерфейс, уведомляют клиента о необходимости отображения собственного интерфейса в какой позиции. При последующем обновлении свойств разработчика компонента таким же образом также вызывается интерфейс, предоставленный клиентом для обновления, чтобы обновить определенные части собственного интерфейса.
Понимание логического уровня
Среда выполнения js предоставляется WeChat, поскольку элементы управления настраиваются, поэтому эта среда песочницы не может иметь интерфейс браузера и предоставляет только среду выполнения js.
js: встроенная среда JavaScriptCore используется в iOS, а среда JsCore, предоставляемая ядром Tencent x5, используется в Android.
Почему бы не использовать веб-рендеринг?
Если для рендеринга небольших программ используется чистая веб-технология, в сложных бизнес-сценариях неизбежно возникнут проблемы с производительностью. Поскольку рендеринг пользовательского интерфейса и сценарий js выполняются в одном потоке, логические задачи js легко замещают ресурсы пользовательского интерфейса.
Ссылка на эту статью:
Техническая команда Meituan:Специальности.Meituan.com/2017/06/09/…
51Примечание:Tickets.WeChat.QQ.com/Yes/BJ KE и 7 поспешите-…
Тенсент Багли:blog.CSDN.net/Tencent_bug…