uni-app打包成h5后与原生app交互的方法

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app打包成h5后与原生app交互的方法

Harmonyos Next教程
1 回复

在将uni-app打包成H5应用后，与原生APP进行交互通常涉及使用JavaScript与原生代码之间的桥梁。这通常通过特定的API或插件来实现，具体方法取决于你所使用的原生开发框架（如iOS的Swift/Objective-C，Android的Java/Kotlin）。以下是一个简要的代码案例，展示如何在uni-app H5端和原生APP端进行交互。

1. 在uni-app中发送消息到原生APP

在uni-app的H5代码中，你可以通过调用一个特定的JavaScript接口（这个接口需要在原生APP中实现）来发送消息。例如，你可以定义一个全局函数postMessageToNative：

// uni-app H5 端代码
function postMessageToNative(message) {
    if (window.WeixinJSBridge) { // 微信内置浏览器示例
        WeixinJSBridge.invoke('sendMsgToNative', message);
    } else if (window.WebViewJavascriptBridge) { // 通用WebView桥接示例
        WebViewJavascriptBridge.callHandler('sendToNative', { message: message }, function(response) {
            console.log('Native response:', response);
        });
    } else {
        // 其他情况或默认处理
        console.log('No native bridge found');
    }
}

// 调用示例
postMessageToNative('Hello from uni-app H5');

2. 在原生APP中接收消息并处理

iOS (Swift) 示例

在iOS的WebView中，你需要设置一个JavaScript桥接来处理来自H5的消息：

import WebKit

class MyWebView: WKWebView, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "sendMsgToNative", let messageBody = message.body as? String {
            print("Received message from H5: \(messageBody)")
            // 在这里处理消息
        }
    }

    override func loadHTMLString(_ string: String, baseURL: URL?) {
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "sendMsgToNative")
        let config = WKWebViewConfiguration()
        config.userContentController = userContentController
        super.init(frame: .zero, configuration: config)
        super.loadHTMLString(string, baseURL: baseURL)
    }
}

Android (Java) 示例

在Android的WebView中，你需要设置一个JavaScript接口来处理消息：

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void sendToNative(String message) {
        Log.d("WebAppInterface", "Received message from H5: " + message);
        // 在这里处理消息
    }
}

在H5代码中，你需要调用AndroidInterface.sendToNative('Hello from uni-app H5');来发送消息。

请注意，上述代码仅作为示例，实际实现中可能需要根据具体需求进行调整。

回到顶部