chooseimage ios h5刷新页面

iOS H5 刷新页面与选择图片

在 iOS 的 H5 开发中，经常会遇到需要刷新页面或者选择图片的需求。本文将介绍如何在 iOS H5 中实现页面刷新和选择图片的功能，并提供相关代码示例。

刷新页面

在 H5 页面中，通常会希望用户在某些操作后能够刷新页面以获取最新的内容。在 iOS 的 WebView 中，可以通过 JavaScript 调用原生的方法来实现页面刷新。

首先，需要在 iOS 的原生代码中添加一个供 JavaScript 调用的方法。可以使用 WKWebView 来加载 H5 页面，并在 WKScriptMessageHandler 中实现 JavaScript 的回调方法。

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "refreshPage")
        config.userContentController = userContentController
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        // 加载 H5 页面
        if let url = URL(string: " {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    // JavaScript 回调方法
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "refreshPage" {
            webView.reload()
        }
    }
}

在上述代码中，通过 WKUserContentController 的 add(_:name:) 方法来添加一个供 JavaScript 调用的方法，名为 refreshPage。当 JavaScript 调用该方法时，会回调 userContentController(_:didReceive:) 方法，在该方法中调用 webView.reload() 来刷新页面。

在 H5 页面中，可以通过 JavaScript 来调用原生方法来实现页面刷新。可以使用 window.webkit.messageHandlers.refreshPage.postMessage(null) 来调用原生方法。

function refreshPage() {
    if (window.webkit && window.webkit.messageHandlers.refreshPage) {
        window.webkit.messageHandlers.refreshPage.postMessage(null);
    }
}

在上述代码中，首先判断原生是否支持 window.webkit，然后调用 messageHandlers.refreshPage.postMessage(null) 来调用原生方法。

选择图片

在 H5 页面中，有时需要让用户选择图片并上传到服务器。在 iOS 的 H5 开发中，可以通过 JavaScript 调用原生的方法来实现选择图片的功能。

首先，需要在 iOS 的原生代码中添加一个供 JavaScript 调用的方法。可以使用 UIImagePickerController 来选择图片，并实现 UIImagePickerControllerDelegate 和 UINavigationControllerDelegate 来处理选择的图片。

import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    var webView: WKWebView!
    var imagePickerController: UIImagePickerController!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "chooseImage")
        config.userContentController = userContentController
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        // 加载 H5 页面
        if let url = URL(string: " {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    // JavaScript 回调方法
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "chooseImage" {
            // 选择图片
            chooseImage()
        }
    }
    
    // 选择图片
    func chooseImage() {
        imagePickerController = UIImagePickerController()
        imagePickerController.delegate = self
        imagePickerController.sourceType = .photoLibrary
        present(imagePickerController, animated: true, completion: nil)
    }
    
    // 获取选择的图片
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let image = info[.originalImage] as? UIImage {
            // 处理选择的图片
            // ...
        }
        
        picker.dismiss(animated: true, completion: nil)
    }
}

在上述代码中，通过 WKUserContentController 的 add(_:name:) 方法来添加一个供 JavaScript 调用的方法，名为 chooseImage。当 JavaScript 调用该方法时，会回调 userContentController(_:didReceive:) 方法，在该方法中调用 chooseImage() 来选择图片。

在 H5 页面中，可以通过