H5 должен знать и уметь взаимодействовать с приложением

В этой статье мы рассмотрим несколько распространенных шаблонов взаимодействия H5 с приложениями.

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

Содержание этой статьи следующее:

Обзор
базовый интерфейс
односторонний вызов
Двусторонний вызов
Режим реализации
какая сторона доминирует

Обзор

H5 в Китае специально используется для обозначения технологии разработки веб-страниц, встроенных в приложения для мобильных телефонов.Похоже, что в других странах этого термина нет. Технически H5 — это сокращение от HTML5 или языка гипертекстовой разметки версии 5. И HTML — это лишь одна из многих технологий, используемых для разработки веб-страниц. В дополнение к HTML вам нужно использовать CSS для разработки интерфейса, JavaScript для реализации взаимодействия и даже Node.js для реализации логики на стороне сервера. Почему H5 используется для обозначения этих технологий в целом? Я думаю, во-первых, потому что это просто, а во-вторых, технология мобильной веб-разработки просто нуждается в такой концепции.

Мобильная веб-страница запускается в движке браузера, встроенном в мобильное приложение.Этот контейнер ядра без пользовательского интерфейса в совокупности называется WebView, то естьUIWebView для iPhone(iOS 2.0–12.0),WKWebView(iOS 8.0+, macOS 10.10+) иAndroid-веб-просмотр. Вкратце, WebView — это интерфейс и интерфейс для запуска и отображения веб-страниц в мобильных приложениях (волшебным образом с английского Interface можно перевести как «интерфейс» или «интерфейс»).

Взаимодействие между H5 и собственным приложением реализуется через WebView в собственном приложении. Через эту среду H5 может вызывать метод собственного объекта, введенного собственным приложением, и собственное приложение также может вызывать метод объекта JavaScript, предоставляемого H5 в этой среде, чтобы реализовать передачу инструкций и данных.

Например, в приложении для AndroidWebViewкласс имеет публичный методaddJavascriptInterface, подписанный как:

public void addJavascriptInterface (Object object, String name)

Вызовите этот метод, чтобы отправить указанное имя в WebViewnameВнедрить указанный объект Javaobject.这样，WebView 中的 JavaScript 就可以通过nameпередачаobjectМетоды. Например:

class JsObject {
    @JavascriptInterface
    public String toString() { return "injectedObject"; }
 }
 webview.getSettings().setJavaScriptEnabled(true);
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");

В iOS или macOS вам необходимо создатьWKWebViewЭкземпляры класса встроены в веб-страницы в приложении, и процесс взаимодействия аналогичен.

базовый интерфейс

Так называемый базовый интерфейс заключается в том, чтобы сначала указать, какие объекты вводятся/выставляются в WebView собственным приложением и JS:

NativeBridge: объект, введенный в WebView собственным приложением.
JSBridge: Объект, предоставляемый JS в WebView.

И договоритесь о том, какие методы можно вызывать у этих двух объектов:

NativeBridge.callNative(action, params, whoCare)
JSBridge.callJS(action, params, whoAmI)

Как подсказывает название,NativeBridge.callNativeэто метод, вызываемый JS для передачи инструкций или данных в Native, иJSBridge.callJSЭто метод, вызываемый Native для передачи инструкций или данных в JS. Параметры в сигнатуре метода имеют следующие значения:

action: Строка, что вы хотите, чтобы Native/JS делал
params: объект JSON, данные для передачи в Native/JS
whoCare: числовое значение, указывающее, на какую сторону JS ожидает ответа.
whoAmI: числовое значение, указывающее, какая сторона вызывает JS.

Базовый интерфейс имеет только два объекта и два метода, а взаимодействие между JS и приложением осуществляется черезactionа такжеparamsрасширить и определить.

Режим реализации

Для JS, хотя здесь определены только один объект и один метод, на практике можно использоватьactionРеализация соответствующего метода прилагаетсяJSBridgeвверх, просто положиcallJSЕго можно реализовать как метод отправки, например:

window.JSBridge = {}
window.JSBridge.callJS = function({action, params, whoAmI}) {
  return window.JSBridge[action](params, whoAmI)
}

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

Другой способ сделать это -switch...caseОператоры реализуют диспетчеризацию вызовов, например:

function callJS (action, params, whoAmI) {
  params = JSON.parse(JSON.stringify(params))
  switch (action) {
    case 'showSkill':
      const category = params.category
      JSBridge.showSkill(category)
      break
    case 'showSkillDetail':
      const id = params.id
      JSBridge.showSkillDetail(id)
      break
    case 'otherAction':
      // some code
      break
    default:
  }
}
// JS暴露给应用的通用接口
const SpkJSBridge = {}
// 全部接口
JSBridge.callJS = callJS

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

Вышеуказанные два режима реализации имеют свои преимущества и недостатки.

односторонний вызов

Операция одностороннего вызова приложения, инициированная JS, в основном включает в себя загрузку URL-адреса и переключение на собственный интерфейс, что может соответствовать следующему:action:

loadUrl: загрузить другой URL
loadContent: переход к родному интерфейсу

loadUrlВызывается эталонный протокол следующим образом:

NativeBridge.callNative({
    action: 'loadUrl',
    params: { url },
    whoCare: 0
})

здесьNativeBridgeявляется собственным объектом App, которыйcallNativeКогда метод вызывается, он получает параметр объекта (словарь/карта). По этому параметруactionЗначение свойства, приложение знает, что действие, которое необходимо выполнить, — загрузить URL-адрес. Так что получитьparamsв атрибутеurl, вы можете отправить запрос.

loadContentВызывается эталонный протокол следующим образом:

NativeBridge.callNative({
  action: "loadContent",
  params: {
    type: "album",
    content: {
      album_id: "1"
    }
  },
  whoCare: 0
})

То же, здесьparamsНеобходимые параметры передаются приложению, и приложение отвечает за переход на соответствующий нативный интерфейс.

Односторонний вызов JS, инициированный приложением, в основном включает в себя нажатие пользователем кнопки «Назад» (action:

can_back: Спросите JS, требуется ли подтверждение пользователя перед возвратом.

can_backВызывается эталонный протокол следующим образом:

JSBridge.callJS({
  action: "can_back",
  params: {},
  whoAmI: 1/2
})

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

{
  can: true,
  target: "prev"
}

Как подсказывает название,can_backОн используется для того, чтобы приложение спрашивало JS: перед возвратом к предыдущему интерфейсу запрашивать ли у пользователя всплывающее окно?

в возвращаемом значенииcanеслиtrue, затем вернуться напрямую без запроса; если даfalse, появится окно подтверждения, запрашивающее у пользователя подтверждение. другое значениеtargetявляется целью возврата, согласованной с приложением, напримерprevозначает возврат на предыдущий уровень,topозначает возврат на верхний уровень и так далее.

Двусторонний вызов

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

loadComponent: вызов нативного компонента
displayNextButton: Отображает кнопки «Далее», «Сохранить» или «Готово».

loadComponentСправочный протокол выглядит следующим образом:

NativeBridge.callNative({
  action: 'loadComponent',
  params: {
    type: 'location',
    value,
    callbackName: 'set_location'
  },
  whoCare: 0
})

В этом примере он включает JS, вызывающий приложение для отображения его реализованного компонента выбора города:type: 'location', после того как пользователь выбирает город, приложение вызываетset_location, передайте выбранное пользователем название города в JS:

JSBridge.callJS({
  action: 'set_location',
  params: {
    value: '北京市朝阳区',
  },
  whoAmI: 1/2
})

JS обновляет интерфейс в соответствии с полученным значением и выполняет двусторонний вызов. Другим примером является JS, вызывающий собственный компонент выбора даты, который аналогичен.

почему это называетсяdisplayNextButton? Потому что в соответствии с конкретными бизнес-сценариями могут быть следующие три ситуации:

Текущему WebView не нужно отображать верхнюю правую кнопку, например страницу сведений;
Текущий WebView должен отображать кнопку «Далее» или «Сохранить», но она должна быть неактивна;
Текущий WebView должен отображать кнопку «Далее» или «Сохранить», которую пользователь может нажать.

displayNextButtonЭталонная реализация протокола выглядит следующим образом:

NativeBridge.callNative({
  action: "displayNextButton",
  params: {
    name: "下一步",
    enable: false,
    callbackName: "save_form"
  },
  whoCare: 0
})

В приведенном выше примере кода показано, что JS вызывает приложение, сообщая приложению показать кнопку «Далее», но отключить ее затенение, потому чтоenable: false. Если прошлоenable: true, то пользователь может нажать кнопку «Далее». После нажатия приложение вызывает JSsave_form. Наконец, если вы не хотите показывать кнопку, вы можете передатьname: ''.

Следующее фокусируется на том, что пользователь нажимает кнопку «Далее», приложение вызываетsave_formместо действия. На данный момент есть две ситуации:

JS сохраняет данные напрямую
JS сохранить данные через приложение

Если JS сохраняет данные через приложение — возможно, потому, что на стороне приложения реализован необходимый механизм шифрования для записи данных — тогда JS можно вызывать в приложении.save_formКогда согласованные данные будут возвращены в Приложение, Приложение сохранит данные.

Если JS напрямую сохраняет данные, например, через Ajax, то после сохранения данных вам также необходимо вызвать ранее упомянутое приложение, выставленноеloadUrlилиloadComponentспособ сообщить приложению о переключении интерфейсов. Конечно, в этом случае будет и третий звонок, но это все же двусторонний звонок.

какая сторона доминирует

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

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