sard-uniapp 1.9.0 → 1.9.1

package/changelog.md

@@ -1,3 +1,12 @@
+## [1.9.1](https://github.com/sutras/sard-uniapp/compare/v1.9.0...v1.9.1) (2024-12-22)
+
+
+### Bug Fixes
+
+* 修复qrcode 在app端报错的问题 ([c74cad5](https://github.com/sutras/sard-uniapp/commit/c74cad5cbe7dd733843713fd3500e15236719583))
+
+
+
 # [1.9.0](https://github.com/sutras/sard-uniapp/compare/v1.8.2...v1.9.0) (2024-12-22)
 
 

package/components/qrcode/common.d.ts

@@ -1,9 +1,10 @@
 import { type StyleValue } from 'vue';
+export type QrcodeECL = 'L' | 'M' | 'Q' | 'H';
 export interface QrcodeProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     text?: string;
-    ecl?: 'L' | 'M' | 'Q' | 'H';
+    ecl?: QrcodeECL;
     type?: 'canvas' | 'image';
     size?: string;
     canvasSize?: number;
@@ -21,3 +22,6 @@ export declare const defaultQrcodeProps: {
     bgColor: string;
     quietZoneModules: number;
 };
+export interface QrcodeSlots {
+    default?(props: Record<string, never>): any;
+}

package/components/qrcode/index.d.ts

@@ -1 +1 @@
-export type { QrcodeProps } from './common';
+export type { QrcodeProps, QrcodeSlots, QrcodeECL } from './common';

package/components/qrcode/index.scss

@@ -3,10 +3,15 @@
 @include bem(qrcode) {
   @include b() {
     @include universal;
+    display: inline-flex;
   }
 
-  @include e(canvas) {
-    display: none;
+  @include e(canvas-wrapper) {
+    position: fixed;
+    left: -999999px;
+    opacity: 0;
+    pointer-events: none;
+    touch-action: none;
   }
 
   @include e(image) {

package/components/qrcode/qrcode.d.ts

@@ -1,7 +1,10 @@
 import { type QrcodeProps } from './common';
-declare const _default: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QrcodeProps> & Readonly<{}>, {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QrcodeProps> & Readonly<{}>, {
     text: string;
-    ecl: "L" | "M" | "Q" | "H";
+    ecl: import("./common").QrcodeECL;
     size: string;
     type: "canvas" | "image";
     canvasSize: number;
@@ -9,4 +12,10 @@ declare const _default: import("vue").DefineComponent<QrcodeProps, {}, {}, {}, {
     bgColor: string;
     quietZoneModules: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/qrcode/qrcode.vue

@@ -1,19 +1,37 @@
 <template>
   <view :class="qrcodeClass" :style="qrcodeStyle">
-    <canvas type="2d" :class="bem.e('canvas')" :id="canvasId"></canvas>
+    <view :class="bem.e('canvas-wrapper')">
+      <canvas
+        type="2d"
+        :width="canvasSize"
+        :height="canvasSize"
+        :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
+        :canvas-id="canvasId"
+        :id="canvasId"
+      ></canvas>
+    </view>
     <image :src="dataURL" mode="aspectFit" :class="bem.e('image')" />
+    <slot></slot>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, getCurrentInstance, onMounted, shallowRef } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
 import {
   classNames,
   stringifyStyle,
   createBem,
   uniqid,
-  qrcode
+  qrcode,
+  isApp
 } from "../../utils";
 import { defaultQrcodeProps } from "./common";
 export default  _defineComponent({
@@ -40,30 +58,72 @@ export default  _defineComponent({
     __expose();
     const props = __props;
     const bem = createBem("qrcode");
+    const instance = getCurrentInstance();
     const canvasId = uniqid();
+    const contextRef = shallowRef();
     const canvasRef = shallowRef();
     const qrcodeMap = computed(() => {
       return qrcode(props.text, {
         ecl: props.ecl
       });
     });
-    const dataURL = computed(() => {
+    const dataURL = ref("");
+    const drawQrcodeInApp = () => {
+      const context = contextRef.value;
+      if (!context) {
+        return;
+      }
+      const map = qrcodeMap.value;
+      const size = props.canvasSize;
+      const moduleSize = size / (map.length + props.quietZoneModules * 2);
+      const margin = moduleSize * props.quietZoneModules;
+      context.clearRect(0, 0, size, size);
+      context.setFillStyle(props.bgColor);
+      context.fillRect(0, 0, size, size);
+      context.setFillStyle(props.color);
+      map.forEach((row, rowIndex) => {
+        row.forEach((col, colIndex) => {
+          if (col === 1) {
+            context.fillRect(
+              colIndex * moduleSize + margin,
+              rowIndex * moduleSize + margin,
+              moduleSize,
+              moduleSize
+            );
+          }
+        });
+      });
+      context.draw();
+      uni.canvasToTempFilePath({
+        x: 0,
+        y: 0,
+        width: size,
+        height: size,
+        destWidth: size,
+        destHeight: size,
+        canvasId,
+        success(res) {
+          dataURL.value = res.tempFilePath;
+        }
+      });
+    };
+    const drawQrcodeInOthers = () => {
       const canvas = canvasRef.value;
       if (!canvas) {
-        return "";
+        return;
       }
       const map = qrcodeMap.value;
       const size = props.canvasSize;
       canvas.width = size;
       canvas.height = size;
-      const context = canvas.getContext("2d");
       const moduleSize = size / (map.length + props.quietZoneModules * 2);
       const margin = moduleSize * props.quietZoneModules;
-      const path = canvas.createPath2D ? canvas.createPath2D() : new Path2D();
+      const context = canvas.getContext("2d");
+      const path2D = canvas.createPath2D ? canvas.createPath2D() : new Path2D();
       map.forEach((row, rowIndex) => {
         row.forEach((col, colIndex) => {
           if (col === 1) {
-            path.rect(
+            path2D.rect(
               colIndex * moduleSize + margin,
               rowIndex * moduleSize + margin,
               moduleSize,
@@ -76,16 +136,37 @@ export default  _defineComponent({
       context.fillStyle = props.bgColor;
       context.fillRect(0, 0, size, size);
       context.fillStyle = props.color;
-      context.fill(path);
-      return canvas.toDataURL();
-    });
-    const instance = getCurrentInstance();
-    onMounted(() => {
-      uni.createSelectorQuery().in(instance).select(`#${canvasId}`).node((res) => {
-        if (res && res.node) {
-          canvasRef.value = res.node;
+      context.fill(path2D);
+      dataURL.value = canvas.toDataURL();
+    };
+    watch(
+      [
+        contextRef,
+        canvasRef,
+        qrcodeMap,
+        () => props.canvasSize,
+        () => props.color,
+        () => props.bgColor,
+        () => props.quietZoneModules
+      ],
+      () => {
+        if (isApp) {
+          drawQrcodeInApp();
+        } else {
+          drawQrcodeInOthers();
         }
-      }).exec();
+      }
+    );
+    onMounted(() => {
+      if (isApp) {
+        contextRef.value = uni.createCanvasContext(canvasId, instance);
+      } else {
+        uni.createSelectorQuery().in(instance).select(`#${canvasId}`).node((res) => {
+          if (res && res.node) {
+            canvasRef.value = res.node;
+          }
+        }).exec();
+      }
     });
     const qrcodeClass = computed(() => {
       return classNames(bem.b(), props.rootClass);
@@ -96,7 +177,7 @@ export default  _defineComponent({
         height: props.size
       });
     });
-    const __returned__ = { props, bem, canvasId, canvasRef, qrcodeMap, dataURL, instance, qrcodeClass, qrcodeStyle };
+    const __returned__ = { props, bem, instance, canvasId, contextRef, canvasRef, qrcodeMap, dataURL, drawQrcodeInApp, drawQrcodeInOthers, qrcodeClass, qrcodeStyle };
     return __returned__;
   }
 });

package/package.json

@@ -1,7 +1,8 @@
 {
   "id": "sard-uniapp",
   "name": "sard-uniapp",
-  "version": "1.9.0",
+  "displayName": "sard-uniapp",
+  "version": "1.9.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {

package/utils/index.d.ts

@@ -7,3 +7,4 @@ export * from './is';
 export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
+export * from './system';

package/utils/index.js

@@ -7,3 +7,4 @@ export * from './is';
 export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
+export * from './system';

package/utils/system.d.ts

@@ -0,0 +1,4 @@
+export declare const systemInfo: UniApp.GetSystemInfoResult;
+export declare const isApp: boolean;
+export declare const isWeb: boolean;
+export declare const isMp: boolean;

package/utils/system.js

@@ -0,0 +1,4 @@
+export const systemInfo = uni.getSystemInfoSync();
+export const isApp = systemInfo.uniPlatform === 'app';
+export const isWeb = systemInfo.uniPlatform === 'web';
+export const isMp = systemInfo.uniPlatform.startsWith('mp-');