IOS使用wkwebview
一、核心前提：配置 Info.plist 权限
iOS 调用相机 / 相册必须在 Info.plist 中添加权限描述，否则会直接崩溃或无响应：
右键 Info.plist → 选择「Open As」→「Source Code」，添加以下代码：
objectivec
<!-- 相机权限 -->
<key>NSCameraUsageDescription</key>
<string>需要访问相机以拍摄照片</string>
<!-- 相册权限（读取） -->
<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册以选择照片</string>
<!-- iOS 11+ 相册写入（如需上传后保存可加） -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问相册以保存照片</string>二、WKWebView 配置与权限处理
- 初始化 WKWebView 并设置代理
objectivec
import WebKit
import Photos
class WebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// 1. 配置 WKWebView
let webConfig = WKWebViewConfiguration()
// 允许 JS 交互（前端触发选择图片必须开）
webConfig.preferences.javaScriptEnabled = true
webConfig.preferences.javaScriptCanOpenWindowsAutomatically = true
// 2. 创建 WKWebView
webView = WKWebView(frame: view.bounds, configuration: webConfig)
webView.uiDelegate = self // 必须设置，处理权限请求
webView.navigationDelegate = self
view.addSubview(webView)
// 3. 加载本地/远程页面（示例加载本地 test.html）
if let htmlPath = Bundle.main.path(forResource: "test", ofType: "html") {
let htmlURL = URL(fileURLWithPath: htmlPath)
webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
}
}
}-
实现 WKUIDelegate 处理相机 / 相册权限请求
WKWebView 会通过 webView:permissionRequest: 回调请求媒体权限，需在这里处理：
`// MARK: - WKUIDelegate
extension WebViewController {
// 处理权限请求（相机/麦克风/相册等）
func webView(_ webView: WKWebView, permissionRequest: WKPermissionRequest) {
// 1. 相机权限
if permissionRequest.permissionType == .camera {
// 先检查系统相机权限
AVCaptureDevice.requestAccess(for: .video) { granted in
DispatchQueue.main.async {
granted ? permissionRequest.allow() : permissionRequest.deny()
}
}
}
// 2. 相册权限（WKPermissionType 无直接相册枚举，需配合前端 input 触发）
else if permissionRequest.permissionType == .photos {
PHPhotoLibrary.requestAuthorization { status in
DispatchQueue.main.async {
status == .authorized ? permissionRequest.allow() : permissionRequest.deny()
}
}
}
// 其他权限（如麦克风）可按需处理
else {
permissionRequest.allow()
}
}
// iOS 14+ 新增：细化相册权限请求（只读/可写）
func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin, initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType, decisionHandler: @escaping (WKPermissionDecision) -> Void) {
if type == .camera {
AVCaptureDevice.requestAccess(for: .video) { granted in
decisionHandler(granted ? .grant : .deny)
}
} else if type == .microphone {
AVCaptureDevice.requestAccess(for: .audio) { granted in
decisionHandler(granted ? .grant : .deny)
}
}
}
}`
三、扩展：JS 与原生交互（可选）
如果需要将选择的图片传给原生处理（如上传、压缩），可添加 WKScriptMessageHandler：
objectivec
// 初始化时添加消息处理器
webConfig.userContentController.add(self, name: "uploadImage")
// 实现消息处理
extension WebViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "uploadImage", let imageData = message.body as? String {
// 处理前端传递的图片 Base64 数据
print("收到图片数据：", imageData)
}
}
}前端可将图片转为 Base64 后调用：
typescript
// 前端将图片转 Base64 并传给原生
function uploadImage(file) {
const reader = new FileReader();
reader.onload = function(e) {
window.webkit.messageHandlers.uploadImage.postMessage(e.target.result);
};
reader.readAsDataURL(file);
}关键注意事项
ATS 限制：如果加载远程 HTTPS 页面，需确保服务器配置符合 iOS ATS 规则（iOS 9+ 默认禁用 HTTP，如需允许需在 Info.plist 加 NSAppTransportSecurity 例外）；
iOS 版本差异：
iOS 14+ 需用 requestMediaCapturePermissionFor 细化媒体权限；
iOS 15+ 对相册权限新增「部分访问」，需兼容 PHAuthorizationStatus.limited；
文件大小限制：前端选择图片后，如需传给原生，可通过 WKScriptMessageHandler 交互，避免大文件卡顿；
权限申请时机：不要提前申请权限，需等用户触发 input 后再由系统弹窗申请（符合 iOS 隐私规范）。