Uniapp 使用 UQRCode 创建二维码

一、官方文档

1. 官方文档：uqrcode.cn/doc。

2. github地址：github.com/Sansnn/uQRC…。

3. npm地址：www.npmjs.com/package/uqr…。

4. uni-app插件市场地址：ext.dcloud.net.cn/plugin?id=1…。

二、安装方式

1. 通过npm安装，成功后即可使用import或require进行引用。

   # npm安装
   npm install uqrcodejs
   # 或者
   npm install @uqrcode/js
   

2. 通过项目开源地址获取uqrcode.js，下载uqrcode.js后，将其复制到您项目指定目录，在页面中引入uqrcode.js文件即可开始使用。

三、引入方式

1. 通过import引入。

   // npm安装
   import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
   // 或者
   import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
   

四、使用方式

1. 使用项目场景基于 uniapp + vue3 + ts + vite，QrCode.vue组件:

   <template>
     <view class="canvas-part skeleton" :style="style" >
       <image class="canvas-img" :src="canvasImg" ></image>
       <canvas class="canvas-code" id="qrcode" canvas-id="qrcode" :style="style" ></canvas>
     </view>
   </template>
   
   <script setup lang="ts">
   import { computed, getCurrentInstance, ref } from 'vue';
   import { rpxToPx } from '@/utils/units';
   import UQRCode from 'uqrcodejs';
   
   const instance = getCurrentInstance();
   
   const props = withDefaults(
     defineProps<{
       size: number; // 尺寸 rpx
       content: string | number;
       margin: number;
     }>(),
     { size: 200, margin: 10 }
   );
   
   // 样式
   const style = computed(() => {
     const size = `${props.size}rpx`;
     return { width: size, height: size };
   });
   
   // Canvas图片地址
   const canvasImg = ref('');
   
   /**
    * 初始化二维码
    * @param content 二维码内容
    */
   const initQrcode = async (content: string | number) => {
     // 转换尺寸
     const size = rpxToPx(props.size);
     // 获取uQRCode实例
     const qr = new UQRCode();
     qr.setOptions({
       // 设置二维码内容
       data: content || props.content,
       // 设置二维码大小，必须与canvas设置的宽高一致
       size: size,
       // 设置二维码边距
       margin: rpxToPx(props.margin)
     });
     // 调用制作二维码方法
     qr.make();
     // 获取canvas上下文
     const canvasContext = uni.createCanvasContext('qrcode', instance?.proxy);
     // 设置uQRCode实例的canvas上下文
     qr.canvasContext = canvasContext;
     // 绘制图形
     qr.draw().then(() => {
       uni.canvasToTempFilePath(
         {
           width: size,
           height: size,
           destWidth: size,
           destHeight: size,
           canvasId: 'qrcode',
           success: function (res) {
             canvasImg.value = res.tempFilePath;
           },
           fail: function (err) {
             console.log(err);
           }
         },
         instance?.proxy // 这里很关键，不然拿不到canvas实例
       );
     });
   };
   
   // 导出初始化方法，使用ref方式调用组件
   defineExpose({
     initQrcode
   });
   </script>
   
   <style scoped lang="scss">
   .canvas-part {
     width: 200rpx;
     height: 200rpx;
     margin: 0 auto;
     position: relative;
     .canvas-img {
       width: 100%;
       height: 100%;
     }
     .canvas-code {
       position: absolute;
       left: 999999px;
     }
   }
   .skeleton {
     background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
     background-size: 400% 100%;
     animation: el-skeleton-loading 1.4s ease infinite;
     border-radius: 8rpx;
   }
   @keyframes el-skeleton-loading {
     0% {
       background-position: 100% 50%;
     }
     to {
       background-position: 0 50%;
     }
   }
   </style>
   

五、效果参考