js调用原生webview

在Web开发中，有时需要JavaScript（JS）与原生WebView进行交互，以实现更复杂的功能或访问设备特定的API。以下是关于JS调用原生WebView的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

WebView 是一个可以加载并显示网页内容的组件，常见于移动应用开发中（如Android的WebView或iOS的WKWebView）。通过WebView，开发者可以在原生应用中嵌入网页内容。

JS调用原生WebView 是指通过JavaScript与WebView中的原生代码进行通信，使得网页能够调用原生应用的功能或获取设备信息。

优势

功能扩展：网页可以利用设备的原生功能，如摄像头、地理位置等。
用户体验：可以提供更流畅和响应更快的用户体验，尤其是在需要频繁交互的场景中。
代码复用：可以在多个平台上复用网页内容，减少开发和维护成本。

类型

JS调用原生代码：网页中的JavaScript通过特定的接口调用原生代码。
原生代码调用JS：原生代码可以通过WebView提供的接口调用网页中的JavaScript函数。

应用场景

混合应用开发：在混合应用中，网页和原生代码需要频繁交互。
单页应用（SPA）：在SPA中，可能需要调用设备的原生功能。
支付集成：在网页中集成支付功能时，可能需要调用原生支付SDK。

实现方式

Android

在Android中，可以通过addJavascriptInterface方法将Java对象注入到WebView中，使得JavaScript可以调用该对象的方法。

// Android原生代码
public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.loadUrl("file:///android_asset/index.html");

<!-- HTML中的JavaScript代码 -->
<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

iOS

在iOS中，可以通过WKScriptMessageHandler协议实现JavaScript与原生代码的通信。

// iOS原生代码
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    override func viewDidLoad() {
        super.viewDidLoad()

        let webView = WKWebView(frame: self.view.frame)
        self.view.addSubview(webView)

        let contentController = WKUserContentController()
        contentController.add(self, name: "nativeHandler")

        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        webView.configuration = config
        webView.load(URLRequest(url: URL(string: "http://yourdomain.com")!))
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeHandler", let messageBody = message.body as? String {
            print("Received message from JS: \(messageBody)")
        }
    }
}

<!-- HTML中的JavaScript代码 -->
<script type="text/javascript">
    function sendMessageToNative(message) {
        window.webkit.messageHandlers.nativeHandler.postMessage(message);
    }
</script>

可能遇到的问题和解决方案

安全性问题：在使用addJavascriptInterface时，需要注意安全性，避免注入攻击。可以通过@JavascriptInterface注解来确保只有特定的方法可以被调用。
兼容性问题：不同版本的WebView可能会有不同的行为，需要进行充分的测试。
性能问题：频繁的JS与原生代码交互可能会影响性能，需要优化调用频率和方式。