更新记录

1.0.5（2025-03-24）

修复已知

1.0.4（2025-03-08）

修复已知小程序适配问题

1.0.3（2025-03-08）

修复对旧版vue2的兼容处理

平台兼容性

wui-generateCode开发文档

介绍

wui-generateCode是UTS编写的 二维码和条形码生成的UTS插件 本插件采用的是离屏绘制 所以不需要需绑定canvas组件就能实现绘制操作返回 base64 图片。目前兼容安卓app和web以及微信小程序。 如果需要扫码插件请使用wui-scanCode华为统一扫码服务

基本使用

1.引入插件

import { generateCode } from '@/uni_modules/wui-generateCode';

2.调用插件的生成函数 完整demo

<template>
    <view>
        <button @click="SYSENG">码生成</button>
        <image :src="src0" mode="aspectFit"></image>
        <image :src="src1" mode="aspectFit"></image>
        <image :src="src2" mode="aspectFit"></image>
        <image :src="src3" mode="aspectFit"></image>
        <image :src="src4" mode="aspectFit"></image>
    </view>
</template>

<script>
    import {
        generateCode
    } from '@/uni_modules/wui-generateCode';
    export default {
        data() {
            return {
                src0: '',
                src1: '',
                src2: '',
                src3: '',
                src4: '',
            }
        },
        onLoad() {

        },
        methods: {
            //生成 QR 二维码
            SYSENG() {
                const code = new generateCode();
                code.QRCODE({
                    content: "我是二维码内容我是二维码内容",
                    matrixSize: 1.5, //1 到 2 之间
                    matrixShape: "star", //可选 "rect" "arc" "star" "paper"
                    setTarg: "eye", //可选"founder" "rounded" "rounder" "lozenge" "star" "bubble" "eye" "single"
                    logoSrc: "/static/logo.png",
                    QRErr: "H", //可选 H  Q  M  L
                    success: (res) => {
                        let width = `${res.width}px`;
                        let height = `${res.height}px`;
                        this.src0 = res.src;
                    }
                })
                code.QRCODE({
                    content: "我是二维码内容",
                    logoSrc: "/static/logo.png",
                    success: (res) => {
                        let width = `${res.width}px`;
                        let height = `${res.height}px`;
                        this.src1 = res.src;
                    }
                })
                code.CODE128({
                    content: "1234567890",
                    success: (res) => {
                        let width = `${res.width}px`;
                        let height = `${res.height}px`;
                        this.src2 = res.src;
                    }
                })
                code.CODEEAN13({
                    content: "123456789012",
                    success: (res) => {
                        let width = `${res.width}px`;
                        let height = `${res.height}px`;
                        this.src3 = res.src;
                    }
                })
                code.CODEEAN8({
                    content: "1234567",
                    success: (res) => {
                        let width = `${res.width}px`;
                        let height = `${res.height}px`;
                        this.src4 = res.src;
                    }
                })

            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

生成码code下的方法和配置参数介绍

1.二维码 code.QRCODE(options: generateCodeOptions)说明:

2.条形码 code.CODE128(options: generateCodeOptions)说明:

2.条形码 code.CODEEAN13(options: generateCodeOptions)说明:

2.条形码 code.CODEEAN8(options: generateCodeOptions)说明: