Рубрики
Без рубрики

Как построить мосты связи с перекрестным происхождением в iOS и Android

Я работал над определенным проектом на работе, в котором мне нужно было подключить несколько различных компонентов по сообщениям. У каждого была своя логика и код кода. Это заставило меня хотеть понять все способы различные платформы включают в себя связь. Цель этой статьи состоит в том, чтобы объяснить эти перекрестные происхождения

Автор оригинала: FreeCodeCamp Community Member.

Я работал над определенным проектом на работе, в котором мне нужно было подключить несколько различных компонентов по сообщениям. У каждого была своя логика и код кода. Это заставило меня хотеть понять все способы различные платформы включают в себя связь.

Цель этой статьи состоит в том, чтобы объяснить эти мосты на связи с перекрестными происхождениями и представлять простые, но информативные, примеры для достижения их.

Также будет много мостовых капанов?

Вы были предупреждены.

Если вы просто хотите загрязнять свои руки кодом, есть ссылки на репозитории GitHub внизу этой статьи.

Как правило, JavaScript вы пишете, запустится внутри браузера. На IOS , Это может быть либо UIWEBVIEW или WKWEBVIEW. На Android , веб-просмотр.

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

Лондонский мост падает (iOS)

От iOS 8 далее Apple рекомендует использовать WkWebView вместо UIWEBVIEW, поэтому следующее будет обращаться только к мосту на A Wkwebview Отказ

Для ссылки на UiWebView, пожалуйста, перейдите здесь Отказ

Чтобы отправить сообщения из WkWebView на JavaScript, вы используете метод ниже:

- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^)(id, NSError *error))completionHandler;

Для получения сообщений от JavaScript внутри вашего wkwebview вы должны сделать следующее:

  1. Создать экземпляр Wkwebviewconfiguration
  2. Создать экземпляр Wkusercontentcontroller
  3. Добавьте обработчик сообщений скрипта в вашу конфигурацию (эта часть мостит зазор). Это действие также регистрирует ваш обработчик сообщений на окне объекта по следующему пути: window.webkit.messagehandlers.msg_handler_name.
  4. Сделайте класс реализовать протокол обработчика сообщений, добавив в верхней части файла
  5. Реализовать UsercontentController: DidreceivescriptScriptmessage (Этот метод обрабатывает получение сообщений от JavaScript)

Создание мостов

Допустим, у нас есть следующая настроек HTML-страницы:


  
  
    Javascript-iOS Communication
  
  
  
    
    
  
  
  

А в нашем родном коде мы реализуем шаги, описанные выше:

#import 
#import 

// 4
@interface ViewController : UIViewController 

@property(nonatomic, strong) WKWebView *webview;

И виол! Теперь у вас есть полный JavaScript – IOS Communication!

Пересечение моста (Android)

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

  1. Создайте экземпляр A WebView объект
  2. Включить JavaScript внутри этого WebView ( setjavascriptenabled )
  3. Установите свой собственный интерфейс JavaScript (который будет проводить методы, которые видны для вашего JavaScript)
  4. Любой метод, который вы хотите, чтобы ваш Javascript, должен иметь @Javascriptinterface Аннотация до его декларации

Как и прежде, давайте предположим, что мы создали этот HTML-файл:

И мы создали следующее простое приложение для Android:

И там вы идете!

Теперь вы можете считать себя местным общением ниндзя!

Вот ссылки на репозитории:

⚠️ Важное примечание относительно iOS ⚠️

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