正文

手机iOS原生代码中调用JavaScript，掌握这5个步骤就足够了

/0 浏览量
0428

在iOS开发中，将原生代码与JavaScript交互是一个常见的需求，特别是在混合应用开发中。以下五个步骤可以帮助你轻松地在iOS原生代码中调用JavaScript：

步骤1：配置Web视图

首先，你需要在你的iOS项目中创建或获取一个UIWebView或WKWebView对象。WKWebView是iOS 8及以上版本推荐使用的Web视图，它提供了更好的性能和更多的功能。

import UIKit
import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建WKWebView
        webView = WKWebView(frame: self.view.bounds)
        self.view.addSubview(webView)
    }
}

步骤2：加载HTML内容

将HTML内容加载到Web视图中，这样JavaScript代码就可以在你的应用中运行了。

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 加载HTML内容
    let htmlContent = "<html><body><script type='text/javascript'>function sayHello() { alert('Hello from JavaScript!'); }</script><button onclick='sayHello()'>Click Me</button></body></html>"
    webView.loadHTMLString(htmlContent, baseURL: nil)
}

步骤3：编写JavaScript代码

在HTML文件中，你可以编写JavaScript代码，以便在用户与界面交互时执行特定的操作。

<button onclick='sayHello()'>Click Me</button>
<script type='text/javascript'>
function sayHello() {
    alert('Hello from JavaScript!');
}
</script>

步骤4：从原生代码调用JavaScript

要调用JavaScript函数，你可以使用evaluateJavaScript方法。这个方法允许你执行JavaScript代码，并可以处理返回值。

@IBAction func buttonTapped(_ sender: UIButton) {
    // 调用JavaScript函数
    webView.evaluateJavaScript("sayHello()", completionHandler: { (result, error) in
        if let error = error {
            print("Error calling JavaScript: \(error.localizedDescription)")
        } else {
            print("JavaScript executed successfully")
        }
    })
}

步骤5：从JavaScript获取数据并响应

JavaScript也可以调用原生代码中的方法。这通常通过Objective-C/Swift中的Objective-C++桥接实现。

// Objective-C++方法
+ (void)callSwiftMethodFromJS:(NSString *)jsString completion:(void (^)(NSString *))completion {
    @autoreleasepool {
        // 处理JavaScript传递的数据
        NSString *data = @"Data from Swift";
        
        // 调用完成回调
        if (completion) {
            completion(data);
        }
    }
}

// 在JavaScript中调用
webView.evaluateJavaScript("window.callSwiftMethodFromJS('some data', function(data) { console.log(data); })", completionHandler: nil)

通过以上五个步骤，你就可以在iOS原生代码中调用JavaScript，实现混合应用开发中的复杂功能。记住，这些步骤只是基础，实际应用中可能需要根据具体需求进行调整和优化。

-- 展开阅读全文 --