如何解析QR码内容{"qr_type":"1","qr_content":"15985379297"}？

Question

在解析QR码内容 `{"qr_type":"1","qr_content":"15985379297"}` 时，常见技术问题是如何正确识别并提取JSON格式中的`qr_type`与`qr_content`字段。开发中常因未进行类型判断或异常处理，导致解析失败。例如，使用JavaScript的`JSON.parse()`时，若输入数据非标准字符串格式，将抛出语法错误。此外，移动端扫码后可能附加URL参数，需先清洗数据再解析。如何确保跨平台（Android/iOS/Web）一致、安全地解析该QR内容，并根据`qr_type`区分业务逻辑（如type=1表示手机号），是实际应用中的关键挑战。

Answer 1

1. 常见技术问题剖析

在跨平台应用中解析QR码内容如 {"qr_type":"1","qr_content":"15985379297"} 时，开发者常面临以下核心问题：

• 非标准JSON输入：扫码结果可能包含URL参数（如https://example.com/scan?data=%7B%22qr_type%22%3A%221%22%7D），直接使用JSON.parse()将抛出SyntaxError。
• 类型判断缺失：未校验qr_type是否为字符串或数字，导致后续逻辑分支错误。
• 异常处理不足：未使用try-catch包裹解析过程，程序崩溃风险高。
• 平台差异性：Android/iOS原生扫码SDK返回格式不一致，Web端依赖第三方库（如jsQR）行为不同。
• 安全风险：未对qr_content进行XSS或注入校验，可能引发客户端漏洞。

2. 数据清洗与预处理流程

为确保输入一致性，需设计通用清洗逻辑。以下是典型处理步骤：

1. 检测输入是否为URL，提取data或content参数值。
2. 对百分号编码字符串进行decodeURIComponent解码。
3. 移除前后空白字符及非法控制字符。
4. 验证是否以{开头、}结尾，初步判断为JSON结构。

function cleanQrData(rawInput) {
    try {
        // 检查是否为URL
        const url = new URL(rawInput);
        const params = new URLSearchParams(url.search);
        const jsonData = params.get('data') || rawInput;
        return decodeURIComponent(jsonData.trim());
    } catch (e) {
        // 非URL，直接处理原始字符串
        return rawInput.trim();
    }
}
    

3. 跨平台解析统一方案设计

为实现Android、iOS、Web三端一致行为，建议采用分层架构：

平台	扫码库	解析入口	输出标准化
Android	ZXing	Intent → String	调用公共JS引擎或Kotlin工具类
iOS	AVFoundation	MetadataOutput → NSString	Swift JSONDecoder + 中间件清洗
Web	jsQR / QuaggaJS	Canvas图像分析	统一调用cleanQrData + parseQrJson

4. 安全解析与异常处理机制

核心解析函数应具备容错与防御能力：

function parseQrJson(dirtyInput) {
    let cleaned;
    try {
        cleaned = cleanQrData(dirtyInput);
        const parsed = JSON.parse(cleaned);

        // 类型校验
        if (typeof parsed.qr_type === 'undefined') {
            throw new Error('Missing qr_type');
        }
        if (typeof parsed.qr_content !== 'string') {
            throw new Error('qr_content must be string');
        }

        return {
            qr_type: String(parsed.qr_type),  // 统一转为字符串
            qr_content: parsed.qr_content.trim()
        };
    } catch (e) {
        console.error('QR解析失败:', e.message, '输入:', dirtyInput);
        return null; // 返回null便于上层处理
    }
}
    

5. 业务逻辑路由与扩展性设计

基于qr_type实现可扩展的处理器模式：

const QrHandlers = {
    '1': (content) => {
        if (!/^1[3-9]\d{9}$/.test(content)) {
            throw new Error('无效手机号');
        }
        return { action: 'call', target: content };
    },
    '2': (content) => ({ action: 'openUrl', url: content }),
    'default': (content) => ({ action: 'showRaw', data: content })
};

function routeQrLogic(qrData) {
    if (!qrData) return { action: 'error', message: '无法解析二维码' };

    const handler = QrHandlers[qrData.qr_type] || QrHandlers['default'];
    try {
        return handler(qrData.qr_content);
    } catch (e) {
        return { action: 'error', message: e.message };
    }
}
    

6. 可视化流程图：QR解析全链路

graph TD
            A[扫码获取原始字符串] --> B{是否为URL?}
            B -- 是 --> C[提取query参数并解码]
            B -- 否 --> D[直接trim处理]
            C --> E[尝试JSON.parse]
            D --> E
            E --> F{解析成功?}
            F -- 否 --> G[记录日志并返回错误]
            F -- 是 --> H[校验qr_type与qr_content]
            H --> I{校验通过?}
            I -- 否 --> G
            I -- 是 --> J[根据qr_type调用业务处理器]
            J --> K[执行对应操作: 拨号/跳转/展示等]