如何实现App调用JavaScript代码？

在移动应用开发中，有时需要从原生代码（如iOS或Android）调用JavaScript代码，这种交互通常用于混合应用开发，例如使用React Native、Flutter等框架时，下面以iOS和Android为例，详细描述如何实现这一过程。

iOS 调用 JavaScript

使用 WKWebView

WKWebView 是 iOS 上一个强大的 Web 视图组件，它允许你在原生应用中嵌入网页内容，并且可以与 JavaScript 进行交互。

步骤：

1、创建 WKWebView:

   import WebKit
   class ViewController: UIViewController, WKScriptMessageHandler {
       var webView: WKWebView!
       override func loadView() {
           let webConfiguration = WKWebViewConfiguration()
           webView = WKWebView(frame: .zero, configuration: webConfiguration)
           webView.navigationDelegate = self
           view = webView
       }
       override func viewDidLoad() {
           super.viewDidLoad()
           let url = URL(string: "https://example.com")!
           webView.load(URLRequest(url: url))
           webView.configuration.userContentController.add(self, name: "nativeToJS")
       }
   }

2、实现 WKScriptMessageHandler:

   extension ViewController: WKScriptMessageHandler {
       func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
           // Handle the incoming message from JavaScript here
       }
   }

3、在 JavaScript 中调用原生代码:

   // In your HTML/JavaScript file
   window.webkit.messageHandlers.nativeToJS.postMessage("Hello from JavaScript");

4、从 Swift 向 JavaScript 发送消息:

   func sendMessageToJS(message: String) {
       webView.evaluateJavaScript("receiveMessageFromNative('(message)')") { (result, error) in
           if let error = error {
               print("Error: (error.localizedDescription)")
           } else {
               print("Message sent to JavaScript successfully")
           }
       }
   }

5、在 JavaScript 中接收消息:

   // In your HTML/JavaScript file
   function receiveMessageFromNative(message) {
       console.log("Message from native: " + message);
   }

Android 调用 JavaScript

使用 WebView

在 Android 上，可以使用WebView 组件来加载网页并与 JavaScript 进行交互。

步骤：

1、创建 WebView:

   import android.os.Bundle;
   import android.webkit.JavascriptInterface;
   import android.webkit.WebSettings;
   import android.webkit.WebView;
   import androidx.appcompat.app.AppCompatActivity;
   public class MainActivity extends AppCompatActivity {
       private WebView myWebView;
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           myWebView = findViewById(R.id.webview);
           myWebView.getSettings().setJavaScriptEnabled(true); // Enable JavaScript
           myWebView.addJavascriptInterface(new WebAppInterface(), "Android"); // Add interface
           myWebView.loadUrl("file:///android_asset/www/index.html"); // Load local HTML file
       }
   }

2、创建 JavaScript 接口:

   public class WebAppInterface {
       @JavascriptInterface
       public void showToast(String message) {
           Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
       }
   }

3、在 JavaScript 中调用原生代码:

   // In your HTML/JavaScript file
   function callNativeFunction() {
       Android.showToast("Hello from JavaScript");
   }

4、从 Java 向 JavaScript 发送消息:

   @JavascriptInterface
   public void sendMessageToJS(String message) {
       myWebView.loadUrl("javascript:receiveMessageFromNative('" + message + "')");
   }

5、在 JavaScript 中接收消息:

   // In your HTML/JavaScript file
   function receiveMessageFromNative(message) {
       console.log("Message from native: " + message);
   }

通过以上步骤，你可以在 iOS 和 Android 平台上实现原生代码与 JavaScript 之间的相互调用，这种方法非常适用于混合应用开发，能够充分利用原生功能和 Web 技术的优势。

小伙伴们，上文介绍了“app 调用 js”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。