如何实现AppJS与iOS原生代码的交互？

在App中嵌入H5页面并与原生iOS进行交互，主要涉及到前端和后端的协作，以下是详细的步骤和示例代码：

前端（H5页面）

前端需要定义与原生交互的方法名，并告知App开发人员这些方法名和传递的参数名，前端还需要判断当前设备是Android还是iOS，以便调用不同的JS接口。

HTML代码示例

<div class="default-content">
    <img src="/mobile/newest/img/user/vip_title.png" alt="Vip Title">
    <a href="javascript:;" class="btn" onclick="paymentVip('{$vipactivity.id}')">立即加入</a>
</div>

JavaScript代码示例

function paymentVip(id) {
    var mobile = $('#mobile').val(); // 假设有一个隐藏字段存储了当前设备的标识
    if (mobile == 'ios') {
        window.webkit.messageHandlers.paymentVip.postMessage({"activityId": id});
    } else if (mobile == 'android') {
        window.WebViewJavascriptBridge.callHandler(
            'paymentVip',
            {"activityId": id},
            function (responseData) {
                document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData;
            }
        );
    }
}

iOS端配置

iOS端需要引入WebViewJavascriptBridge库，并在WKWebView中配置相应的处理程序。

iOS代码示例

需要在podfile中添加WebViewJavascriptBridge依赖：

pod 'WebViewJavascriptBridge'

然后执行pod install。

在iOS项目中配置WKWebView和WebViewJavascriptBridge：

import UIKit
import WebKit
import WebViewJavascriptBridge
class BaseWebView: WKWebView {
    var bridge: WKWebViewJavascriptBridge?
    
    override init(frame: CGRect, configuration: WKWebViewConfiguration) {
        super.init(frame: frame, configuration: configuration)
    }
    
    init(frame: CGRect) {
        let configuration = WKWebViewConfiguration()
        configuration.allowsInlineMediaPlayback = true
        configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
        super.init(frame: frame, configuration: configuration)
        bridge = WKWebViewJavascriptBridge(for: self)
        addFunc()
        getHtmlPageUrl()
    }
    
    func addFunc() {
        bridge!.registerHandler("getVersion", handler: { [weak self] data, responseCallback in
            guard let this = self else { return }
            responseCallback?("1.0.0")
        })
    }
    
    func getHtmlPageUrl() {
        bridge!.callHandler("getPageUrl", data: nil) { response in
            print("getPageUrl:\(response ?? "")")
        }
    }
}
class H5ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        addWebView()
    }
    
    func addWebView() {
        webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
        webView!.bridge!.setWebViewDelegate(self)
        let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
        let url = URL(fileURLWithPath: path!)
        webView!.load(URLRequest(url: url))
    }
}

Android端配置

Android端通常使用addJavascriptInterface方法为JS提供接口。

Android代码示例

public class JsInteraction {
    @JavascriptInterface
    public void action(String param) {
        // TODO: 处理逻辑
    }
}
webView.addJavascriptInterface(new JsInteraction(), "Android");

注意事项

系统判断：前端需要通过用户代理字符串或其他方式判断当前设备是Android还是iOS，以便调用不同的JS接口。

参数传递：如果交互过程中需要传递参数，确保前后端定义的参数名和方法名一致。

错误处理：在实际开发中，需要添加错误处理逻辑，以应对可能出现的各种异常情况。

安全性：在与原生代码交互时，注意数据的安全性和隐私保护，避免敏感信息泄露。

以上内容就是解答有关“appjsios原生交互”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。