Lucram la un anumit proiect la locul de muncă, în care trebuia să conectez mai multe componente diferite prin mesaje. Fiecare avea propria sa logică și limbaj de cod. Acest lucru m-a făcut să vreau să înțeleg toate modurile în care diferite platforme permit comunicarea.

Scopul acestui articol este de a explica aceste punți de comunicare cross-origine și de a prezenta exemple simple, dar informative, pentru a le realiza.

Vor fi, de asemenea, o mulțime de jocuri de cuvinte de pod?

AȚI FOST AVERTIZAT.

Dacă doriți doar să vă murdăriți mâinile cu codul, există linkuri către depozitele GitHub din partea de jos a acestui articol.

De obicei, JavaScript pe care îl scrieți va rula într-un browser. Pe iOS, poate fi un UIWebView sau un WKWebView. Pe Android, un WebView.

Deoarece iOS poate fi platforma mai exasperantă, voi descrie mai întâi podul de comunicare de acolo.

London Bridge is Falling Down (iOS)

Începând cu iOS 8, Apple recomandă utilizarea WKWebView în loc de UIWebView, deci următoarele vor aborda doar podul de pe un WKWebView.

Pentru o referință UIWebView, vă rugăm să mergeți aici.

Pentru a trimite mesaje din WKWebView către JavaScript, utilizați metoda de mai jos:


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

Pentru a primi mesaje de la JavaScript în WKWebView, trebuie să faceți următoarele:

  1. Creați o instanță de WKWebViewConfiguration
  2. Creați o instanță de WKUserContentController
  3. Adăugați un controler de mesaje script la configurația dvs. (această parte acoperă decalajul). Această acțiune înregistrează, de asemenea, gestionarul de mesaje pe obiectul ferestrei sub următoarea cale: window.webkit.messageHandlers.MSG_HANDLER_NAME
  4. Faceți clasa să implementeze protocolul de gestionare a mesajelor adăugând în partea de sus a fișierului
  5. Implementați userContentController: didReceiveScriptMessage (această metodă gestionează primirea mesajelor de la JavaScript)

Construirea podurilor

Să presupunem că avem următoarea pagină HTML configurată:

<html>
  
  <head>
    <title>Javascript-iOS Communication</title>
  </head>
  
  <body>
    
    <script>
      window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");
    </script>
  </body>
  
  
</html>

Și în codul nostru nativ implementăm pașii descriși mai sus:

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

Și violà! Acum aveți JavaScript complet – Comunicare iOS!

Cum sa construiti punti de comunicatie cross origine in iOS si
Fotografie de Todd Diemer pe Unsplash

Trecerea podului (Android)

Lucrurile sunt mult mai simple și mai prietenoase aici. Pentru a configura puntea noastră de comunicații, există doar câțiva pași:

  1. Creați o instanță a WebView obiect
  2. Activați JavaScript în acest WebView (setJavaScriptEnabled)
  3. Setați-vă propria interfață JavaScript (care va conține metode care sunt vizibile pentru JavaScript)
  4. Orice metodă pe care doriți să o expuneți la JavaScript trebuie să aibă @JavascriptInterface adnotare înainte de declararea acesteia

Ca și înainte, să presupunem că am creat acest fișier HTML:

Și am creat următoarea aplicație Android simplă:

Și iată-te!

Acum te poți considera un ninja nativ al comunicării!

Iată linkurile către depozite:

AndroidtoJS RepositoryDepozit iOStoJS

⚠️ Notă importantă referitoare la iOS ⚠️

Când ajungeți la punctul în care doriți să vă distrugeți WKWebView, este imperativ că eliminați gestionarul de mesaje script. Dacă nu faceți acest lucru, gestionarul de mesaje script va păstra în continuare o referință la WKWebView și vor apărea scurgeri de memorie la crearea noilor WKWebViews.