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

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

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

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

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

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

---

使用:

0.html：

<div id="code" ref="code"></div> 

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", //table方式 

         width: 200, //宽度 

         height:200, //高度 

         text: "http://www.baidu.com" //任意内容 

     });

     console.log(qrcode)

     },

3，在mounted中执行。必须在$nextTick中，不详者自己去查

 this.$nextTick (function () {

     this.getCode();

})

4，完美，亲测