taro 中不能使用qrcode包

[WGLKing]

相关平台

微信小程序

小程序基础库: 2.30.2 使用框架: Vue 3

复现步骤

调用QRCode.toDataURL()方法时报错TypeError: canvasEl.getContext is not a function

期望结果

正常使用qrcode

实际结果

报错TypeError: canvasEl.getContext is not a function

环境信息

Taro v3.6.1


  Taro CLI 3.6.1 environment info:
    System:
      OS: macOS 12.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.16.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.14.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.3 => 3.5.3 
      @tarojs/components: 3.5.3 => 3.5.3 
      @tarojs/helper: 3.5.3 => 3.5.3 
      @tarojs/plugin-framework-vue3: 3.5.3 => 3.5.3 
      @tarojs/plugin-html: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-alipay: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-jd: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-qq: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-swan: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-tt: 3.5.3 => 3.5.3 
      @tarojs/plugin-platform-weapp: 3.5.3 => 3.5.3 
      @tarojs/router: 3.5.3 => 3.5.3 
      @tarojs/runtime: 3.5.3 => 3.5.3 
      @tarojs/shared: 3.5.3 => 3.5.3 
      @tarojs/taro: 3.5.3 => 3.5.3 
      @tarojs/taro-h5: 3.5.3 => 3.5.3 
      @tarojs/webpack5-runner: 3.5.3 => 3.5.3 
      babel-preset-taro: 3.5.3 => 3.5.3 
      eslint-config-taro: 3.5.3 => 3.5.3 

[wangjunjia]

小程序不支持 DOM 操作，使用小程序 canvas API 自己绘制吧。

[AdvancedCat]

Taro 运行时暂时没有接入 Canvas Element API，但可以将这部分 API 代理到 小程序 <canvas> 组件，使用组件提供的api。这样就可以使用Canvas的第三方库了。这个需要新特性开发。

欢迎贡献！

[Przeblysk]

在webpack4下 qrcode是可以正常使用的 @AdvancedCat

[yoyo837]

Buffer 有关把? 看看 https://github.com/NervJS/taro/issues/13656

[Przeblysk]

原本在webpack4下是以下使用方式

QRCode.toDataURL(userInfo.username, opts)

现在webpack5必须获取小程序的canvas实例传递不然就报错了

QRCode.toDataURL(canvasNode, userInfo.username, opts)

[unclechong]

taro 3.5+ 使用webpack5构建

首先taro 3.5+ 相比 3.4 增加 browser 解析，如果npm package.json 中配置了 browser，那么优先导入 browser

mainFields: [ 'browser', 'module', 'jsnext:main', 'main' ],

所以 qrcode 3.5+ 和 3.4 打包的入口变了，那么 3.5+ 要改变qrcode的入口；其次 webpack5默认不在添加 node fallback ，需要手动处理，所以改了qrcode 之后会报一些npm not found

最终添加如下webpack配置即可解决

...
 alias: {
    qrcode: 'qrcode/lib/server',
    fs: 'node-libs-browser/mock/fs',
    stream: 'stream-browserify',
    zlib: 'browserify-zlib',
    util: 'util',
  },
...

[fridaydream]

taro 3.5+ 使用webpack5构建

首先taro 3.5+ 相比 3.4 增加 browser 解析，如果npm package.json 中配置了 browser，那么优先导入 browser

mainFields: [ 'browser', 'module', 'jsnext:main', 'main' ],

所以 qrcode 3.5+ 和 3.4 打包的入口变了，那么 3.5+ 要改变qrcode的入口；其次 webpack5默认不在添加 node fallback ，需要手动处理，所以改了qrcode 之后会报一些npm not found

最终添加如下webpack配置即可解决

...
 alias: {
    qrcode: 'qrcode/lib/server',
    fs: 'node-libs-browser/mock/fs',
    stream: 'stream-browserify',
    zlib: 'browserify-zlib',
    util: 'util',
  },
...

在config的mini下面这个配置这个就好了，我做了好多实验，对比webpack4和webpack5，qrcode运行的步骤，需要安装对应的polyfill包，stream-browserify，browserify-zlib，util，process，

webpackChain(chain) {
      // qrcode需要这些nodejs的polyfill包，提供生成图片的base64逻辑，如果不加，会走浏览器环境配置，通过canvas.getContext获取base64，在小程序里面会报错
    chain.merge({
      resolve: {
        fallback: {
          stream: require.resolve('stream-browserify'),
          zlib: require.resolve('browserify-zlib'),
          util: require.resolve('util'),
        },
      },
    })
    chain
      .plugin('provide')
      .use(require.resolve('webpack/lib/ProvidePlugin'), [
        {
          process: 'process/browser.js',
          Buffer: ['buffer', 'Buffer'],
        },
      ])
  },