vue canvas 方法无效_「一」vue中动态生成二维码

需求：最近项目有个要求：用户点击邀请好友的时候出来一个二维码(二维码的url要加上userId，谁分享的就加谁的，是个动态改变的)给用户扫，然后emmmm(注意项目是运行在vue中的)。

1，个人想着好像canvas功能可以生成这种url转化为图片(看过我的h5自定义海报的应该还有印象)，事实上确实如此。

2，实现，网上一大堆vue插件什么鬼的，比如

1.qrcodejs2，我用了一直报错。放弃。

2.还有vue-qart能用，但是生成的长这样(9点的)领导说丑，不用。

3.最后用了jquery.qrcode.min.js，通过插件的方式引入的，完美使用(依赖于jquery)效果如下

---

使用:

0.html：

1，在需要的页面中(比如home.vue)引入

import $ from '../../utils/jquery-vendor.js'

import qrcode from '../../utils/jquery.qrcode.min.js'

解释：jquery-vendor是我对jquery的一个小小封装，因为直接引入jquery和/jquery.qrcode.min.js，就会报错jQuery undefined。

jquery-vendor中就三句话(看下面，明白了吧)

import $ from 'jquery'

window.$ = $

window.jQuery = $

export default $

2，在methods(比如home.vue)中定义方法(内容自己定义哈)：

getCode(){

$('#id').html('123')

console.log('二维码',qrcode)

$("#code").qrcode({

render: "table