DEV Community: Jessie Chen

微信小程序实现动态二维码海报生成与保存 | 高效便捷的前端方案

Jessie Chen — Fri, 14 Mar 2025 09:10:29 +0000

WEBSITE：Welcome to Jessie's World

GitHub：GitHub

前言

在微信小程序开发中,经常需要实现分享海报功能,通常包含动态二维码。本文将详细介绍如何在小程序中生成带有二维码的海报,并实现保存到手机相册的功能。

实现原理

整个功能的实现主要包含以下几个步骤:

生成二维码
绘制海报背景
将二维码绘制到海报上
将画布导出为图片
保存图片到相册

核心代码实现

1. 二维码生成工具类

首先,我们需要一个二维码生成的工具类。这里使用优化后的 QRCode 工具:

qrcode.js：绘制二维码

// qrcode.js 绘制二维码

!(function () {
  // alignment pattern
  var adelta = [
    0, 11, 15, 19, 23, 27, 31, 16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24, 26, 26, 28, 28, 24, 24, 26, 26,
    26, 28, 28, 24, 26, 26, 26, 28, 28
  ];

  // version block
  var vpat = [
    0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d, 0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9, 0x7ec, 0xec4,
    0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75, 0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64, 0x541, 0xc69
  ];

  // final format bits with mask: level << 3 | mask
  var fmtword = [
    0x77c4,
    0x72f3,
    0x7daa,
    0x789d,
    0x662f,
    0x6318,
    0x6c41,
    0x6976, //L
    0x5412,
    0x5125,
    0x5e7c,
    0x5b4b,
    0x45f9,
    0x40ce,
    0x4f97,
    0x4aa0, //M
    0x355f,
    0x3068,
    0x3f31,
    0x3a06,
    0x24b4,
    0x2183,
    0x2eda,
    0x2bed, //Q
    0x1689,
    0x13be,
    0x1ce7,
    0x19d0,
    0x0762,
    0x0255,
    0x0d0c,
    0x083b //H
  ];

  // 4 per version: number of blocks 1,2; data width; ecc width
  var eccblocks = [
    1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17, 1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28, 1, 0, 55, 15, 1,
    0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22, 1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16, 1, 0, 108, 26, 2, 0, 43, 24, 2,
    2, 15, 18, 2, 2, 11, 22, 2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28, 2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4,
    1, 13, 26, 2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26, 2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24, 2,
    2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28, 4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24, 2, 2, 92, 24, 6,
    2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28, 4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22, 3, 1, 115, 30, 4, 5, 40, 24,
    11, 5, 16, 20, 11, 5, 12, 24, 5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24, 5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19,
    24, 3, 13, 15, 30, 1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28, 5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2,
    19, 14, 28, 3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26, 3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10,
    15, 28, 4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30, 2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13,
    24, 4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30, 6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
    8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30, 10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30, 8,
    4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30, 3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30, 7, 7,
    116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30, 5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30, 13, 3,
    115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30, 17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30, 17, 1,
    115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30, 13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30, 12, 7,
    121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30, 6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30, 17, 4,
    122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30, 4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30, 20,
    4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30, 19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30
  ];

  // Galois field log table
  var glog = [
    0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b, 0x04, 0x64, 0xe0, 0x0e, 0x34,
    0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71, 0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93,
    0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45, 0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72,
    0xa6, 0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88, 0x36, 0xd0, 0x94, 0xce,
    0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40, 0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b,
    0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d, 0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3,
    0xa7, 0x57, 0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18, 0xe3, 0xa5, 0x99,
    0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e, 0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd,
    0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61, 0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47,
    0x6d, 0x41, 0xa2, 0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6, 0x6c, 0xa1,
    0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a, 0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0,
    0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7, 0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea,
    0xa8, 0x50, 0x58, 0xaf
  ];

  // Galios field exponent table
  var gexp = [
    0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26, 0x4c, 0x98, 0x2d, 0x5a, 0xb4,
    0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0, 0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4,
    0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23, 0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde,
    0xa1, 0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0, 0xfd, 0xe7, 0xd3, 0xbb,
    0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2, 0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d,
    0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce, 0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33,
    0x66, 0xcc, 0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54, 0xa8, 0x4d, 0x9a,
    0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73, 0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e,
    0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff, 0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5,
    0x57, 0xae, 0x41, 0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6, 0x51, 0xa2,
    0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09, 0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4,
    0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16, 0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8,
    0xad, 0x47, 0x8e, 0x00
  ];

  // Working buffers:
  // data input and ecc append, image working buffer, fixed part of image, run lengths for badness
  var strinbuf = [],
    eccbuf = [],
    qrframe = [],
    framask = [],
    rlens = [];
  // Control values - width is based on version, last 4 are from table.
  var version, width, neccblk1, neccblk2, datablkw, eccblkwid;
  var ecclevel = 2;
  // set bit to indicate cell in qrframe is immutable.  symmetric around diagonal
  function setmask(x, y) {
    var bt;
    if (x > y) {
      bt = x;
      x = y;
      y = bt;
    }
    // y*y = 1+3+5...
    bt = y;
    bt *= y;
    bt += y;
    bt >>= 1;
    bt += x;
    framask[bt] = 1;
  }

  // enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)
  function putalign(x, y) {
    var j;

    qrframe[x + width * y] = 1;
    for (j = -2; j < 2; j++) {
      qrframe[x + j + width * (y - 2)] = 1;
      qrframe[x - 2 + width * (y + j + 1)] = 1;
      qrframe[x + 2 + width * (y + j)] = 1;
      qrframe[x + j + 1 + width * (y + 2)] = 1;
    }
    for (j = 0; j < 2; j++) {
      setmask(x - 1, y + j);
      setmask(x + 1, y - j);
      setmask(x - j, y - 1);
      setmask(x + j, y + 1);
    }
  }

  //========================================================================
  // Reed Solomon error correction
  // exponentiation mod N
  function modnn(x) {
    while (x >= 255) {
      x -= 255;
      x = (x >> 8) + (x & 255);
    }
    return x;
  }

  var genpoly = [];

  // Calculate and append ECC data to data block.  Block is in strinbuf, indexes to buffers given.
  function appendrs(data, dlen, ecbuf, eclen) {
    var i, j, fb;

    for (i = 0; i < eclen; i++) strinbuf[ecbuf + i] = 0;
    for (i = 0; i < dlen; i++) {
      fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];
      if (fb != 255)
        /* fb term is non-zero */
        for (j = 1; j < eclen; j++) strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];
      else for (j = ecbuf; j < ecbuf + eclen; j++) strinbuf[j] = strinbuf[j + 1];
      strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];
    }
  }

  //========================================================================
  // Frame data insert following the path rules

  // check mask - since symmetrical use half.
  function ismasked(x, y) {
    var bt;
    if (x > y) {
      bt = x;
      x = y;
      y = bt;
    }
    bt = y;
    bt += y * y;
    bt >>= 1;
    bt += x;
    return framask[bt];
  }

  //========================================================================
  //  Apply the selected mask out of the 8.
  function applymask(m) {
    var x, y, r3x, r3y;

    switch (m) {
      case 0:
        for (y = 0; y < width; y++)
          for (x = 0; x < width; x++) if (!((x + y) & 1) && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
        break;
      case 1:
        for (y = 0; y < width; y++) for (x = 0; x < width; x++) if (!(y & 1) && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
        break;
      case 2:
        for (y = 0; y < width; y++)
          for (r3x = 0, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) r3x = 0;
            if (!r3x && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        break;
      case 3:
        for (r3y = 0, y = 0; y < width; y++, r3y++) {
          if (r3y == 3) r3y = 0;
          for (r3x = r3y, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) r3x = 0;
            if (!r3x && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        }
        break;
      case 4:
        for (y = 0; y < width; y++)
          for (r3x = 0, r3y = (y >> 1) & 1, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) {
              r3x = 0;
              r3y = !r3y;
            }
            if (!r3y && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        break;
      case 5:
        for (r3y = 0, y = 0; y < width; y++, r3y++) {
          if (r3y == 3) r3y = 0;
          for (r3x = 0, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) r3x = 0;
            if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        }
        break;
      case 6:
        for (r3y = 0, y = 0; y < width; y++, r3y++) {
          if (r3y == 3) r3y = 0;
          for (r3x = 0, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) r3x = 0;
            if (!(((x & y & 1) + (r3x && r3x == r3y)) & 1) && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        }
        break;
      case 7:
        for (r3y = 0, y = 0; y < width; y++, r3y++) {
          if (r3y == 3) r3y = 0;
          for (r3x = 0, x = 0; x < width; x++, r3x++) {
            if (r3x == 3) r3x = 0;
            if (!(((r3x && r3x == r3y) + ((x + y) & 1)) & 1) && !ismasked(x, y)) qrframe[x + y * width] ^= 1;
          }
        }
        break;
    }
    return;
  }

  // Badness coefficients.
  var N1 = 3,
    N2 = 3,
    N3 = 40,
    N4 = 10;

  // Using the table of the length of each run, calculate the amount of bad image
  // - long runs or those that look like finders; called twice, once each for X and Y
  function badruns(length) {
    var i;
    var runsbad = 0;
    for (i = 0; i <= length; i++) if (rlens[i] >= 5) runsbad += N1 + rlens[i] - 5;
    // BwBBBwB as in finder
    for (i = 3; i < length - 1; i += 2)
      if (
        rlens[i - 2] == rlens[i + 2] &&
        rlens[i + 2] == rlens[i - 1] &&
        rlens[i - 1] == rlens[i + 1] &&
        rlens[i - 1] * 3 == rlens[i] &&
        // white around the black pattern? Not part of spec
        (rlens[i - 3] == 0 || // beginning
          i + 3 > length || // end
          rlens[i - 3] * 3 >= rlens[i] * 4 ||
          rlens[i + 3] * 3 >= rlens[i] * 4)
      )
        runsbad += N3;
    return runsbad;
  }

  // Calculate how bad the masked image is - blocks, imbalance, runs, or finders.
  function badcheck() {
    var x, y, h, b, b1;
    var thisbad = 0;
    var bw = 0;

    // blocks of same color.
    for (y = 0; y < width - 1; y++)
      for (x = 0; x < width - 1; x++)
        if (
          (qrframe[x + width * y] &&
            qrframe[x + 1 + width * y] &&
            qrframe[x + width * (y + 1)] &&
            qrframe[x + 1 + width * (y + 1)]) || // all black
          !(
            qrframe[x + width * y] ||
            qrframe[x + 1 + width * y] ||
            qrframe[x + width * (y + 1)] ||
            qrframe[x + 1 + width * (y + 1)]
          )
        )
          // all white
          thisbad += N2;

    // X runs
    for (y = 0; y < width; y++) {
      rlens[0] = 0;
      for (h = b = x = 0; x < width; x++) {
        if ((b1 = qrframe[x + width * y]) == b) rlens[h]++;
        else rlens[++h] = 1;
        b = b1;
        bw += b ? 1 : -1;
      }
      thisbad += badruns(h);
    }

    // black/white imbalance
    if (bw < 0) bw = -bw;

    var big = bw;
    var count = 0;
    big += big << 2;
    big <<= 1;
    while (big > width * width) (big -= width * width), count++;
    thisbad += count * N4;

    // Y runs
    for (x = 0; x < width; x++) {
      rlens[0] = 0;
      for (h = b = y = 0; y < width; y++) {
        if ((b1 = qrframe[x + width * y]) == b) rlens[h]++;
        else rlens[++h] = 1;
        b = b1;
      }
      thisbad += badruns(h);
    }
    return thisbad;
  }

  function genframe(instring) {
    var x, y, k, t, v, i, j, m;

    // find the smallest version that fits the string
    t = instring.length;
    version = 0;
    do {
      version++;
      k = (ecclevel - 1) * 4 + (version - 1) * 16;
      neccblk1 = eccblocks[k++];
      neccblk2 = eccblocks[k++];
      datablkw = eccblocks[k++];
      eccblkwid = eccblocks[k];
      k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);
      if (t <= k) break;
    } while (version < 40);

    // FIXME - insure that it fits insted of being truncated
    width = 17 + 4 * version;

    // allocate, clear and setup data structures
    v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
    for (t = 0; t < v; t++) eccbuf[t] = 0;
    strinbuf = instring.slice(0);

    for (t = 0; t < width * width; t++) qrframe[t] = 0;

    for (t = 0; t < (width * (width + 1) + 1) / 2; t++) framask[t] = 0;

    // insert finders - black to frame, white to mask
    for (t = 0; t < 3; t++) {
      k = 0;
      y = 0;
      if (t == 1) k = width - 7;
      if (t == 2) y = width - 7;
      qrframe[y + 3 + width * (k + 3)] = 1;
      for (x = 0; x < 6; x++) {
        qrframe[y + x + width * k] = 1;
        qrframe[y + width * (k + x + 1)] = 1;
        qrframe[y + 6 + width * (k + x)] = 1;
        qrframe[y + x + 1 + width * (k + 6)] = 1;
      }
      for (x = 1; x < 5; x++) {
        setmask(y + x, k + 1);
        setmask(y + 1, k + x + 1);
        setmask(y + 5, k + x);
        setmask(y + x + 1, k + 5);
      }
      for (x = 2; x < 4; x++) {
        qrframe[y + x + width * (k + 2)] = 1;
        qrframe[y + 2 + width * (k + x + 1)] = 1;
        qrframe[y + 4 + width * (k + x)] = 1;
        qrframe[y + x + 1 + width * (k + 4)] = 1;
      }
    }

    // alignment blocks
    if (version > 1) {
      t = adelta[version];
      y = width - 7;
      for (;;) {
        x = width - 7;
        while (x > t - 3) {
          putalign(x, y);
          if (x < t) break;
          x -= t;
        }
        if (y <= t + 9) break;
        y -= t;
        putalign(6, y);
        putalign(y, 6);
      }
    }

    // single black
    qrframe[8 + width * (width - 8)] = 1;

    // timing gap - mask only
    for (y = 0; y < 7; y++) {
      setmask(7, y);
      setmask(width - 8, y);
      setmask(7, y + width - 7);
    }
    for (x = 0; x < 8; x++) {
      setmask(x, 7);
      setmask(x + width - 8, 7);
      setmask(x, width - 8);
    }

    // reserve mask-format area
    for (x = 0; x < 9; x++) setmask(x, 8);
    for (x = 0; x < 8; x++) {
      setmask(x + width - 8, 8);
      setmask(8, x);
    }
    for (y = 0; y < 7; y++) setmask(8, y + width - 7);

    // timing row/col
    for (x = 0; x < width - 14; x++)
      if (x & 1) {
        setmask(8 + x, 6);
        setmask(6, 8 + x);
      } else {
        qrframe[8 + x + width * 6] = 1;
        qrframe[6 + width * (8 + x)] = 1;
      }

    // version block
    if (version > 6) {
      t = vpat[version - 7];
      k = 17;
      for (x = 0; x < 6; x++)
        for (y = 0; y < 3; y++, k--)
          if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {
            qrframe[5 - x + width * (2 - y + width - 11)] = 1;
            qrframe[2 - y + width - 11 + width * (5 - x)] = 1;
          } else {
            setmask(5 - x, 2 - y + width - 11);
            setmask(2 - y + width - 11, 5 - x);
          }
    }

    // sync mask bits - only set above for white spaces, so add in black bits
    for (y = 0; y < width; y++) for (x = 0; x <= y; x++) if (qrframe[x + width * y]) setmask(x, y);

    // convert string to bitstream
    // 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)
    v = strinbuf.length;

    // string to array
    for (i = 0; i < v; i++) eccbuf[i] = strinbuf.charCodeAt(i);
    strinbuf = eccbuf.slice(0);

    // calculate max string length
    x = datablkw * (neccblk1 + neccblk2) + neccblk2;
    if (v >= x - 2) {
      v = x - 2;
      if (version > 9) v--;
    }

    // shift and repack to insert length prefix
    i = v;
    if (version > 9) {
      strinbuf[i + 2] = 0;
      strinbuf[i + 3] = 0;
      while (i--) {
        t = strinbuf[i];
        strinbuf[i + 3] |= 255 & (t << 4);
        strinbuf[i + 2] = t >> 4;
      }
      strinbuf[2] |= 255 & (v << 4);
      strinbuf[1] = v >> 4;
      strinbuf[0] = 0x40 | (v >> 12);
    } else {
      strinbuf[i + 1] = 0;
      strinbuf[i + 2] = 0;
      while (i--) {
        t = strinbuf[i];
        strinbuf[i + 2] |= 255 & (t << 4);
        strinbuf[i + 1] = t >> 4;
      }
      strinbuf[1] |= 255 & (v << 4);
      strinbuf[0] = 0x40 | (v >> 4);
    }
    // fill to end with pad pattern
    i = v + 3 - (version < 10);
    while (i < x) {
      strinbuf[i++] = 0xec;
      // buffer has room    if (i == x)      break;
      strinbuf[i++] = 0x11;
    }

    // calculate and append ECC

    // calculate generator polynomial
    genpoly[0] = 1;
    for (i = 0; i < eccblkwid; i++) {
      genpoly[i + 1] = 1;
      for (j = i; j > 0; j--) genpoly[j] = genpoly[j] ? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];
      genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];
    }
    for (i = 0; i <= eccblkwid; i++) genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step

    // append ecc to data buffer
    k = x;
    y = 0;
    for (i = 0; i < neccblk1; i++) {
      appendrs(y, datablkw, k, eccblkwid);
      y += datablkw;
      k += eccblkwid;
    }
    for (i = 0; i < neccblk2; i++) {
      appendrs(y, datablkw + 1, k, eccblkwid);
      y += datablkw + 1;
      k += eccblkwid;
    }
    // interleave blocks
    y = 0;
    for (i = 0; i < datablkw; i++) {
      for (j = 0; j < neccblk1; j++) eccbuf[y++] = strinbuf[i + j * datablkw];
      for (j = 0; j < neccblk2; j++) eccbuf[y++] = strinbuf[neccblk1 * datablkw + i + j * (datablkw + 1)];
    }
    for (j = 0; j < neccblk2; j++) eccbuf[y++] = strinbuf[neccblk1 * datablkw + i + j * (datablkw + 1)];
    for (i = 0; i < eccblkwid; i++) for (j = 0; j < neccblk1 + neccblk2; j++) eccbuf[y++] = strinbuf[x + i + j * eccblkwid];
    strinbuf = eccbuf;

    // pack bits into frame avoiding masked area.
    x = y = width - 1;
    k = v = 1; // up, minus
    /* inteleaved data and ecc codes */
    m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
    for (i = 0; i < m; i++) {
      t = strinbuf[i];
      for (j = 0; j < 8; j++, t <<= 1) {
        if (0x80 & t) qrframe[x + width * y] = 1;
        do {
          // find next fill position
          if (v) x--;
          else {
            x++;
            if (k) {
              if (y != 0) y--;
              else {
                x -= 2;
                k = !k;
                if (x == 6) {
                  x--;
                  y = 9;
                }
              }
            } else {
              if (y != width - 1) y++;
              else {
                x -= 2;
                k = !k;
                if (x == 6) {
                  x--;
                  y -= 8;
                }
              }
            }
          }
          v = !v;
        } while (ismasked(x, y));
      }
    }

    // save pre-mask copy of frame
    strinbuf = qrframe.slice(0);
    t = 0; // best
    y = 30000; // demerit
    // for instead of while since in original arduino code
    // if an early mask was "good enough" it wouldn't try for a better one
    // since they get more complex and take longer.
    for (k = 0; k < 8; k++) {
      applymask(k); // returns black-white imbalance
      x = badcheck();
      if (x < y) {
        // current mask better than previous best?
        y = x;
        t = k;
      }
      if (t == 7) break; // don't increment i to a void redoing mask
      qrframe = strinbuf.slice(0); // reset for next pass
    }
    if (t != k)
      // redo best mask - none good enough, last wasn't t
      applymask(t);

    // add in final mask/ecclevel bytes
    y = fmtword[t + ((ecclevel - 1) << 3)];
    // low byte
    for (k = 0; k < 8; k++, y >>= 1)
      if (y & 1) {
        qrframe[width - 1 - k + width * 8] = 1;
        if (k < 6) qrframe[8 + width * k] = 1;
        else qrframe[8 + width * (k + 1)] = 1;
      }
    // high byte
    for (k = 0; k < 7; k++, y >>= 1)
      if (y & 1) {
        qrframe[8 + width * (width - 7 + k)] = 1;
        if (k) qrframe[6 - k + width * 8] = 1;
        else qrframe[7 + width * 8] = 1;
      }
    return qrframe;
  }

  var _canvas = null;

  var api = {
    get ecclevel() {
      return ecclevel;
    },

    set ecclevel(val) {
      ecclevel = val;
    },

    get size() {
      return _size;
    },

    set size(val) {
      _size = val;
    },

    get canvas() {
      return _canvas;
    },

    set canvas(el) {
      _canvas = el;
    },

    drawRoundRectPath: function (cxt, width, height, radius) {
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

      //矩形下边线
      cxt.lineTo(radius, height);

      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

      //矩形左边线
      cxt.lineTo(0, radius);

      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

      //上边线
      cxt.lineTo(width - radius, 0);

      //右上角圆弧
      cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

      //右边线
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    },
    /**该方法用来绘制一个有填充色的圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param width:矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param fillColor:填充颜色
     **/
    fillRoundRect: function (cxt, x, y, width, height, radius, /*optional*/ fillColor) {
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius);
      cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
      cxt.restore();
    },
    getFrame: function (string) {
      return genframe(string);
    },
    //这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文
    utf16to8: function (str) {
      var out, i, len, c;

      out = '';
      len = str && str.length;
      for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x0001 && c <= 0x007f) {
          out += str.charAt(i);
        } else if (c > 0x07ff) {
          out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
          out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        } else {
          out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        }
      }
      return out;
    },

    /**
     * 新的绘制方法，用于在指定的画布上绘制二维码。
     * @param {Function} createSelectorQuery - 用于创建选择器查询的函数。
     * @param {string} str - 要编码为二维码的字符串。
     * @param {string} _canvasId - 画布的ID（可选）。
     * @param {number} cavW - 画布的宽度。
     * @param {number} cavH - 画布的高度。
     * @param {Object} $this - 组件的上下文，允许在组件中生成二维码。
     * @param {number} ecc - 错误纠正级别（可选）。
     * @param {Function} callBack - 绘制完成后的回调函数。
     * @param {HTMLCanvasElement} _Canvas - 画布元素。
     * @param {number} dpr - 设备像素比，用于高分辨率屏幕。
     */
    newDraw: async function (
      createSelectorQuery,
      str,
      _canvasId,
      cavW,
      cavH,
      $this,
      ecc,
      callBack,
      _Canvas,
      dpr,
      fillStyle,
      fillBgStyle = '#ffffff'
    ) {
      var that = this; // 保存当前上下文
      ecclevel = ecc || ecclevel; // 设置错误纠正级别，如果未提供则使用默认值
      const canvasId = _canvasId || _canvas; // 获取画布ID，如果未提供则使用默认画布

      // 检查是否提供了画布
      if (!canvasId) {
        console.warn('No canvas provided to draw QR code in!'); // 如果没有画布，发出警告
        return; // 退出函数
      }

      var size = Math.min(cavW, cavH); // 计算画布的最小尺寸
      str = that.utf16to8(str); // 将字符串转换为UTF-8格式，以支持中文

      var frame = that.getFrame(str), // 获取二维码的帧数据
        px = Math.round(size / (width + 8)); // 计算每个二维码单元的像素大小
      var ctx = _Canvas.getContext('2d'); // 获取2D绘图上下文
      _Canvas.width = cavW * dpr; // 设置画布宽度，考虑设备像素比
      _Canvas.height = cavH * dpr; // 设置画布高度，考虑设备像素比
      ctx.scale(dpr, dpr); // 缩放上下文以适应高分辨率

      var roundedSize = px * (width + 8), // 计算绘制的二维码的总大小
        offset = Math.floor((size - roundedSize) / 2); // 计算偏移量以居中二维码
      size = roundedSize; // 更新大小变量
      ctx.fillStyle = '#FEF5E0'; // 设置填充颜色为白色
      this.fillRoundRect(ctx, 0, 0, cavW, cavW, 10, /*optional*/ fillBgStyle); // 绘制圆角矩形背景
      ctx.fillStyle = '#FF7D00'; // 设置填充颜色为黑色

      // 绘制二维码的每个模块
      for (var i = 0; i < width; i++) {
        for (var j = 0; j < width; j++) {
          if (frame[j * width + i]) {
            // 如果当前模块是黑色
            ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px); // 绘制黑色矩形
          }
        }
      }

      callBack && callBack(); // 如果提供了回调函数，则执行它
    }
  };
  module.exports = { api };
  // exports.draw = api;
})();

qrcode-helper.ts：创建二维码的增强辅助函数，支持自定义样式和高清显示

// qrcode-helper.ts
/**
 * 创建二维码的增强辅助函数，支持自定义样式和高清显示
 * 
 * @param {Object} _this - 组件实例的this引用，用于上下文绑定
 * @param {string} qrCode - 需要生成二维码的字符串内容
 * @param {string} canvasId - canvas元素的ID标识符
 * @param {number} cavW - canvas的宽度（单位：px）
 * @param {number} cavH - canvas的高度（单位：px）
 * @param {Function} success - 成功回调函数，参数为生成的临时文件路径
 * @param {Function} fail - 失败回调函数，参数为错误信息对象
 * @param {Function} complete - 完成回调函数，无论成功失败都会执行
 * @param {HTMLCanvasElement} _Canvas - canvas DOM元素实例
 * @param {number} dpr - 设备像素比，用于处理高清屏幕显示
 * @param {string} [fillStyle] - 二维码前景色，可选参数，默认为黑色
 * @param {string} [fillBgStyle] - 二维码背景色，可选参数，默认为白色
 * 
 * @example
 *
 * newCreateQrCodeHelper(
 *   this,
 *   'https://example.com',
 *   'qrCanvas',
 *   200,
 *   200,
 *   (tempFilePath) => console.log('成功：', tempFilePath),
 *   (error) => console.error('失败：', error),
 *   () => console.log('完成'),
 *   canvasElement,
 *   2,
 *   '#000000',
 *   '#ffffff'
 * );
 * 
 * 
 * @description
 * 该函数主要用于在小程序环境中生成二维码，具有以下特点：
 * 1. 支持高清显示，通过dpr参数适配不同设备
 * 2. 可自定义二维码颜色样式
 * 3. 支持成功/失败/完成三种回调
 * 4. 仅支持微信小程序环境（WEAPP）
 * 
 * @throws {Error} 当运行环境不是微信小程序时，会通过fail回调返回错误
 * 
 * @returns {void}
 */
export function newCreateQrCodeHelper(
  _this,
  qrCode,
  canvasId,
  cavW,
  cavH,
  success,
  fail,
  complete,
  _Canvas,
  dpr,
  fillStyle,
  fillBgStyle
) {
  // 获取当前运行环境
  const env = Taro.getEnv();

  // 判断是否在微信小程序环境中
  if (env === 'WEAPP') {
    // 调用QR.api.newDraw方法绘制二维码
    QR.api.newDraw(
      Taro.createSelectorQuery,  // 创建选择器查询对象的函数
      qrCode,                    // 二维码内容
      canvasId,                  // Canvas ID
      cavW,                      // 画布宽度
      cavH,                      // 画布高度
      _this,                     // 组件实例引用
      null,                      // 二维码配置项，这里使用默认值
      // 绘制完成后的回调，将画布内容转换为图片
      () => newCanvasToTempFilePath(
        _Canvas,    // Canvas实例
        cavW,       // 宽度
        cavH,       // 高度
        success,    // 成功回调
        fail,       // 失败回调
        complete,   // 完成回调
        _this       // 组件实例引用
      ),
      _Canvas,      // Canvas实例
      dpr,          // 设备像素比
      fillStyle,    // 二维码前景色
      fillBgStyle   // 二维码背景色
    );
  } else {
    // 如果不是在微信小程序环境中，调用失败回调
    fail({ errorMessage: `不支持的平台:${env}` });
  }
}

2. 海报组件实现

export default class InvitePoster extends Component {
  state = {
    isLoading: false,
    posterImage: '',
  }

  /**
   * 创建动态二维码并处理相关逻辑
   * @param str 需要生成二维码的字符串
   * @param canvasId canvas元素的ID
   * @param cavW canvas宽度
   * @param cavH canvas高度
   * @param retryCount 重试次数，默认3次
   */
  async createQrCode(str: string, canvasId: string, cavW: number, cavH: number, retryCount = 3) {
    // 检查重试次数
    if (retryCount <= 0) {
      console.error('二维码生成重试次数已用完');
      Taro.showToast({
        title: '生成失败，请重试',
        icon: 'none'
      });
      return;
    }

    let isDrawing = false;

    try {
      // 获取canvas实例
      const _canvas = await this.getCanvas(canvasId);
      const dpr = Taro.getSystemInfoSync().pixelRatio;

      // 生成二维码
      newCreateQrCodeHelper(
        this,
        str,
        canvasId,
        cavW,
        cavH,
        (tempFilePath: string) => {
          isDrawing = true;
          this.createPoster(tempFilePath);
        },
        (error: Error) => {
          this.handleQrCodeError(error, str, canvasId, cavW, cavH, retryCount);
        },
        () => {
          if (!isDrawing) {
            console.warn('二维码绘制可能未完成，请检查');
          }
        },
        _canvas,
        dpr,
        null,
        '#FEF5E0'
      );
    } catch (error) {
      this.handleCanvasError();
    }
  }

  /**
 * 创建分享海报
 * 该函数负责将二维码和背景图片合成为一张完整的分享海报
 * 
 * @param {string} qrcode - 已生成的二维码图片的临时路径
 * 
 * @description
 * 海报生成流程：
 * 1. 创建画布并设置尺寸（适配不同设备）
 * 2. 绘制背景图片
 * 3. 绘制二维码背景色
 * 4. 绘制二维码
 * 5. 将画布导出为图片
 * 
 * @example
 * 
 * this.createPoster('tempFilePath/qrcode.png');
 *
 */
createPoster(qrcode) {
  // 检查二维码参数
  console.log('qrcodeqrcodeqrcodeqrcode', qrcode);
  var _this = this;

  // 参数验证：确保二维码路径存在
  if (!qrcode) {
    console.error('二维码图片路径为空');
    Taro.showToast({
      title: '海报生成失败',
      icon: 'none'
    });
    return;
  }

  // 获取画布尺寸配置
  let size = this.setCanvasSize();

  // 获取设备像素比，用于高清适配
  const dpr = Taro.getSystemInfoSync().pixelRatio;

  // 获取画布上下文
  Taro.createSelectorQuery()
    .select('#poster') // 选择海报画布节点
    .node(({ node: canvas }) => {
      const context = canvas.getContext('2d');
      // 清空画布
      context.clearRect(0, 0, canvas.width, canvas.height);

      // 设置画布尺寸，考虑设备像素比
      canvas.width = windowWidth * dpr; // 画布宽度
      canvas.height = ((812 * windowWidth) / 375) * dpr; // 画布高度，保持宽高比
      context.scale(dpr, dpr); // 缩放上下文以适应高分辨率

      // 创建并加载背景图片
      const image1 = canvas.createImage();
      image1.onload = () => {
        // 绘制背景图片，适配屏幕宽度
        context.drawImage(image1, 0, 0, windowWidth, (812 * windowWidth) / 375);

        // 绘制二维码背景
        context.fillStyle = '#FEF5E0'; // 设置二维码背景色
        context.fillRect(size.qrX, size.qrY, size.qw, size.qh);

        // 保存当前绘图状态
        context.save();

        // 创建并加载二维码图片
        const image2 = canvas.createImage();
        image2.onload = () => {
          // 绘制二维码到指定位置
          context.drawImage(image2, size.qrX, size.qrY, size.qw, size.qh);

          // 延迟导出图片，确保绘制完成
          setTimeout(() => {
            // 将画布内容导出为图片
            wx.canvasToTempFilePath(
              {
                width: 750, // 输出图片宽度
                height: 1624, // 输出图片高度
                destWidth: 750 * 2, // 输出图片实际宽度（乘2用于高清显示）
                destHeight: 1624 * 2, // 输出图片实际高度
                canvas: canvas, // canvas实例，2D接口需要传入
                x: 0, // 裁剪起点x坐标
                y: 0, // 裁剪起点y坐标
                canvasId: 'poster', // 画布标识符
                success: function (res) {
                  // 导出成功，更新状态
                  console.log('海报成功:', res.tempFilePath);
                  console.log({ posterImage: res });
                  _this.setState({
                    posterImage: res.tempFilePath,
                    isLoading: false
                  });
                },
                fail: err => {
                  // 导出失败，提示重试
                  Taro.showModal({
                    title: '生成海报失败,请重试',
                    showCancel: false,
                    success: () => {
                      _this.createPoster(qrcode); // 失败后重试
                    }
                  });
                }
              },
              canvas
            );
          }, 200); // 给予200ms延迟确保绘制完成
        };
        // 设置二维码图片源
        image2.src = qrcode;
      };
      // 设置背景图片源,本地图片
      image1.src = require('./images/29.jpg');
    })
    .exec();
}

  /**
   * 保存到相册
   */
  saveToPhone = () => {
    Taro.getSetting({
      success: res => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          this.requestAlbumAuthorization();
        } else {
          this.downloadImage();
        }
      }
    });
  };
}

3. 页面模板

const Index = () => {
    useEffect(()=>{
        let shareUrl = getGlobalData('europeanShareUrl');
    console.log('海报中的shareUrl', shareUrl);

    let size = this.setCanvasSize();

        // 开始绘制二维码
    setTimeout(() => this.createQrCode(shareUrl, 'mycanvas', size.w, size.h), 300);
    },[])

    return  <View className="invite-poster-page">
      {isLoading ? (
        <Loading type="modal" show={true} />
      ) : (
        <View className="container">
          <Image className="poster-image" src={posterImage} mode="aspectFill" />
          <View className="save-btn" onClick={this.saveToPhone}>
            保存到手机
          </View>
        </View>
      )}
      <Canvas className="qr-canvas" type="2d" id="mycanvas" />
      <Canvas className="poster-canvas" type="2d" id="poster" />
    </View>
}

关键技术点说明

1. 画布适配

为了确保在不同设备上显示正常,我们需要处理好画布的尺寸适配:

setCanvasSize() {
  const systemInfo = Taro.getSystemInfoSync();
  const windowWidth = systemInfo.windowWidth;
  const designWidth = 750;
  const designQrSize = 200;

  const scale = windowWidth / designWidth;
  const qrSize = Math.round(designQrSize * scale);

  return {
    w: qrSize,
    h: qrSize,
    qw: qrSize,
    qh: qrSize,
    qrX: Math.round(275 * scale),
    qrY: Math.round(1280 * scale)
  };
}

2. 权限处理

在保存图片到相册时,需要处理权限问题:

requestAlbumAuthorization() {
  Taro.authorize({
    scope: 'scope.writePhotosAlbum',
    success: () => {
      this.downloadImage();
    },
    fail: () => {
      Taro.showModal({
        content: '未授权，无法保存图片,请前往授权',
        success: res => {
          if (res.confirm) {
            Taro.openSetting();
          }
        }
      });
    }
  });
}

3. 错误处理

为了提高用户体验,我们需要做好错误处理和重试机制:

handleQrCodeError(error: Error, str: string, canvasId: string, cavW: number, cavH: number, retryCount: number) {
  console.error('二维码生成失败:', error);
  Taro.showToast({
    title: '二维码生成失败，正在重试',
    icon: 'none',
    duration: 2000
  });

  setTimeout(() => {
    this.createQrCode(str, canvasId, cavW, cavH, retryCount - 1);
  }, 1000);
}

注意事项

Canvas 必须使用 type="2d" 属性
需要处理设备像素比(dpr)以支持高清屏幕
图片绘制时需要给予足够的延时确保加载完成
要合理处理授权失败的情况
建议实现重试机制提高成功率

总结

通过以上实现,我们可以在小程序中生成美观的分享海报。关键在于:

使用 Canvas 2D API 进行绘制
处理好设备适配问题
实现完善的错误处理机制
注意权限和授权处理

【Interview Essentials】Common JavaScript Interview Questions

Jessie Chen — Sat, 12 Oct 2024 09:57:54 +0000

WEBSITE：https://www.jessieontheroad.com/zh/
GitHub：https://github.com/Jessie-jzn

1. What are the data types in JavaScript?

There are 7 basic data types (primitive types) and 1 reference type:

Primitive Types:
1. string
2. number
3. boolean
4. null
5. undefined
6. symbol
7. bigint
Reference Type:
1. object (includes arrays, functions, etc.)

2. What is the difference between `null` and `undefined`?

null: A special object representing "no value." It is often explicitly assigned to a variable to indicate that it currently does not reference any object.
undefined: Indicates a variable has not been assigned a value, or is uninitialized. It's the default value of a declared but unassigned variable.

Differences:

Different types: typeof null is "object", while typeof undefined is "undefined".
Semantic difference: null is used as an intentional placeholder for "no value," while undefined means the variable hasn't been initialized.

3. What is the difference between `call`, `apply`, and `bind`?

The `this` Keyword

In JavaScript, the value of this depends on its execution context (i.e., how it is called). call, apply, and bind are methods that allow you to explicitly set the value of this when invoking a function.

`call` Method

Usage: function.call(thisArg, arg1, arg2, ...)
Functionality: Invokes a function, explicitly setting this and passing arguments individually.
Features:
- Invokes the function immediately.
- The first argument is the this value, followed by individual arguments.

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello', '!');  // Output: Hello, Alice!

`apply` Method

Usage: function.apply(thisArg, [argsArray])
Functionality: Invokes a function, explicitly setting this and passing arguments as an array.
Features:
- Invokes the function immediately.
- The second argument is an array of arguments for the function.

greet.apply(person, ['Hi', '?']);  // Output: Hi, Alice?

`bind` Method

Usage: function.bind(thisArg, arg1, arg2, ...)
Functionality: Returns a new function with this bound to the specified value, and allows pre-setting some arguments.
Features:
- Does not invoke the function immediately.
- Returns a new function that can be called later.

const greetAlice = greet.bind(person, 'Hey');
greetAlice('!');  // Output: Hey, Alice!

Method	Immediate Invocation	Argument Format	Return Value	Use Case
`call`	Yes	Individually	Function result	Used when calling a function and explicitly setting `this`.
`apply`	Yes	Array	Function result	Used when calling a function with `this`, passing arguments as an array.
`bind`	No	Individually	New function	Used when creating a function with `this` permanently bound, ideal for callbacks.

4. Differences between `let`, `var`, and `const`

	Scope	Hoisting	Mutability
var	Function-scoped; available globally if declared outside functions.	Hoisted, but only the declaration is hoisted (initialized to `undefined`).	Variables can be reassigned and redeclared within the same scope.
let	Block-scoped, limited to the enclosing block.	Hoisted but not initialized. Throws a `ReferenceError` if accessed before declaration.	Variables can be reassigned, but cannot be redeclared within the same scope.
const	Block-scoped, like `let`.	Hoisted but not initialized, like `let`.	Must be initialized at declaration, and cannot be reassigned (though object contents can be modified).

5. Closures

A closure is when a function "remembers" and continues to access variables from its outer environment, even after that environment has ceased execution.

Key concepts:

Lexical Scope: A function's scope is determined when it is defined, not when it is executed.
Function Nesting: Inner functions have access to the outer function's variables.
Variable Lifetime: Normally, variables inside a function are destroyed after the function completes. However, closures allow these variables to persist.

Example of a closure:

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closure = outerFunction();
closure();  // Output: I am outside!

6. Prototype Chain

In JavaScript, objects inherit properties and methods from other objects via prototypes. Every object has a hidden [[Prototype]] reference to another object or null. This is the basis of inheritance in JavaScript.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

const john = new Person('John');
john.sayHello();  // Output: Hello, John

If a property is not found on the object, JavaScript will look up the prototype chain to find it.

7. Event Loop

The event loop is the mechanism in JavaScript that handles asynchronous operations by allowing code execution to be split between synchronous and asynchronous tasks.

Call Stack: Executes synchronous code.
Task Queue: Holds asynchronous tasks to be executed after the stack is empty.
Microtasks: Higher priority tasks like Promise callbacks.
Macrotasks: Lower priority tasks like setTimeout.

8. JavaScript Performance Optimization

Reduce HTTP Requests: Combine files (CSS, JavaScript) to lower the number of HTTP requests.
Use Content Delivery Networks (CDNs): Serve static assets from multiple server nodes to reduce load times.
Compress and Minify: Use Gzip, Brotli for compression, and minify code to remove unnecessary characters.
Image Optimization: Use modern formats like WebP for smaller file sizes.

[Personal Website] How to Integrate Notion Database in Next

Jessie Chen — Sat, 12 Oct 2024 07:24:28 +0000

To integrate a Notion database into a Next.js project, you can use Notion as a content management system (CMS) and display its content on your website. Below is a simple step-by-step guide to help you integrate the Notion database into Next.js.

Basic Preparation

Obtain Notion API Key and Database ID

Get Notion API Key: Go to the Notion Developer Portal and create a new integration. Once created, you will receive an API key.
Get Database ID: Navigate to the Notion database you want to integrate, and copy the URL of the database page. The database ID is the string of characters between https://www.notion.so/ and ?v= in the URL.

还不清楚的可以看上篇文章：【01.【个人网站】如何使用Notion作为数据库进行全栈开发】

Using the Official SDK

Step 1: Install Dependencies

First, you need to install Notion’s official SDK, @notionhq/client, to communicate with the Notion API. You can install it using npm or yarn:

npm install @notionhq/client
# or
yarn add @notionhq/client

Step 2: Set up the Notion Client

Create a file lib/notion.js in the root directory of your Next.js project and configure the Notion client as follows:

// lib/notion.js
import { Client } from '@notionhq/client';

const notion = new Client({
  auth: process.env.NOTION_API_KEY,
});

export const getDatabase = async (databaseId) => {
  const response = await notion.databases.query({ database_id: databaseId });
  return response.results;
};

Make sure to store your Notion API key in an environment variable NOTION_API_KEY.（.env.local）

NOTION_API_KEY=your_secret_api_key

Step 3: Fetch Database Content

In your Next.js page, you can use getStaticProps or getServerSideProps to fetch the content from the Notion database.

// pages/index.js
import { getDatabase } from '../lib/notion';

export const getStaticProps = async () => {
  const databaseId = process.env.NOTION_DATABASE_ID;
  const posts = await getDatabase(databaseId);

  return {
    props: {
      posts,
    },
    revalidate: 1, // ISR (Incremental Static Regeneration)
  };
};

export default function Home({ posts }) {
  return (
    <div>
      <h1>My Notion Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.properties.Name.title[0].plain_text}
          </li>
        ))}
      </ul>
    </div>
  );
}

Ensure that you have your Notion database ID stored in NOTION_DATABASE_ID as an environment variable.

NOTION_DATABASE_ID=your_database_id

Step 4: Deployment and Verification

Finally, deploy your Next.js project to Vercel or another platform, and verify that you can successfully fetch and display data from the Notion database.

Additional Tips

You can display different properties of Notion pages (like Name, Tags, Date, etc.) on your page.
Consider using getServerSideProps to fetch data on every request or use getStaticProps with ISR (Incremental Static Regeneration) to optimize performance.

By following these steps, you can successfully integrate a Notion database into your Next.js project and use it to manage and display content.

Using Notion API with Wrapped URLs

Lastly, I ended up using this method for convenience when integrating with the react-notion-x components.

Make sure to add your Notion Database ID and Notion API Key to the .env.local file:

NOTION_DATABASE_ID=your_database_id
NOTION_API_KEY=your_secret_api_key

Step 1: Install the necessary dependencies

First, install the necessary dependencies such as notion-types, notion-utils, and got to handle requests to the Notion API.

npm install notion-types notion-utils got p-map

Step 2: Create a file to encapsulate Notion API interactions

In your Next.js project, create a file, for example, lib/NotionAPI.ts, which will encapsulate interactions with the Notion API. This file will contain methods for calling Notion API endpoints to fetch data from pages and collections.

// lib/NotionAPI.ts
import * as notion from "notion-types";
import got, { OptionsOfJSONResponseBody } from "got";
import {
  getBlockCollectionId,
  getPageContentBlockIds,
  parsePageId,
  uuidToId,
} from "notion-utils";
import pMap from "p-map";

// 定义权限记录接口
export interface SignedUrlRequest {
  permissionRecord: PermissionRecord;
  url: string;
}

export interface PermissionRecord {
  table: string;
  id: notion.ID;
}

export interface SignedUrlResponse {
  signedUrls: string[];
}

// 定义NotionAPI类
export class NotionAPI {
  private readonly _apiBaseUrl: string;
  private readonly _authToken?: string;
  private readonly _activeUser?: string;
  private readonly _userTimeZone: string;

  constructor({
    apiBaseUrl = "<https://www.notion.so/api/v3>",
    authToken,
    activeUser,
    userTimeZone = "America/New_York",
  }: {
    apiBaseUrl?: string;
    authToken?: string;
    userLocale?: string;
    userTimeZone?: string;
    activeUser?: string;
  } = {}) {
    this._apiBaseUrl = apiBaseUrl;
    this._authToken = authToken;
    this._activeUser = activeUser;
    this._userTimeZone = userTimeZone;
  }

  // 获取页面内容
  public async getPage(
    pageId: string,
    {
      concurrency = 3,
      fetchMissingBlocks = true,
      fetchCollections = true,
      signFileUrls = true,
      chunkLimit = 100,
      chunkNumber = 0,
      gotOptions,
    }: {
      concurrency?: number;
      fetchMissingBlocks?: boolean;
      fetchCollections?: boolean;
      signFileUrls?: boolean;
      chunkLimit?: number;
      chunkNumber?: number;
      gotOptions?: OptionsOfJSONResponseBody;
    } = {}
  ): Promise<notion.ExtendedRecordMap> {
    const page = await this.getPageRaw(pageId, {
      chunkLimit,
      chunkNumber,
      gotOptions,
    });

    const recordMap = page?.recordMap as notion.ExtendedRecordMap;

    if (!recordMap?.block) {
      throw new Error(`Notion page not found "${uuidToId(pageId)}"`);
    }

    recordMap.collection = recordMap.collection ?? {};
    recordMap.collection_view = recordMap.collection_view ?? {};
    recordMap.notion_user = recordMap.notion_user ?? {};
    recordMap.collection_query = {};
    recordMap.signed_urls = {};

    if (fetchMissingBlocks) {
      while (true) {
        const pendingBlockIds = getPageContentBlockIds(recordMap).filter(
          (id) => !recordMap.block[id]
        );

        if (!pendingBlockIds.length) {
          break;
        }

        const newBlocks = await this.getBlocks(
          pendingBlockIds,
          gotOptions
        ).then((res) => res.recordMap.block);

        recordMap.block = { ...recordMap.block, ...newBlocks };
      }
    }

    const contentBlockIds = getPageContentBlockIds(recordMap);

    if (fetchCollections) {
      const allCollectionInstances: Array<{
        collectionId: string;
        collectionViewId: string;
      }> = contentBlockIds.flatMap((blockId) => {
        const block = recordMap.block[blockId].value;
        const collectionId =
          block &&
          (block.type === "collection_view" ||
            block.type === "collection_view_page") &&
          getBlockCollectionId(block, recordMap);

        if (collectionId) {
          return block.view_ids?.map((collectionViewId) => ({
            collectionId,
            collectionViewId,
          }));
        } else {
          return [];
        }
      });

      await pMap(
        allCollectionInstances,
        async (collectionInstance) => {
          const { collectionId, collectionViewId } = collectionInstance;
          const collectionView =
            recordMap.collection_view[collectionViewId]?.value;

          try {
            const collectionData = await this.getCollectionData(
              collectionId,
              collectionViewId,
              collectionView,
              {
                gotOptions,
              }
            );

            recordMap.block = {
              ...recordMap.block,
              ...collectionData.recordMap.block,
            };

            recordMap.collection = {
              ...recordMap.collection,
              ...collectionData.recordMap.collection,
            };

            recordMap.collection_view = {
              ...recordMap.collection_view,
              ...collectionData.recordMap.collection_view,
            };

            recordMap.notion_user = {
              ...recordMap.notion_user,
              ...collectionData.recordMap.notion_user,
            };

            recordMap.collection_query![collectionId] = {
              ...recordMap.collection_query![collectionId],
              [collectionViewId]: (collectionData.result as any)
                ?.reducerResults,
            };
          } catch (err: any) {
            console.warn(
              "NotionAPI collectionQuery error",
              pageId,
              err.message
            );
          }
        },
        {
          concurrency,
        }
      );
    }

    if (signFileUrls) {
      await this.addSignedUrls({ recordMap, contentBlockIds, gotOptions });
    }

    return recordMap;
  }

  public async addSignedUrls({
    recordMap,
    contentBlockIds,
    gotOptions = {},
  }: {
    recordMap: notion.ExtendedRecordMap;
    contentBlockIds?: string[];
    gotOptions?: OptionsOfJSONResponseBody;
  }) {
    recordMap.signed_urls = {};

    if (!contentBlockIds) {
      contentBlockIds = getPageContentBlockIds(recordMap);
    }

    const allFileInstances = contentBlockIds.flatMap((blockId) => {
      const block = recordMap.block[blockId]?.value;

      if (
        block &&
        (block.type === "pdf" ||
          block.type === "audio" ||
          (block.type === "image" && block.file_ids?.length) ||
          block.type === "video" ||
          block.type === "file" ||
          block.type === "page")
      ) {
        const source =
          block.type === "page"
            ? block.format?.page_cover
            : block.properties?.source?.[0]?.[0];

        if (source) {
          if (!source.includes("secure.notion-static.com")) {
            return [];
          }

          return {
            permissionRecord: {
              table: "block",
              id: block.id,
            },
            url: source,
          };
        }
      }

      return [];
    });

    if (allFileInstances.length > 0) {
      try {
        const { signedUrls } = await this.getSignedFileUrls(
          allFileInstances,
          gotOptions
        );

        if (signedUrls.length === allFileInstances.length) {
          for (let i = 0; i < allFileInstances.length; ++i) {
            const file = allFileInstances[i];
            const signedUrl = signedUrls[i];

            recordMap.signed_urls[file.permissionRecord.id] = signedUrl;
          }
        }
      } catch (err) {
        console.warn("NotionAPI getSignedfileUrls error", err);
      }
    }
  }

  public async getPageRaw(
    pageId: string,
    {
      gotOptions,
      chunkLimit = 100,
      chunkNumber = 0,
    }: {
      chunkLimit?: number;
      chunkNumber?: number;
      gotOptions?: OptionsOfJSONResponseBody;
    } = {}
  ): Promise<notion.PageChunk> {
    const parsedPageId = parsePageId(pageId);

    if (!parsedPageId) {
      throw new Error(`invalid notion pageId "${pageId}"`);
    }

    const body = {
      pageId: parsedPageId,
      limit: chunkLimit,
      chunkNumber: chunkNumber,
      cursor: { stack: [] },
      verticalColumns: false,
    };

    return this.fetch<notion.PageChunk>({
      endpoint: "loadPageChunk",
      body,
      gotOptions,
    });
  }

  public async getCollectionData(
    collectionId: string,
    collectionViewId: string,
    collectionView?: any,
    {
      limit = 9999,
      searchQuery = "",
      userTimeZone = this._userTimeZone,
      loadContentCover = true,
      gotOptions,
    }: {
      limit?: number;
      searchQuery?: string;
      userTimeZone?: string;
      loadContentCover?: boolean;
      gotOptions?: OptionsOfJSONResponseBody;
    } = {}
  ) {
    const type = collectionView?.type;

    const isBoardType = type === "board";
    const groupBy = isBoardType
      ? collectionView?.format?.board_columns_by
      : collectionView?.format?.collection_group_by;

    let filters = [];
    if (collectionView?.format?.property_filters) {
      filters = collectionView.format?.property_filters.map(
        (filterObj

: any) => ({
          property: filterObj?.property,
          filter: {
            operator: "and",
            filters: filterObj?.filter?.filters,
          },
        })
      );
    }

    const body = {
      collection: {
        id: collectionId,
      },
      collectionView: {
        id: collectionViewId,
      },
      loader: {
        type: "reducer",
        reducers: {
          collection_group_results: {
            type: "results",
            limit,
            loadContentCover,
          },
        },
        userTimeZone,
        limit,
        loadContentCover,
        searchQuery,
        userLocale: "en",
        ...(filters.length > 0 ? { filters } : {}),
        ...(groupBy
          ? {
              groupBy,
            }
          : {}),
      },
    };

    return this.fetch<notion.CollectionInstance>({
      endpoint: "queryCollection",
      body,
      gotOptions,
    });
  }

  private async fetch<R>({
    endpoint,
    body,
    gotOptions,
  }: {
    endpoint: string;
    body: unknown;
    gotOptions?: OptionsOfJSONResponseBody;
  }) {
    const url = `${this._apiBaseUrl}/${endpoint}`;
    const json = true;
    const method = "POST";

    const headers: Record<string, string> = {
      "Content-Type": "application/json",
    };

    if (this._authToken) {
      headers.cookie = `token_v2=${this._authToken}`;
    }

    if (this._activeUser) {
      headers["x-notion-active-user-header"] = this._activeUser;
    }

    try {
      const res = await got.post(url, {
        ...gotOptions,
        json,
        method,
        body,
        headers,
      });

      return res.body as R;
    } catch (err) {
      console.error(`NotionAPI error: ${err.message}`);
      throw err;
    }
  }

  private async getSignedFileUrls(
    urls: SignedUrlRequest[],
    gotOptions?: OptionsOfJSONResponseBody
  ): Promise<SignedUrlResponse> {
    return this.fetch<SignedUrlResponse>({
      endpoint: "getSignedFileUrls",
      body: { urls },
      gotOptions,
    });
  }

  private async getBlocks(
    blockIds: string[],
    gotOptions?: OptionsOfJSONResponseBody
  ): Promise<notion.PageChunk> {
    return this.fetch<notion.PageChunk>({
      endpoint: "syncRecordValues",
      body: {
        requests: blockIds.map((blockId) => ({
          id: blockId,
          table: "block",
          version: -1,
        })),
      },
      gotOptions,
    });
  }
}

Step 3: Use the Encapsulated API in Next.js Pages

To fetch Notion database content in your Next.js pages, you can use the encapsulated NotionAPI class and pass the retrieved data to react-notion-x components for rendering.

// pages/[pageId].tsx
import { GetServerSideProps } from 'next';
import { NotionAPI } from '../lib/NotionAPI';
import { NotionRenderer } from 'react-notion-x';
import 'react-notion-x/src/styles.css';

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { pageId } = context.params;
  const notion = new NotionAPI();
  const recordMap = await notion.getPage(pageId as string);

  return {
    props: {
      recordMap,
    },
  };
};

const NotionPage = ({ recordMap }) => {
  return <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />;
};

export default NotionPage;

Step 4: Configure Routing in Next.js

To ensure that the [pageId].tsx file can dynamically render different Notion pages, you need to set up dynamic routing in Next.js. This will allow you to match the pageId parameter and fetch the corresponding Notion page content.

Here’s how you can configure dynamic routes:

Create a Dynamic Route File in the pages directory:

In your pages directory, create a new file called [pageId].tsx:

pages/[pageId].tsx

Implement Dynamic Page Rendering:

In the [pageId].tsx file, fetch the Notion content based on the pageId from the URL and render it dynamically.

Example code:

import { GetStaticProps, GetStaticPaths } from 'next';
import { NotionRenderer } from 'react-notion-x';
import { getNotionPageData } from '../lib/NotionAPI';
import 'react-notion-x/src/styles.css';

export default function NotionPage({ pageData }) {
  return (
    <div>
      <NotionRenderer recordMap={pageData} fullPage={true} darkMode={false} />
    </div>
  );
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { pageId } = params!;
  const pageData = await getNotionPageData(pageId as string);

  return {
    props: {
      pageData,
    },
    revalidate: 10, // Revalidate content every 10 seconds (ISR)
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [], // We’ll use fallback to handle dynamic routes
    fallback: 'blocking', // Generate pages on the fly if not pre-rendered
  };
};

Explanation:
getStaticPaths: Since your content is dynamic, we return an empty array for paths and set fallback: 'blocking' to generate pages on demand.
getStaticProps: Fetches the Notion page content based on the pageId passed in the URL.

Summary

By following the steps above, you can now encapsulate Notion API requests and render Notion pages dynamically in your Next.js project using react-notion-x. This setup allows you to efficiently integrate Notion as a CMS while ensuring scalability and maintainability in your Next.js application.

[Personal Website] How to Use Notion as a Database for Full-Stack Development

Jessie Chen — Sat, 12 Oct 2024 06:44:06 +0000

WEBSITE：https://www.jessieontheroad.com/zh/
GitHub：https://github.com/Jessie-jzn

Using Notion as a database for full-stack development is a powerful approach that combines Notion’s ease of use with its rich API for managing and displaying data, making it ideal for developing efficient personal websites or project management systems.

Preparation

Sign up for Notion: Ensure you have a Notion account and have already created some database pages.
Obtain Notion API Token: Go to the Notion Developer Page, create a new integration, and get the API Token.

Configuration Steps

Get Notion API Key

Go to the Notion Integration Page, sign up or log in to your account. Access Notion Integration: https://www.notion.so/profile/integrations

Create a New Integration:
Click the “New integration” button
Enter a name for the integration, such as “Travel Guide Website”
Select the workspace
After submitting, you will receive an “Internal Integration Token.” Save this token for future API calls.

Create a Notion Database

Create a New Page:
- Open Notion, click “New Page” in the left menu to create a new page.
Add a Database:
- In the new page, select “Table” to create a new database.
- Name this database “Blog.”
Configure Database Columns:
- Title: Blog post title
- Content: Blog content
- Author: Author name
- Tags: Tags (multi-select)
- Published Date: Date of publication
- Cover Image: Cover image URL
- Status: Status (draft, published)

Share the Database with the Integration

Open your Notion database page.
Click the “Share” button in the top right.
In the “Invite” field, enter the name of the integration you just created, or find it under the “connect” section.
Click “Invite” to grant the integration access to the database.

Get the Database ID

Open your Notion database page.
Copy the database ID from the browser’s address bar. • The database ID appears in the URL right after “www.notion.so/”, for example, https://www.notion.so/yourworkspace/abcdefgh1234567890, where abcdefgh1234567890 is your database ID.

By following this guide, you’ll understand how to use Notion as a database for full-stack development. You can explore further integration techniques with Notion and other development tools to enhance the functionality and efficiency of your personal website or application.

【Interview Essentials】8 Common TypeScript Interview Questions

Jessie Chen — Tue, 10 Sep 2024 14:30:05 +0000

github: https://github.com/Jessie-jzn
website:https://www.jessieontheroad.com/

1. Why use TypeScript?

1. Static Type Checking

TypeScript’s core advantage is its static type checking, which helps catch common errors during the compile phase rather than runtime. This enhances code reliability and stability.

2. Enhanced Code Editing Experience

TypeScript’s type system enables more accurate code completion, refactoring, navigation, and documentation features in editors, significantly boosting development efficiency.

3. Improved Code Maintainability

Type declarations make understanding code intentions and structure easier, which is particularly beneficial in team development environments.

4. Advanced Language Features

TypeScript supports advanced features not present in JavaScript, such as interfaces, enums, and generics, facilitating the development of more structured and scalable code.

5. Better Tool Support

TypeScript offers various compiler options to optimize generated JavaScript code and supports different JS environments by compiling TypeScript to compatible JavaScript.

2. TypeScript vs. JavaScript

	TypeScript	JavaScript
Type System	Static typing with compile-time type checks. Types can be specified for variables, function parameters, and return values.	Dynamic typing with runtime type checks, which can lead to type-related runtime errors.
Type Annotations	Supports type annotations to explicitly define types. E.g., `let name: string = "Alice";`	No type annotations. Types are determined at runtime.
Compilation	Requires compilation to JavaScript. TypeScript compiler checks for type errors and generates equivalent JavaScript code.	Runs directly in browsers or Node.js without a compilation step.
Object-Oriented Programming	Richer OOP features such as classes, interfaces, abstract classes, and access modifiers.	Basic OOP features with prototype-based inheritance.
Advanced Features	Includes all ES6 and ES7 features, plus additional features like generics, enums, and decorators.	Supports ES6 and later standards, but lacks some of the advanced features provided by TypeScript.

3. Basic Data Types in TypeScript

Boolean: Represents true or false values.
Number: Represents both integer and floating-point numbers.
String: Represents textual data, using single or double quotes.
Array: Represents a collection of values of a specified type, using type[] or Array<type>.
Tuple: Represents an array with a fixed number of elements with specified types.
Enum: Represents a set of named constants.
Any: Represents any type of value. Provides no type checking.
Void: Represents the absence of a value, commonly used as the return type of functions that do not return a value.
Null and Undefined: Represent the absence of a value and uninitialized state, respectively.
Never: Represents values that never occur, such as functions that throw errors or run indefinitely.
Object: Represents non-primitive types.

4. What are Generics in TypeScript? How are they used?

Generics allow functions, classes, and interfaces to work with any type while still enforcing type safety.

Example:

function identity<T>(arg: T): T {
  return arg;
}

const numberIdentity = identity<number>(42);
const stringIdentity = identity<string>("Hello");

In this example, the identity function uses a generic <T>, allowing it to accept and return values of any type.

5. Difference Between `unknown` and `any` in TypeScript

any Type: Represents any type of value and bypasses all type checking. It can be assigned any value without type checks.
unknown Type: Represents an unknown type. Values of unknown type must be checked before they can be used, providing a safer way to handle values whose type is uncertain.

let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. Difference Between `readonly` Modifier and `const` Keyword

readonly Modifier: Used on object properties to make them immutable after initialization.
const Keyword: Used to declare variables with immutable references. The object's properties can still be modified.

const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. Decorators in TypeScript

Decorators are a special TypeScript feature that allows adding metadata or modifying classes, methods, properties, or parameters.

Types:

Class Decorators: Applied to class constructors to modify class behavior or add metadata.
Method Decorators: Applied to methods to change their behavior or add metadata.
Accessor Decorators: Applied to get or set accessors to modify their behavior.
Property Decorators: Applied to class properties to add metadata or modify their behavior.
Parameter Decorators: Applied to method parameters to add metadata.

Examples:

Class Decorator:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

Method Decorator:

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

Usage:

Decorators are enabled by setting experimentalDecorators to true in tsconfig.json.

8. Difference Between `interface` and `type`

interface and type are both used to define object types, but they have some differences:

	interface	type
Basic Usage	Defines the shape of objects, including properties and methods.	Defines primitive types, object types, union types, intersection types, etc.
Extension	Supports declaration merging. Multiple declarations of the same interface are automatically merged.	Does not support declaration merging.
Union and Intersection Types	Not supported.	Supports union (`
Primitive Type Aliases	Not supported.	Supports aliasing primitive types.
Mapped Types	Not supported.	Supports mapped types.
Class Implementation	Supports class implementation using `implements`.	Does not support direct class implementation.

These questions and answers should help prepare for TypeScript interviews by covering fundamental concepts and practical usage.