Computer >> Máy Tính >  >> Hệ thống >> Android

Cách xây dựng cầu giao tiếp đa nguồn trong iOS và Android

Tôi đang thực hiện một dự án nhất định tại nơi làm việc, trong đó tôi cần kết nối một số thành phần khác nhau qua tin nhắn. Mỗi thứ đều có logic và ngôn ngữ mã riêng. Điều này khiến tôi muốn hiểu tất cả các cách mà các nền tảng khác nhau kích hoạt giao tiếp.

Mục đích của bài viết này là giải thích các cầu nối giao tiếp đa nguồn gốc này và trình bày các ví dụ đơn giản nhưng đầy đủ thông tin để đạt được chúng.

Cũng sẽ có nhiều trò chơi chữ cầu?

BẠN ĐÃ ĐƯỢC CẢNH BÁO.

Nếu bạn chỉ muốn nhúng tay vào mã, có các liên kết đến kho lưu trữ GitHub ở cuối bài viết này.

Thông thường, JavaScript bạn viết sẽ chạy bên trong trình duyệt. Trên iOS , nó có thể là UIWebView hoặc WKWebView. Trên Android , một WebView.

Vì iOS có thể là nền tảng khó chịu hơn, nên tôi sẽ mô tả cầu nối giao tiếp ở đó trước.

Cầu London đang sụp đổ (iOS)

Từ iOS 8 trở đi, Apple khuyên bạn nên sử dụng WKWebView thay vì UIWebView, vì vậy phần sau sẽ chỉ giải quyết cầu nối trên WKWebView .

Để tham khảo UIWebView, vui lòng truy cập vào đây.

Để gửi tin nhắn từ WKWebView sang JavaScript, bạn sử dụng phương pháp bên dưới:


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

Để nhận thông báo từ JavaScript bên trong WKWebView của bạn, bạn phải làm như sau:

  1. Tạo một phiên bản của WKWebViewConfiguration
  2. Tạo một phiên bản của WKUserContentController
  3. Thêm trình xử lý thông điệp tập lệnh vào cấu hình của bạn (phần này thu hẹp khoảng cách). Hành động này cũng đăng ký trình xử lý thư của bạn trên đối tượng window theo đường dẫn sau: window.webkit.messageHandlers.MSG_HANDLER_NAME
  4. Làm cho lớp triển khai giao thức xử lý thông báo bằng cách thêm ở đầu tệp
  5. Triển khai userContentController:didReceiveScriptMessage (phương thức này xử lý việc nhận thông báo từ JavaScript)

Xây dựng Cầu

Giả sử chúng ta đã thiết lập trang HTML sau:

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

Và trong mã gốc của chúng tôi, chúng tôi triển khai các bước được mô tả ở trên:

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

// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

Và violà! Bây giờ bạn có JavaScript đầy đủ - Giao tiếp iOS!

Cách xây dựng cầu giao tiếp đa nguồn trong iOS và Android
Ảnh của Todd Diemer trên Unsplash

Qua Cầu (Android)

Mọi thứ ở đây đơn giản và thân thiện hơn rất nhiều. Để thiết lập cầu nối giao tiếp của chúng tôi, chỉ có một số bước sau:

  1. Tạo một phiên bản của đối tượng WebView
  2. Bật JavaScript bên trong WebView này ( setJavaScriptEnabled )
  3. Đặt Giao diện JavaScript của riêng bạn (sẽ giữ các phương thức hiển thị với JavaScript của bạn)
  4. Bất kỳ phương pháp nào bạn muốn hiển thị với JavaScript của mình đều phải có @JavascriptInterface chú thích trước khi tuyên bố của nó

Giống như trước đây, giả sử chúng ta đã tạo tệp HTML này:

Và chúng tôi đã tạo Ứng dụng Android đơn giản sau:

Và bạn hiểu rồi!

Giờ đây, bạn có thể tự coi mình là Ninja giao tiếp bản địa!

Đây là các liên kết đến các kho:

Kho lưu trữ AndroidtoJS Kho lưu trữ iOStoJS

⚠️ Lưu ý Quan trọng về iOS ⚠️

Khi bạn đến mức bạn muốn phá hủy WKWebView của mình, đó là mệnh lệnh rằng bạn xóa trình xử lý thông báo tập lệnh của mình. Nếu bạn không làm như vậy, trình xử lý thông báo tập lệnh sẽ vẫn giữ một tham chiếu đến WKWebView của bạn và rò rỉ bộ nhớ sẽ xảy ra sau khi tạo WKWebView mới.