正文

掌握Webview JS调用原生技巧，轻松实现网页与手机应用的无缝对接

/0 浏览量
0521

在移动应用开发中，WebView是连接网页和原生应用的关键桥梁。通过WebView，开发者可以轻松实现网页内容在应用中的展示，并且能够通过JavaScript与原生代码进行交互，从而实现网页与手机应用的无缝对接。本文将详细介绍如何在Android和iOS平台上，利用WebView的JS调用原生技巧，实现这一功能。

Android平台下的WebView JS调用原生

在Android平台上，WebView提供了丰富的API来与原生代码进行交互。以下是一些常用的方法：

1. 通过Intent调用原生方法

Android中，可以通过发送Intent来调用原生方法。以下是一个简单的示例：

// JavaScript代码
function callNativeMethod() {
    var intent = new Intent();
    intent.setAction("com.example.ACTION_NATIVE_METHOD");
    intent.addCategory("android.intent.category.DEFAULT");
    intent.setPackage("com.example.app");
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    context.startActivity(intent);
}

// 原生代码
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebAppInterface(), "NativeInterface");
    }

    public class WebAppInterface {
        @JavascriptInterface
        public void callNativeMethod() {
            // 原生方法实现
        }
    }
}

2. 通过Native方法回调

在JavaScript中，可以使用NativeMethod对象来调用原生方法。以下是一个示例：

// JavaScript代码
NativeMethod.callNativeMethod();

// 原生代码
public class NativeMethod {
    @JavascriptInterface
    public void callNativeMethod() {
        // 原生方法实现
    }
}

iOS平台下的WebView JS调用原生

在iOS平台上，WebView与JavaScript的交互主要通过WKWebView和WKScriptMessageHandler实现。

1. 使用WKWebView

首先，在iOS项目中引入WKWebView：

import WebKit

class ViewController: UIViewController {
    var webView = WKWebView()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.frame = self.view.bounds
        self.view.addSubview(webView)
        let request = URLRequest(url: URL(string: "https://www.example.com")!)
        webView.load(request)
    }
}

2. 使用WKScriptMessageHandler

在iOS项目中，创建一个WKScriptMessageHandler的实现，用于处理JavaScript发送的消息：

import WebKit

class MyScriptMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "myMessage" {
            // 处理消息
        }
    }
}

class ViewController: UIViewController {
    var webView = WKWebView()
    var scriptMessageHandler = MyScriptMessageHandler()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.frame = self.view.bounds
        self.view.addSubview(webView)
        let request = URLRequest(url: URL(string: "https://www.example.com")!)
        webView.load(request)
        userContentController.add(scriptMessageHandler, name: "myMessage")
    }
}

通过以上方法，开发者可以在Android和iOS平台上实现WebView与原生代码的交互。在实际开发过程中，可以根据需求选择合适的方法，实现网页与手机应用的无缝对接。

-- 展开阅读全文 --