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

概述
条码扫描
二维码生成
- 使用QRCodeGenerator扩展
- 使用WebView生成（无需扩展）
实战案例：名片二维码
- 生成vCard二维码
- 扫描名片二维码并解析
实战案例：商品条码查询
- 扫描商品条码查价格
WiFi二维码
- 生成WiFi连接二维码
- 解析WiFi二维码
常见问题
总结

概述

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

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

条码扫描

BarcodeScanner组件

组件面板 → Sensors → **BarcodeScanner`

当 按钮_扫描.被点击
  调用 条码扫描器1.扫描()

当 条码扫描器1.扫描完成(结果, 格式)
  标签_结果.文本 = "结果：" & 结果
  标签_格式.文本 = "格式：" & 格式

支持的条码格式

格式	类型	说明
QR_CODE	二维码	最常用
CODE_128	一维码	物流常用
CODE_39	一维码	工业常用
EAN_13	一维码	商品条码
EAN_8	一维码	短商品码
UPC_A	一维码	美国商品码
DATA_MATRIX	二维码	工业用
PDF_417	二维码	证件用

扫描结果处理

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

二维码生成

使用QRCodeGenerator扩展

参考已有 extensions/QRCodeGenerator.md：

当 按钮_生成.被点击
  设 内容 = 输入框_内容.文本
  设 尺寸 = 400
  调用 QRCodeGenerator1.生成二维码(内容, 尺寸)

当 QRCodeGenerator1.二维码生成完成(图片路径)
  设 Image_预览.图片 = 图片路径
  标签_状态.文本 = "✅ 二维码已生成"

使用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)

扫描名片二维码并解析

当 条码扫描器1.扫描完成(结果, 格式)
  如果 结果 以 "BEGIN:VCARD" 开头
    设 行列表 = 分割文本(结果, "\n")
    设 i = 1
    当 i ≤ 列表长度(行列表)
      设 行 = 列表第i项(行列表)
      如果 行 以 "N:" 开头
        标签_姓名.文本 = 替换文本(行, "N:", "")
      否则 如果 行 以 "TEL:" 开头
        标签_电话.文本 = 替换文本(行, "TEL:", "")
      否则 如果 行 以 "EMAIL:" 开头
        标签_邮箱.文本 = 替换文本(行, "EMAIL:", "")
      否则 如果 行 以 "ORG:" 开头
        标签_公司.文本 = 替换文本(行, "ORG:", "")
      设 i = i + 1

实战案例：商品条码查询

扫描商品条码查价格

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

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

WiFi二维码

生成WiFi连接二维码

当 按钮_生成WiFi码.被点击
  设 WiFi内容 = "WIFI:T:WPA;S:" & 输入框_SSID.文本 & ";P:" & 输入框_密码.文本 & ";;"
  调用 QRCodeGenerator1.生成二维码(WiFi内容, 400)

解析WiFi二维码

定义 解析WiFi二维码(内容) 
  ' WIFI:T:WPA;S:MyWiFi;P:password123;;
  设 部分 = 分割文本(内容, ";")
  设 i = 1
  当 i ≤ 列表长度(部分)
    设 段 = 列表第i项(部分)
    如果 段 以 "S:" 开头
      标签_SSID.文本 = 替换文本(段, "S:", "")
    否则 如果 段 以 "P:" 开头
      标签_密码.文本 = 替换文本(段, "P:", "")
    否则 如果 段 以 "T:" 开头
      标签_加密方式.文本 = 替换文本(段, "T:", "")
    设 i = i + 1

常见问题

Q1: 扫描器无法启动？

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

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

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

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

Q3: 如何连续扫描？

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

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

总结

功能	组件/扩展	说明
扫描条码	BarcodeScanner	内置组件
生成二维码	QRCodeGenerator	扩展
WebView生成	WebView + qrcode.js	无需扩展
vCard名片	QRCodeGenerator + 文本拼接	实战应用
WiFi分享	特殊格式字符串	实用功能

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