1. PingCode智库首页
  2. 百科

js与native怎么交互

Edit1 • • 百科

js与native怎么交互

JavaScript与Native交互的方式主要包括：WebView桥接、消息传递、调用API、数据序列化和反序列化。其中，WebView桥接是最常用的一种方式。 在现代移动开发中，尤其在混合应用（Hybrid App）和跨平台应用中，JavaScript与Native代码的交互变得越来越重要。接下来，我们将详细展开这些交互方式，探讨其实现方法和应用场景。

一、WebView桥接

1. 基本概念

WebView是一个嵌入在原生应用中的浏览器组件，它允许开发者在移动应用中加载和显示网页。通过WebView，JavaScript和原生代码可以实现双向通信。

2. 实现方法

iOS平台：

在iOS中，可以使用WKWebView和JavaScriptCore框架来实现JavaScript与Native代码的交互。以下是一个简单的例子：

import WebKit


class ViewController: UIViewController, WKScriptMessageHandler {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        let contentController = WKUserContentController()


        contentController.add(self, name: "jsHandler")


        let config = WKWebViewConfiguration()


        config.userContentController = contentController


        webView = WKWebView(frame: self.view.frame, configuration: config)


        self.view.addSubview(webView)


        let html = "<html><body><button onclick="window.webkit.messageHandlers.jsHandler.postMessage('Hello, Native!');">Click me</button></body></html>"


        webView.loadHTMLString(html, baseURL: nil)


    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {


        if message.name == "jsHandler", let messageBody = message.body as? String {


            print(messageBody)


        }


    }


}

Android平台：

在Android中，可以使用WebView和JavaScriptInterface来实现JavaScript与Native代码的交互。以下是一个简单的例子：

import android.os.Bundle;


import android.webkit.JavascriptInterface;


import android.webkit.WebChromeClient;


import android.webkit.WebView;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    WebView webView;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        webView = findViewById(R.id.webView);


        webView.getSettings().setJavaScriptEnabled(true);


        webView.setWebChromeClient(new WebChromeClient());


        webView.addJavascriptInterface(new WebAppInterface(this), "Android");


        String html = "<html><body><button onclick="Android.showToast('Hello, Native!');">Click me</button></body></html>";


        webView.loadData(html, "text/html", "UTF-8");


    }


    public class WebAppInterface {


        Context mContext;


        WebAppInterface(Context c) {


            mContext = c;


        }


        @JavascriptInterface


        public void showToast(String toast) {


            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();


        }


    }


}

二、消息传递

1. 基本概念

消息传递是一种常见的JavaScript与Native交互方式，主要用于在两者之间发送和接收数据。

2. 实现方法

iOS平台：

在iOS中，可以通过NSNotificationCenter实现消息传递。以下是一个简单的例子：

import UIKit


import WebKit


class ViewController: UIViewController, WKScriptMessageHandler {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        let contentController = WKUserContentController()


        contentController.add(self, name: "jsHandler")


        let config = WKWebViewConfiguration()


        config.userContentController = contentController


        webView = WKWebView(frame: self.view.frame, configuration: config)


        self.view.addSubview(webView)


        let html = "<html><body><button onclick="window.webkit.messageHandlers.jsHandler.postMessage('Hello, Native!');">Click me</button></body></html>"


        webView.loadHTMLString(html, baseURL: nil)


    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {


        if message.name == "jsHandler", let messageBody = message.body as? String {


            NotificationCenter.default.post(name: Notification.Name("JSMessage"), object: messageBody)


        }


    }


}


class AnotherViewController: UIViewController {


    override func viewDidLoad() {


        super.viewDidLoad()


        NotificationCenter.default.addObserver(self, selector: #selector(handleJSMessage(_:)), name: Notification.Name("JSMessage"), object: nil)


    }


    @objc func handleJSMessage(_ notification: Notification) {


        if let messageBody = notification.object as? String {


            print(messageBody)


        }


    }


}

Android平台：

在Android中，可以通过Handler实现消息传递。以下是一个简单的例子：

import android.os.Bundle;


import android.os.Handler;


import android.os.Looper;


import android.os.Message;


import android.webkit.JavascriptInterface;


import android.webkit.WebChromeClient;


import android.webkit.WebView;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    WebView webView;


    Handler handler;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        webView = findViewById(R.id.webView);


        webView.getSettings().setJavaScriptEnabled(true);


        webView.setWebChromeClient(new WebChromeClient());


        webView.addJavascriptInterface(new WebAppInterface(), "Android");


        handler = new Handler(Looper.getMainLooper()) {


            @Override


            public void handleMessage(Message msg) {


                if (msg.what == 1) {


                    String messageBody = (String) msg.obj;


                    System.out.println(messageBody);


                }


            }


        };


        String html = "<html><body><button onclick="Android.sendMessage('Hello, Native!');">Click me</button></body></html>";


        webView.loadData(html, "text/html", "UTF-8");


    }


    public class WebAppInterface {


        @JavascriptInterface


        public void sendMessage(String message) {


            Message msg = handler.obtainMessage(1, message);


            handler.sendMessage(msg);


        }


    }


}

三、调用API

1. 基本概念

调用API是一种较为直接的交互方式，主要用于JavaScript调用Native API和Native调用JavaScript API。

2. 实现方法

iOS平台：

在iOS中，可以通过URL Scheme来调用Native API。以下是一个简单的例子：

import UIKit


import WebKit


class ViewController: UIViewController, WKNavigationDelegate {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


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


        webView.navigationDelegate = self


        self.view.addSubview(webView)


        let html = "<html><body><button onclick="window.location.href='native://showAlert?message=Hello, Native!';">Click me</button></body></html>"


        webView.loadHTMLString(html, baseURL: nil)


    }


    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {


        if let url = navigationAction.request.url, url.scheme == "native" {


            let components = URLComponents(url: url, resolvingAgainstBaseURL: false)


            if components?.host == "showAlert", let message = components?.queryItems?.first(where: { $0.name == "message" })?.value {


                showAlert(message)


            }


            decisionHandler(.cancel)


        } else {


            decisionHandler(.allow)


        }


    }


    func showAlert(_ message: String) {


        let alert = UIAlertController(title: "Alert", message: message, preferredStyle: .alert)


        alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))


        self.present(alert, animated: true, completion: nil)


    }


}

Android平台：

在Android中，可以通过Intent来调用Native API。以下是一个简单的例子：

import android.content.Intent;


import android.net.Uri;


import android.os.Bundle;


import android.webkit.WebChromeClient;


import android.webkit.WebView;


import android.webkit.WebViewClient;


import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {


    WebView webView;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        webView = findViewById(R.id.webView);


        webView.getSettings().setJavaScriptEnabled(true);


        webView.setWebChromeClient(new WebChromeClient());


        webView.setWebViewClient(new WebViewClient() {


            @Override


            public boolean shouldOverrideUrlLoading(WebView view, String url) {


                if (url.startsWith("native://")) {


                    Uri uri = Uri.parse(url);


                    if ("showAlert".equals(uri.getHost())) {


                        String message = uri.getQueryParameter("message");


                        showAlert(message);


                    }


                    return true;


                }


                return false;


            }


        });


        String html = "<html><body><button onclick="window.location.href='native://showAlert?message=Hello, Native!';">Click me</button></body></html>";


        webView.loadData(html, "text/html", "UTF-8");


    }


    private void showAlert(String message) {


        Intent intent = new Intent(this, AlertActivity.class);


        intent.putExtra("message", message);


        startActivity(intent);


    }


}

四、数据序列化和反序列化

1. 基本概念

数据序列化和反序列化是JavaScript与Native代码交互的基础。通过序列化，数据可以从JavaScript对象转换为字符串或二进制格式，并在Native代码中反序列化为相应的对象。

2. 实现方法

iOS平台：

在iOS中，可以使用JSONSerialization来实现数据的序列化和反序列化。以下是一个简单的例子：

import UIKit


import WebKit


class ViewController: UIViewController, WKScriptMessageHandler {


    var webView: WKWebView!


    override func viewDidLoad() {


        super.viewDidLoad()


        let contentController = WKUserContentController()


        contentController.add(self, name: "jsHandler")


        let config = WKWebViewConfiguration()


        config.userContentController = contentController


        webView = WKWebView(frame: self.view.frame, configuration: config)


        self.view.addSubview(webView)


        let html = """


        <html>


        <body>


        <button onclick="window.webkit.messageHandlers.jsHandler.postMessage(JSON.stringify({message: 'Hello, Native!'}));">Click me</button>


        </body>


        </html>


        """


        webView.loadHTMLString(html, baseURL: nil)


    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {


        if message.name == "jsHandler", let messageBody = message.body as? String {


            if let data = messageBody.data(using: .utf8), let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] {


                print(json["message"] as? String ?? "No message")


            }


        }


    }


}

Android平台：

在Android中，可以使用Gson库来实现数据的序列化和反序列化。以下是一个简单的例子：

import android.os.Bundle;


import android.webkit.JavascriptInterface;


import android.webkit.WebChromeClient;


import android.webkit.WebView;


import androidx.appcompat.app.AppCompatActivity;


import com.google.gson.Gson;


public class MainActivity extends AppCompatActivity {


    WebView webView;


    Gson gson;


    @Override


    protected void onCreate(Bundle savedInstanceState) {


        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);


        gson = new Gson();


        webView = findViewById(R.id.webView);


        webView.getSettings().setJavaScriptEnabled(true);


        webView.setWebChromeClient(new WebChromeClient());


        webView.addJavascriptInterface(new WebAppInterface(), "Android");


        String html = "<html><body><button onclick="Android.sendMessage(JSON.stringify({message: 'Hello, Native!'}));">Click me</button></body></html>";


        webView.loadData(html, "text/html", "UTF-8");


    }


    public class WebAppInterface {


        @JavascriptInterface


        public void sendMessage(String message) {


            MessageData messageData = gson.fromJson(message, MessageData.class);


            System.out.println(messageData.message);


        }


    }


    public class MessageData {


        String message;


    }


}

五、安全性考虑

1. 输入验证

在JavaScript与Native代码交互时，务必对输入数据进行严格验证，防止恶意代码注入和数据篡改。

2. 权限控制

在原生代码中，确保只有受信任的JavaScript代码能够调用敏感API和访问敏感数据。可以通过设置白名单或使用API密钥来实现权限控制。

六、性能优化

1. 减少交互频率

频繁的JavaScript与Native代码交互会导致性能瓶颈，因此应尽量减少交互频率，合并多次交互为一次。

2. 异步处理

在可能的情况下，使用异步处理机制，如Promises和Callbacks，以避免阻塞主线程，提高应用的响应速度。

七、调试与测试

1. 使用调试工具

利用浏览器的开发者工具（如Chrome DevTools）和移动平台的调试工具（如Xcode和Android Studio）进行调试，方便查找和解决问题。

2. 自动化测试

编写自动化测试脚本，使用测试框架（如JUnit和XCTest）对JavaScript与Native代码的交互进行全面测试，确保交互的正确性和稳定性。

八、实际应用案例

1. 混合应用

在混合应用中，WebView桥接是最常用的交互方式。通过加载网页，JavaScript可以调用原生API，实现复杂的业务逻辑和界面交互。

2. 跨平台应用

在跨平台应用中，如React Native和Flutter，JavaScript与Native代码的交互至关重要。通过消息传递和调用API，开发者可以在不同平台上实现一致的用户体验。

九、推荐系统

在项目团队管理中，选择合适的管理系统有助于提高效率和协作水平。推荐以下两个系统：

研发项目管理系统PingCode：

PingCode是一款专为研发团队设计的项目管理系统，支持需求管理、任务分解、进度跟踪等功能，帮助团队更好地协作和交付高质量的软件产品。

通用项目协作软件Worktile：

Worktile是一款通用的项目协作软件，适用于各类团队和项目。它支持任务管理、文件共享、沟通协作等功能，帮助团队提高工作效率和协作水平。

总结

JavaScript与Native代码的交互是现代移动开发中的重要环节，通过WebView桥接、消息传递、调用API、数据序列化和反序列化等方式，可以实现两者之间的无缝通信。在实际应用中，注意安全性、性能优化和调试测试，可以确保交互的正确性和稳定性。选择合适的项目管理系统，如PingCode和Worktile，有助于提高团队的协作效率和项目管理水平。

相关问答FAQs：

1. 为什么在开发移动应用时需要进行JS与Native的交互？
在开发移动应用时，JS与Native的交互可以实现更丰富的功能和用户体验。通过JS与Native的交互，可以调用原生的功能和API，如相机、地理位置等，同时也可以实现数据的传递和处理。

2. 如何实现JS与Native的交互？
JS与Native的交互可以通过使用WebView或WebView组件来实现。在WebView中，可以通过JavaScript与Native代码进行通信，例如通过JavaScript调用Native方法，或通过Native代码调用JavaScript函数。可以使用WebView提供的接口来实现这种交互。

3. 有什么常用的方法来实现JS与Native的交互？
常用的方法有以下几种：

  • 使用JavaScriptInterface：通过创建一个Java类，将其注入到WebView中，通过该类暴露的方法来实现JS与Native的交互。
  • 使用WebView的loadUrl()方法：通过在JS中使用window.location.href或window.location.replace来调用Native代码，然后在Native代码中解析URL来实现交互。
  • 使用WebView的evaluateJavascript()方法：通过在JS中使用该方法来调用Native代码，并通过回调函数来获取返回值。这种方法在Android 4.4及以上版本中可用。

通过以上方法，可以实现JS与Native的双向通信，从而实现更丰富的功能和用户体验。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3893789

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部