简介
skyinno-webview 是一个基于原生 WebView 的 JavaScript 接口库，可以让我们在 WebView 环境下，使用类似于原声应用一样的 JavaScript 代码来实现各种功能，并且提供了一些 Android 或 iOS 原生接口的调用。
安装
使用 npm 安装：
npm install skyinno-webview --save
安装完成后，我们可以在我们的项目中进行引用。
使用
准备工作
在使用 skyinno-webview 前，我们需要做一些准备工作，为了方便演示，这里只列举一些最基本的用法，如需更多配置，请参考官方文档。
注册 JavaScript 接口
我们需要在原生代码中注册我们要使用的 JavaScript 接口，例如我们要在 JavaScript 中调用原生的函数 toast，我们需要在原生代码中注册：
Android:
webView.addJavascriptInterface(new JsCallback(), "JsObj");
private class JsCallback {
@JavascriptInterface
public void toast(String message) {
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}
}iOS:
[self.webView addSubview:self.bridgeWebView]; [self.bridgeWebView addJavascriptInterface:self action:@selector(toast:)];
JS_EXPORT_METHOD(@selector(toast:))
- (void)toast:(NSString *)message {
UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
}调用函数
在准备工作完成后，我们就可以在 JavaScript 中进行调用了：
window.JsObj.toast("Hello skyinno-webview!");调用 toast 方法，将会显示一个弹窗提示 "Hello skyinno-webview!"。
其他用法
skyinno-webview 除了提供基础的方法调用，还支持其他丰富的功能，例如：
- 动态更新 HTML 内容。
- 实现 js 和原生的双向交互。
- 支持 js 检测原生环境。
- 监听 js 中的链接点击事件。
为了在有限的篇幅内进行演示，这里不再列举详细用法，如需了解更多，请参考官方文档。
示例代码
假设我们已经按照上述步骤完成准备工作，以下是一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------
-------
------
--------- ---------------------
------- ------------------------- -------------- -----------
--------
-------- ------------------ -
----------------------------
-
---------
-------
-------点击按钮将会显示一个提示框，提示框上显示 "Hello world"。
结语
skyinno-webview 是一个非常实用的接口库，它可以极大地方便我们在 Hybrid 开发中 js 和原生之间的交互，同时提供了很多内置的接口和扩展点，例如 js 实现各种 Native API 或者原生与 js 之间相互传送数据等，这让我们的 Hybrid 开发变得更加灵活和高效，希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554e581e8991b448d2193