Kamome

Kamome 是一个用于 iOS 和 Android 应用的库，使用了 WebView。这个库架起了WebView中的 JavaScript 与 Swift、Java 或 Kotlin 编写的本地代码之间的桥梁。

Kamome 为 iOS 和 Android 提供了常用的 JavaScript 接口。

快速使用

从 JS 代码向本地代码发送消息

1. 从 JavaScript 代码发送消息

   // JavaScript
   
   // Send `echo` command.
   Kamome.send('echo', { message: 'Hello' }).then(function (result) {
       // Receive a result from the native code if succeeded.
       console.log(data.message);
   }).catch(function (error) {
       // Receive an error from the native code if failed.
       console.log(error);
   });

2. 在 iOS 上接收消息

   // Swift
   
   private lazy var webView: WKWebView = {
       let webView = WKWebView(frame: self.view.frame)
       return webView
   }()
   
   private var kamome: Kamome!
   
   override func viewDidLoad() {
       super.viewDidLoad()
   
       // Create the Kamome object with default webView.
       self.kamome = Kamome(webView: self.webView)
   
       // Register `echo` command.
       kamome.add(Command(name: "echo") { commandName, data, completion in
                 // Received `echo` command.
                 // Then send resolved result to the JavaScript callback function.
                 completion.resolve(with: ["message": data!["message"]!])
                 // Or, send rejected result if failed.
                 //completion.reject(with: "Echo Error!")
             })
   
       let htmlURL = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www")!
       self.webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL)
       view.addSubview(self.webView)
   }

   【注意】此框架仅支持 WKWebView。UIWebView 不受支持。

3. 在 Android 上接收消息

   // Java
   
   private Kamome kamome;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   
       WebView webView = findViewById(R.id.webView);
   
       // Create the Kamome object with the webView.
       kamome = new Kamome(webView)
           .add(new Command("echo", new Command.IHandler() {  // Register `echo` command.
   
               @Override
               public void execute(String commandName, JSONObject data, ICompletion completion) {
                   // Received `echo` command.
                   // Then send resolved result to the JavaScript callback function.
                   HashMap<String, Object> map = new HashMap<>();
                   map.put("message", data.optString("message"));
                   completion.resolve(map);
                   // Or, send rejected result if failed.
                   //completion.reject("Echo Error!");
               }
           }));
   
       webView.loadUrl("file:///android_asset/www/index.html");
   }

从本地代码向 JS 代码发送消息

1. 在 iOS 上从本地代码发送消息

   // Swift
   
   // Send a data to JavaScript.
   kamome.sendMessage(with: ["greeting": "Hello! by Swift"], name: "greeting") { (commandName, result, error) in
       // Received a result from the JS code.
       guard let result = result else { return }
       print("result: \(result)")
   }

2. 在 Android 上从本地代码发送消息

   // Java
   
   // Send a data to JavaScript.
   HashMap<String, Object> data = new HashMap<>();
   data.put("greeting", "Hello! by Java");
   kamome.sendMessage(data, "greeting", new Kamome.ISendMessageCallback() {
   
       @Override
       public void onReceiveResult(String commandName, Object result, Error error) {
           // Received a result from the JS code.
           Log.d(TAG, "result: " + result);
       }
   });

3. 在 JavaScript 代码上接收消息

   // JavaScript
   
   // Add a receiver that receives a message sent by the native client.
   Kamome.addReceiver('greeting', function (data, resolve, reject) {
       // The data is the object sent by the native client.
       console.log(data.greeting);
   
       // Run asynchronous something to do...
       setTimeout(function () {
   
           // Return a result as any object or null to the native client.
           resolve('OK!');
           // If the task is failed, call `reject()` function.
           //reject('Error message');
       }, 1000);
   });

导入 kamome.js 或 kamome.min.js

<script src="/path/to/kamome[.min].js"></script>

或者，您可以将 kamome.js 文件中的所有代码复制到您的 JavaScript。

2. iOS App

CocoaPods

Kamome 可以通过 CocoaPods 获取。要安装它，只需将以下行添加到您的 Podfile 中

pod "SwiftyKamome"

手动安装

将 SwiftyKamome.framework 拖放到您的 Xcode 项目中

import SwiftyKamome