前端如何生成二维码

欢迎访问的我的博客：http://blog.meoo.info原文地址：http://blog.meoo.info/2022/01/10/qr-code-generation-in-front-end/npm的qrCode组件方案描述原文：https://blog.csdn.net/baiqiangdoudou/article/details/100186071npm install qrcode

tuhoooo

14149人浏览 · 2022-01-10 14:47:26

tuhoooo · 2022-01-10 14:47:26 发布

欢迎访问的我的博客：http://blog.duhbb.com

原文地址：http://blog.duhbb.com/2022/01/10/qr-code-generation-in-front-end/

npm的qrCode组件

方案描述

原文：https://blog.csdn.net/baiqiangdoudou/article/details/100186071

npm install qrcodejs2 --save

实践

为了使用这个包还得学一下webpack的基本使用，webpack如何打包html等。

webpack打包我是参考的这位老哥：https://www.cnblogs.com/luojianjian/p/8053113.html

测试的项目如下所示：

file

index。html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Document</title>
</head>

<body>
    <h1>hello webpack!</h1>
    <div id="my-qr-code"></div>
</body>

</html>

index.js

import QRCode from 'qrcodejs2'

// 在id为my-qr-code元素中生成二维码
var qrcode = new QRCode("my-qr-code", {
    text: "http://www.baidu.com",
    width: 147,
    height: 147,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
})

webpack.config.js，这个配置是从别的地方抄过来的，webpack -p命令已经不能用了，直接使用webpack就行。

var webpack = require('webpack');

var path = require('path');

//打包html的插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: {
        //入口文件
        'app/dist/js/index': './app/src/js/index.js'

        //我们的是多页面项目，多页面入口配置就是这样，
        //app/src/page下可能还会有很多页面，照着这样配置就行

    },
    output: {
        //__dirname 当前webpack.config.js的路径
        filename: '[name].js',      // 打包后index.js的名字，
        // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，
        // 这里无论你src/js/index.js这个脚本如何命名，打包后都将是index.js
        // path: path.resolve(__dirname)
    },


    //插件
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['app/dist/js/index'],
            filename: 'app/index.html',
            template: 'app/src/page/index.html'
        })
    ]
}

vscode terminal运行过的命令如下：

  501  npm init -y
  502  npm install webpack -g
  503  npm install webpack --save-dev
  504  npm install html-webpack-plugin --save-dev
  505  webpack -p
  506  webpack -p
  507  webpack -p
  508  npm i -g webpack-cli
  509  webpack -p
  510  webpack -v
  511  webpack -p
  512  webpack -p
  513  npm run build
  514  npm install qrcodejs2 --save
  515  npm run build
  516  webpack
  517  webpack --help