微信小程序——识别二维码

编写微信小程序代码实现了一个基本的扫码功能，并能够对扫码结果进行解析和展示。

完整代码下载地址：https://download.csdn.net/download/qq_26043945/89994636

下面是对代码的具体解释：

index.js

1. 页面数据：
   • scanResult：用于存储扫码的结果。
2. scanQRCode 函数：
   • 当用户点击“扫描二维码”按钮时，会触发这个函数。
   • 使用 wx.scanCode API 从相机扫码，设置 onlyFromCamera: true 表示只能从相机扫码，不能从相册选择。
   • 扫码成功时，将扫码结果保存到 scanResult 数据中，并显示一个成功提示。
   • 扫码失败后，显示一个失败提示。
   • 无论成功或失败，都会在控制台打印相关信息。
   • 扫码成功后，还会调用 parseScanResult 函数来解析扫码结果。
3. parseScanResult 函数：
   • 遍历 lines 数组，每行按冒号分割成键和值，并去除两侧的空格。
   • 将处理后的键值对存储到 parsedData 对象中。
   • 使用 this.setData 将 parsedData 设置到页面的数据中（但注意，您的 WXML 文件中并没有直接展示 parsedData 的内容）。
   • 在控制台打印解析后的数据。

index.wxml

1. 布局：
   • 使用 view 和 button 组件创建了一个简单的界面。
   • 有一个按钮用于触发扫码操作。
   • 有一个文本区域（使用 text 组件），在 scanResult 不为空时显示扫码结果。

index.wxss

1. 样式：
   • 为 .container 设置了基本的布局样式，使其内容垂直居中。
   • 为 button 设置了样式，包括背景色、文字颜色、边框和圆角。
   • 为 text 设置了基本的文字样式。

index.js文件的具体代码如下所示。 

Page({
  data: {
    scanResult: ''
  },

  // 按钮点击事件，触发扫码
  scanQRCode: function() {
    const self = this;
    wx.scanCode({
      onlyFromCamera: true, // 是否只从相机扫码，不允许从相册选择图片
      success: function(res) {
        // 处理扫码成功的结果
        console.log('Scan result:', res);
        self.setData({
          scanResult: res.result // 将扫码结果保存到页面数据中
        });
        wx.showToast({
          title: '扫码成功',
          icon: 'success',
          duration: 2000
        });
        self.parseScanResult();
      },
      fail: function(error) {
        console.error('Scan failed:', error);
        wx.showToast({
          title: '扫码失败',
          icon: 'none',
          duration: 2000
        });
      }
    });
  },


  // 假设 scanQRCode 函数已经成功设置了 scanResult
  parseScanResult: function() {
    const scanResult = this.data.scanResult;
    const lines = scanResult.split('\n'); // 按行分割文本
    const parsedData = {};
 
    lines.forEach(line => {
      const [key, value] = line.split(':'); // 按冒号分割键和值
      if (key && value) {
        // 去除键和值两侧的空格，并处理可能的URL编码或特殊字符
        const trimmedKey = key.trim();
        const trimmedValue = value.trim();
 
        // 对于像 username 和 passwd 这样的字段，它们可能包含额外的信息（如 & 和 | 分隔符）
        // 在这里，我们简单地存储整个值，但你可以根据需要进一步解析它
        parsedData[trimmedKey] = trimmedValue;
      }
    });
 
    // 将解析后的数据设置到页面的数据中
    this.setData({
      parsedData: parsedData
    });
 
    // 你可以在控制台中查看解析后的数据
    console.log('Parsed Data:', parsedData);
  }

});