uniapp - 最新详细实现web-view网页与安卓苹果App端之间互相通信功能，苹果app/安卓app平台与内嵌webview组件内的网页进行相互传值，内置网页与app双向实时通信，详细示例代码

在现代的移动应用开发中，web-view组件的使用越来越普遍。Uniapp是一个跨平台的开发框架，可以帮助我们快速构建包括Android和iOS在内的多端应用。在这个框架下，实现web-view与原生App之间的双向通信是一项非常重要的功能。本文将详细介绍如何实现该功能，并提供相应的代码示例。

一、准备工作

首先我们需要了解如何在uniapp中使用web-view组件。uniapp提供了一个简单的web-view组件，可以加载外部URL的网页。为了实现双向通信，我们需要使用JavaScript与原生代码进行交互。

二、在uniapp中使用web-view组件

在uniapp的页面中使用web-view组件的基本示例代码如下：

<template>
  <view>
    <web-view src="https://your-web-url.com" @message="onMessage"></web-view>
  </view>
</template>

<script>
export default {
  methods: {
    onMessage(event) {
      console.log('Received message from web-view:', event.detail.data);
      // 这里可以根据收到的数据进行相应的处理
    },
    sendMessageToWebView(message) {
      this.$refs.myWebView.postMessage({
        data: message
      });
    }
  }
}
</script>

在上面的代码中，我们使用@message事件来接收web-view发送的消息。如果我们想向web-view发送消息，可以调用sendMessageToWebView方法。

三、在网页中与App进行通信

在加载的网页中，我们可以通过JavaScript与App进行通信。首先，我们需要在网页中添加代码，以便能够接收来自App的消息，并可以发送消息回去。

// 监听来自App的消息
window.addEventListener('message', function(event) {
  console.log('Received message from App:', event.data);
  // 在这里可以处理接收到的消息
});

// 向App发送消息
function sendMessageToApp(message) {
  window.webkit.messageHandlers[callbackHandler].postMessage({ data: message });
}

四、安卓与iOS平台的原生实现

iOS实现

在iOS端，我们需要实现WKScriptMessageHandler，以便处理来自web-view的消息。

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

  var webView: WKWebView!

  override func viewDidLoad() {
    super.viewDidLoad()

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

    let config = WKWebViewConfiguration()
    config.userContentController = contentController

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

    // 加载网页
    if let url = URL(string: "https://your-web-url.com") {
      webView.load(URLRequest(url: url))
    }
  }

  // 处理消息
  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("Received message from web-view: \(message.body)")
    // 从这里可以将消息传递到uniapp中
  }

  // 向web-view发送消息
  func sendMessageToWebView(message: String) {
    webView.evaluateJavaScript("sendMessageToApp('\(message)')")
  }
}

Android实现

在Android端，我们也需要设置WebView并且处理消息。

import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");

        webView.loadUrl("https://your-web-url.com");
    }

    public class WebAppInterface {
        MainActivity mActivity;

        WebAppInterface(MainActivity c) {
            mActivity = c;
        }

        @JavascriptInterface
        public void sendMessage(String message) {
            // 处理来自web-view的消息
        }
    }

    public void sendMessageToWebView(String message) {
        webView.evaluateJavascript("sendMessageToApp('" + message + "');", null);
    }
}

五、总结

通过上述步骤，我们实现了在uniapp中将web-view与原生Android和iOS应用之间的双向通信。需要注意的是，web-view中的JavaScript代码和原生代码之间的交互是通过特定的接口进行的，确保使用严格的格式和方法名，以避免因错误引发的通信问题。

这样就可以实现App和内嵌网页之间的实时通信，可以广泛应用于数据传输、用户输入和应用状态更新等场景。