App Inventor 2 条码与二维码教程 - 生成、扫描与实战应用

• 概述
• 条码扫描
  • BarcodeScanner组件
  • 支持的条码格式
  • 扫描结果处理
• 二维码生成
  • 使用QRCodeGenerator扩展
  • 使用WebView生成（无需扩展）
• 实战案例：名片二维码
  • 生成vCard二维码
  • 扫描名片二维码并解析
• 实战案例：商品条码查询
  • 扫描商品条码查价格
• WiFi二维码
  • 生成WiFi连接二维码
  • 解析WiFi二维码
• 常见问题
  • Q1: 扫描器无法启动？
  • Q2: 中文二维码扫描乱码？
  • Q3: 如何连续扫描？
• 总结

« 返回首页

概述

条码/二维码在App中广泛用于信息传递、支付、签到等场景。App Inventor 2提供了条码扫描组件和多种二维码扩展。

已有文档：extensions/QRCodeGenerator.md 介绍了二维码生成扩展。本文补充扫描功能和综合实战。

条码扫描

BarcodeScanner组件

组件面板 → Sensors → **BarcodeScanner`

when 按钮_扫描.Click() {
  条码扫描器1.DoScan()
}
when 条码扫描器1.AfterScan(结果, 格式) {
  标签_结果.Text = join("结果：", 结果)
  标签_格式.Text = join("格式：", 格式)
}

支持的条码格式

扫描结果处理

当 条码扫描器1.扫描完成(结果, 格式)
  如果 结果 以 "http" 开头
    ' URL → 打开浏览器
    调用 Activity启动器1.启动活动("android.intent.action.VIEW", 结果)
  否则 如果 结果 以 "WIFI:" 开头
    ' WiFi配置
    调用 解析WiFi二维码(结果)
  否则 如果 结果 以 "BEGIN:VCARD" 开头
    ' 电子名片
    调用 解析VCard(结果)
  否则
    标签_内容.文本 = 结果

二维码生成

使用QRCodeGenerator扩展

参考已有 extensions/QRCodeGenerator.md：

when 按钮_生成.Click() {
  var 内容 = 文本输入框_内容.Text
  var 尺寸 = 400
  QRCodeGenerator1.GenerateQRCode(内容, 尺寸)
}
while QRCodeGenerator1.OnSuccess(图片路径) {
  图像_预览.Picture = 图片路径
  标签_状态.Text = "✅ 二维码已生成"
}

使用WebView生成（无需扩展）

<!-- qr_generator.html -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1/qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
setInterval(function() {
  var msg = window.AppInventor.getWebViewString();
  if (msg && msg !== "") {
    document.getElementById('qrcode').innerHTML = '';
    new QRCode(document.getElementById('qrcode'), {
      text: msg, width: 300, height: 300, correctLevel: QRCode.CorrectLevel.H
    });
    setTimeout(function() {
      var canvas = document.querySelector('#qrcode canvas');
      if (canvas) {
        window.AppInventor.setWebViewString("IMG:" + canvas.toDataURL());
      }
    }, 500);
  }
}, 100);
</script>

实战案例：名片二维码

生成vCard二维码

当 按钮_生成名片.被点击
  设 vCard = "BEGIN:VCARD\n" &
    "VERSION:3.0\n" &
    "N:" & 文本输入框_姓名.文本 & "\n" &
    "TEL:" & 文本输入框_电话.文本 & "\n" &
    "EMAIL:" & 文本输入框_邮箱.文本 & "\n" &
    "ORG:" & 输入框_公司.文本 & "\n" &
    "TITLE:" & 输入框_职位.文本 & "\n" &
    "END:VCARD"
  调用 QRCodeGenerator1.生成二维码(vCard, 400)

扫描名片二维码并解析

when 条码扫描器1.AfterScan(结果, 格式) {
  if startsAt(结果, "BEGIN:VCARD") == 1 {
    var 行列表 = split(结果, "\n")
    var i = 1
    while i <= length(行列表) {
      var 行 = 行列表[i]
      if startsAt(行, "N:") == 1 {
        标签_姓名.Text = replaceall(行, "N:", "")
      } else if startsAt(行, "TEL:") == 1 {
        标签_电话.Text = replaceall(行, "TEL:", "")
      } else if startsAt(行, "EMAIL:") == 1 {
        标签_邮箱.Text = replaceall(行, "EMAIL:", "")
      } else if startsAt(行, "ORG:") == 1 {
        标签_公司.Text = replaceall(行, "ORG:", "")
      }
      var i = i + 1
    }
  }
}

实战案例：商品条码查询

扫描商品条码查价格

当 条码扫描器1.扫描完成(结果, 格式)
  如果 格式 = "EAN_13" 或 格式 = "EAN_8"
    ' 调用商品查询API
    调用 Web客户端1.执行Get请求("https://api.example.com/product?barcode=" & 结果)

当 Web客户端1.收到文本(网址, 响应码, 响应类型, 响应内容)
  设 数据 = 调用 文本.从JSON解析(响应内容)
  标签_商品名.文本 = 从字典 数据 获取 "name"
  标签_价格.文本 = "¥" & 从字典 数据 获取 "price"

WiFi二维码

生成WiFi连接二维码

when 按钮_生成WiFi码.Click() {
  var WiFi内容 = join("WIFI:T:WPA;S:", 文本输入框_SSID.Text, ";P:", 文本输入框_密码.Text, ";;")
  QRCodeGenerator1.GenerateQRCode(WiFi内容, 400)
}

解析WiFi二维码

procedure 解析WiFi二维码(内容) {
  // WIFI:T:WPA;S:MyWiFi;P:password123;;
  var 部分 = split(内容, ";")
  var i = 1
  while i <= length(部分) {
    var 段 = 部分[i]
    if startsAt(段, "S:") == 1 {
      标签_SSID.Text = replaceall(段, "S:", "")
    } else if startsAt(段, "P:") == 1 {
      标签_密码.Text = replaceall(段, "P:", "")
    } else if startsAt(段, "T:") == 1 {
      标签_加密方式.Text = replaceall(段, "T:", "")
    }
    var i = i + 1
  }
}

常见问题

Q1: 扫描器无法启动？

• 确认设备有摄像头
• 在AndroidManifest中需要摄像头权限
• App Inventor默认包含摄像头权限

Q2: 中文二维码扫描乱码？

确保二维码使用UTF-8编码。生成时：

设 内容 = 转UTF8编码(中文文本)
调用 QRCodeGenerator1.生成二维码(内容, 400)

Q3: 如何连续扫描？

BarcodeScanner每次只扫一次。连续扫描需要循环调用：

当 条码扫描器1.扫描完成(结果, 格式)
  ' 处理结果
  处理扫描结果(结果)
  ' 继续扫描
  如果 连续扫描模式
    调用 条码扫描器1.扫描()

总结

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。