常见问题通用

如何扫码跳转指定网页

二维码内容直接放入完整的网页地址即可，例如：https://ext.dcloud.net.cn/plugin?id=1287。

微信小程序开发者工具Canvas在滚动容器绝对定位

微信小程序开发者工具的bug，预览到真机上或者发布后在手机上显示就是正常的。

原生常见问题

原生方式使用Canvas生成二维码失败

Canvas组件在onReady生命周期才渲染完毕，所以应当在onReady生命周期或之后再写生成代码。

uni-app常见问题

图片路径报错

如果是本地路径，目前仅支持绝对路径。如果是网络路径，请检查是否跨域或者是否设置域名白名单等。

如果是原生方式还需配置loadImage (opens new window)。

二维码无法显示

1. 请检查必填项是否都已填写。
2. 请检查控制台是否有报错或提示信息，如果有报错信息，请根据报错信息指引修改代码。
3. 检查组件及组件父级元素是否使用了v-if、v-show、display:none;来控制显隐，如果页面初始化时组件处于隐藏状态，组件则无法正确获取宽高尺寸，如果需要组件默认隐藏，在需要使用的时候再渲染，可以设置组件属性:start="false"，这样就不会在初始化时加载了，在需要使用的地方调用make方法即可渲染。
4. 微信小程序中canvasId，开头不能为数字，不能重复。

与弹层一起使用无法正常显示

弹层一般是由v-if或v-show进行显隐控制的，根据上一条问题来看，这样是会出现问题的，因为弹层组件重新挂载了组件，组件还未渲染完毕，导致失败。这时我们可以先将组件的start属性设置为false，让它默认不生成，等到弹层组件触发change事件的时候，使用$nextTick监听到页面触发渲染，再调用二维码组件的make方法去触发生成。
第二种方式可以在主动触发弹层显隐的事件中，延时150毫秒左右调用二维码组件的make方法触发生成。

微信小程序Canvas2D真机调试报错

微信小程序开发者工具不支持Canvas 2D真机调试，请使用真机预览，打开vConsole进行调试。

NVue打包后生成失败

引用uni-app官网说明： Canvas是作为独立的模块，打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下：

"app-plus" : {
  /* 模块配置 */
  "modules" : {
    "Canvas" : "nvue canvas"    //使用Canvas模块
  },
  //...
},
//...

保存好提交云端打包。

组件方式重复渲染多次

避免在组件的属性上直接写入对象，它会自动将其转换为响应式对象，其他属性发生改变时，视图会自动更新，造成组件重复渲染。

以options属性为例：

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

需要调整为：

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="options"></uqrcode>

<script>
  export default {
    data() {
      return {
        options: {
          margin: 10
        }
      }
    }
  }
</script>

提示

如果您还有其他问题，可以加入群聊【uQRCode交流群】：695070434 (opens new window)，与其他开发者一起交流反馈哦。