在iOS项目中集成HTML5来生成二维码，本质上是通过WKWebView加载本地或远程网页，利用网页中的JavaScript和Canvas完成编码与绘制，再由原生代码传递业务参数并获取结果。这种方式特别适合需要频繁更换二维码样式或内容的运营场景，因为前端改动不需要重新提交App Store审核。
一、HTML5端二维码生成原理与实现
二维码的本质是将文本按照ISO 18004标准映射为黑白矩阵模块。纯前端不依赖原生库时，可以使用轻量的JavaScript库（如qrcode.js）或者自己实现简化编码。实际工程中，为了保证识别率，建议直接引入经过充分测试的编码逻辑，而不是手写全部位流计算。
下面给出一个最小可用的HTML5页面示例，它接收外部传入的文字内容，并在Canvas上绘制二维码。注意所有标签和特殊字符都做了转义处理，确保能被iOS正确加载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二维码生成</title>
<script src="https://ipipp.com/qrcode.min.js"></script>
</head>
<body>
<canvas id="qrcode"></canvas>
<script>
// 供iOS调用的方法
function generateQR(text) {
var canvas = document.getElementById('qrcode');
// 使用qrcode库将文本绘制到canvas
QRCode.toCanvas(canvas, text, { width: 240, margin: 1 }, function (error) {
if (error) console.error(error);
});
}
// 挂载到window供wkwebview访问
window.generateQR = generateQR;
</script>
</body>
</html>
上面的代码把generateQR函数挂到了window对象上，iOS侧的WKWebView可以直接通过evaluateJavaScript调用它。如果是在本地包内放置该HTML，需将qrcode.min.js一同打包，并把引用地址改为相对路径，避免网络依赖。
这种前端生成方式的优势是绘制逻辑完全在网页层，原生只负责传参和展示。缺点是如果二维码内容超长，Canvas尺寸需要动态调整，否则模块过密会导致部分扫码软件无法识别。通常建议内容不超过二百字符，并在生成后做一次本地截图供原生保存。
二、iOS端WKWebView调用与通信
iOS调用HTML5生成二维码，第一步是正确初始化WKWebView并加载页面。很多初学者把网页放在沙盒却用错了路径，导致evaluateJavaScript找不到函数。推荐使用loadFileURL:allowingReadAccessToURL:加载本地HTML，这样同目录的JS也能被读取。
以下Swift代码展示了如何加载本地网页并执行生成：
import WebKit
class QRWebController: UIViewController, WKScriptMessageHandler {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
let config = WKWebViewConfiguration()
let userContent = WKUserContentController()
userContent.add(self, name: "qrBridge")
config.userContentController = userContent
webView = WKWebView(frame: view.bounds, configuration: config)
view.addSubview(webView)
if let path = Bundle.main.path(forResource: "qrpage", ofType: "html") {
let url = URL(fileURLWithPath: path)
webView.loadFileURL(url, allowingReadAccessTo: Bundle.main.bundleURL)
}
}
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// 接收网页回传的二维码状态
print("来自网页的消息:", message.body)
}
func createQRWithText(_ text: String) {
let js = "generateQR('(text)')"
webView.evaluateJavaScript(js) { result, error in
if let error = error {
print("调用失败:", error.localizedDescription)
}
}
}
}
在上面的控制器中，我们同时配置了WKScriptMessageHandler，这样网页也可以通过window.webkit.messageHandlers.qrBridge.postMessage()把生成完毕的信号发回iOS。相比单纯轮询Canvas状态，这种双向通信更可靠。
需要注意的是，如果text中包含单引号或换行，直接拼接到JS字符串会语法报错。正确做法是用JSONSerialization将参数转为JSON字符串，再在JS里解析，能有效避免注入和格式错误。
三、参数传递与图片导出步骤
完整步骤可以归纳为四步：准备HTML资源、iOS加载并注入参数、网页绘制二维码、原生截取Canvas转图片。其中导出图片这一步常被忽略，因为默认Canvas只在网页内可见，用户无法长按保存。
我们可以通过在网页内添加导出函数，将Canvas转为Base64回传：
<script>
function exportImage() {
var canvas = document.getElementById('qrcode');
var dataUrl = canvas.toDataURL('image/png');
// 回传给iOS
window.webkit.messageHandlers.qrBridge.postMessage(dataUrl);
}
window.exportImage = exportImage;
</script>
iOS侧在收到Base64字符串后，使用Data(base64Encoded:)还原为UIImage，即可写入相册或展示在原生界面。整个流程不依赖任何远程接口，离线也能工作。
如果项目要求严格的性能，比如列表里批量生成不同码，就不适合频繁调用evaluateJavaScript。此时应改为一次性把数组传给网页，由网页用离屏Canvas循环绘制并通过回调分批回传，减少桥接次数，避免主线程卡顿。
四、常见错误与规避办法
第一种常见错误是WKWebView还没加载完就调用JS，结果是函数未定义。解决办法是在webView(_:didFinish:)委托里标记ready，或在JS内主动通知原生页面已就绪。
第二种是混淆了HTML标签和函数调用，比如在原生代码里写成了<input>形式去传值，实际应使用evaluateJavaScript字符串。规则上，正文描述标签要转义，但函数调用如generateQR()只是方法名，不是标签。
| 问题现象 | 产生原因 | 解决方式 |
|---|---|---|
| 白屏无二维码 | JS库路径错误 | 检查Bundle资源并改用相对路径 |
| 回调不触发 | message handler名称不匹配 | 确保add与postMessage名称一致 |
| 扫码识别率低 | margin过小或尺寸压缩 | 保持margin为1且宽度不小于200 |
只要理清原生与网页的分工，iOS调用HTML5生成二维码并不复杂。把变动频繁的部分放在前端，把系统能力和保存分享放在原生，是混合开发里很实用的组合。