更新记录

1.0.0（2026-01-13）

h5项目的扫码组件

平台兼容性

uni-app(3.7.2)

其他

<godfreyScanCode
  ref="godfreyScanCodeRef"
  :continue="true"
  @success="handleSuccess"
  @error="handleError"
/>

import godfreyScanCode from '@/uni_modules/godfrey-scan-code/components/godfrey-scan-code/godfrey-scan-code.vue'

const godfreyScanCodeRef = ref()

function handleSuccess(res) {
  console.log("handleSuccess", res)
}

function handleError(err) {
  console.log("handleError", err)
}

1. 下载导入本插件

2. 安装jsqr插件

npm i jsqr@1.4.0

3. 在页面中引入本插件

4. 在本地调试需要改成https访问，否则会出现无法使用摄像头的错误。以下介绍配置https的几个要点

4.1 获取证书

4.1.1 mkcert下载地址：https://github.com/FiloSottile/mkcert/releases

4.1.2 下载后在该文件目录下打开cmd,这里要以管理运行方式打开cmd 执行以下命令

4.1.3 执行以下命令

mkcert-v1.4.4-windows-amd64.exe -install

4.1.4 第一次执行该命令可能有安装警告框弹出，点击是即可!安装成功。提示创建一个新的本地CA，本地CA现在已安装在系统信任存储中。

4.1.5 生成自签证书

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.2.xx

4.1.6 在mkcert安装目录下，生成了自签证书。我们可以看到成功生成了localhost+3.pem证书文件和localhost+3-key.pem私钥文件

4.2 使用证书

4.2.1 如果是uniapp创建的h5项目，在h5项目目录下的mainfest.json中"h5"模块添加如下内容

注意：复制粘贴时换行加\n,组成字符串

"devServer": {
  "https": {
    "cert": "-----BEGIN CERTIFICATE-----\nMIIEazCCAtOgAwIBAgIRAMv7liCQ+tRLbLQX7Akj7NowDQYJKoZIhvcNAQELBQAw\ngYkxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTEvMC0GA1UECwwmREVT\nS1RPUC1FUE1ORVUyXExlbm92b0BERVNLVE9QLUVQTU5FVTIxNjA0BgNVBAMMLW1r\nY2VydCBERVNLVE9QLUVQTU5FVTJcTGVub3ZvQERFU0tUT1AtRVBNTkVVMjAeFw0y\nNjAxMTMwMTIzMTlaFw0yODA0MTMwMTIzMTlaMFoxJzAlBgNVBAoTHm1rY2VydCBk\nZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEvMC0GA1UECwwmREVTS1RPUC1FUE1ORVUy\nXExlbm92b0BERVNLVE9QLUVQTU5FVTIwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAw\nggEKAoIBAQDoyIIWKvuIDUikaZh6E4LSmRxb5LT3t90LAJzIISBe1Jf0QulI3gcw\nm77bQqGZWf3vq58w+I+dTZFyjQhPZycd16Hqemphmzq7ijliQ5gT/rhH80hgIzXm\nfEwv8dNnFRVUxciCcOu3M+Q/oudWTXHmNXqeq+w87SKjOgF+rYpSQ/3TyAedBkQc\nyIsfVG9HjhNhuCgLAoONuhwFz1B2rFWtTw9k2J5vIAjqQpQ5Cl1/pZUiSp1PZJBB\n45bpiS5PqjGGdhioSSIwqzLRh/tJ9e18E752npBbh7C9uiaqGfDHOPa8STf4v4Zx\n26samoQOmMYl1qlQFaGDa90DwRJwdCmVAgMBAAGjfDB6MA4GA1UdDwEB/wQEAwIF\noDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBRQT+jJh0eT2dCPVJqT\nb69RHfKVpTAyBgNVHREEKzApgglsb2NhbGhvc3SHBH8AAAGHEAAAAAAAAAAAAAAA\nAAAAAAGHBMCoZXEwDQYJKoZIhvcNAQELBQADggGBAD9pVSPJY0vLb+WhI8YakGo5\nxcB/vRFW69MUSwk80QMqp06VDp1n/0N0G/ChGyXb23a6fnw2OAvKbVO5UoxJX/op\n7GKAO9dKIe9bxrzL13t7FaJ88HJ3fjUP9nhbEIkPBzKCYaTurjzv4bufxtZVXo8P\n5/tcEDkD7J7R1VLltOezmcxawWAIjeS+Fj3HY34sGpQZ3sEQv7n9Pzg+q1Eydt/x\nQqKRx9ps2LaqulXS/9Uo+3EwUcxcvGxxGf0I4kxp9gsevMK1qjr9/8thYIDiTD1k\n3lRpmi5vupZMlDz4PmKi9qSM4kj4vKb333GYf9exNaEL3CAmja8butpbPXNPeOlE\nvqWqDt8Cg3g8jAzW/qHyNlg+afiA/+dMTCgCom/K5otNLFwN57zyLupMm3GSTnKC\n66z3CAawIMLQTk4UkNZO/d8t6jAvfHH2ICmSDqquFEA1DlZ7XeUVVm9lM+dBzP7W\ndD1lYsDSJnLn4zKKPnWLg0CPx2pKMLyHjjxUc6zKJw==\n-----END CERTIFICATE-----\n",
    "key": "-----BEGIN PRIVATE KEY-----\nMIIEwAIBADANBgkqhkiG9w0BAQEFAASCBKowggSmAgEAAoIBAQDoyIIWKvuIDUik\naZh6E4LSmRxb5LT3t90LAJzIISBe1Jf0QulI3gcwm77bQqGZWf3vq58w+I+dTZFy\njQhPZycd16Hqemphmzq7ijliQ5gT/rhH80hgIzXmfEwv8dNnFRVUxciCcOu3M+Q/\noudWTXHmNXqeq+w87SKjOgF+rYpSQ/3TyAedBkQcyIsfVG9HjhNhuCgLAoONuhwF\nz1B2rFWtTw9k2J5vIAjqQpQ5Cl1/pZUiSp1PZJBB45bpiS5PqjGGdhioSSIwqzLR\nh/tJ9e18E752npBbh7C9uiaqGfDHOPa8STf4v4Zx26samoQOmMYl1qlQFaGDa90D\nwRJwdCmVAgMBAAECggEBAMQhfImU+Y0uNBBi8BebLNSoMJ60Wk2FWvaUM4TjdFSy\nJr2lSs0cVU59SxeOUn3UtwIixeQK6WYOHwg3D9NnBCw+rKvVLKDEm327/pFuhkoC\nid4FeuuVfyqNe9vBku79cpWUd1aAMfqP/DYp2WR7qAXg9UmPbWIAIvkIPI4xRaP9\nDbK2SFOrGJOzWmpBNK6srTUuclaUOp+8kqAYZJwCYWkFWsyNm5elA1rB0M2jheZF\n2q4Y4lxWjGyPlPnal+PbYNT2O4ZlnA4BH8wHErYSDs5p/btBQUgbOtZX1PO72dk7\nD0cB0gkEl2YKYQzpYVUZNQsxAVTsIlL69rMkYEiAQFkCgYEA6ZaqzhcDEdhF1/2g\nMXCJBDtX8Z6ptmlcN3FW0JNdHHsVG8TjIeTp5JBY6N/EYgVi/6quA8hFEtV04z4E\nBeqOII+jqGmsz12rSRFZEnpuDKgZMl9spBs5bTPs8QEdu7zp+8/0WI6Os2KZ0U2i\n/N+D9Iv8n8I3mB8e6rVV27g+dscCgYEA/x4PqenqU6mzLMu7klbcR6y7zpY6NzCg\n5wP3Qij8i29ytV7rvZa8UT+7Rcg0xAeqFiiC7ChA5QcMdEvShKJUOcLH3aCfjrdO\nlv1ga5d51foq8rrIRXachvpdXFPoYoZ9HfHJsKjn6gPVsXNihTwIQ2rGm/4Xyc5j\ngfGR5C6y0MMCgYEAqRchA9jSpwtI2+bEHKXa+Y4/xi9VqS8xywynjIrwXxqWGCj5\nRmLgEU2QntrE3TQLCwoxt5k0r0KHv6v325SEV/vCu7nrl5y1zknZka/AlDbnLni3\nO0Bd3Lg27+sf6/P/6QILXkOr9x0MPeAWeTkP22mucLN17Q+yILMtuMTxqqcCgYEA\nnhtbScqWVtNNH+4DiWYbjrAWlKm12o5gqctjabVNDn07cfwpzY2lmBUPUugJC5RU\nbPcebI1l6oq7xTdYeKrB2CpHA6uQNzqTki/lmch+0YYBJ/1qMOKZj22KfrXhx23i\nDLTUco+7auSFgzwnSrsxw9Zg0DxhMcifEuFLsUbfu1ECgYEAs5yfx7v8GXyUzIHj\nEwFiR9B2h/cFBOHGpaaQSsSNlnYvvVk4Z4YcKNcUftoIHm8lP1CdbWVYOZEqSo3c\ntV8Qo10uz1bRf3eiCRBeQSXTcmcUv+AT2Yt2zWsXNmSrIrWvD5uGp04uaWWa8Loo\nIChJElEO+xbqsfL/ieaqSQJdy2I=\n-----END PRIVATE KEY-----\n"
  },
}

4.2.2 如果是Vue3脚手架创建的h5项目，在src目录创建ssl文件夹，将上面生成的证书文件复制到ssl文件夹中。

注意：fs模块和path模块的引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import fs from 'fs';
export default defineConfig({
  server: {
    open: true,
    https: {
      // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
      cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
      key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
    }
  }
})