场景需求：

1. 用户购买时添加引导关注公众号功能
2. 生成二维码并能长按识别（需要图片才能支持）

解决方法：

1. 利用qrcodejs2插件生成二维码（canvas、table渲染不是image图片）
2. 利用canvas的一个方法toDataURL() 返回图片展示的 data URI
3. 实例化一个Image() ，存入src中即可

插件引入使用方法可点击查看以往博客 点击这里

1、views层

<van-popup
    class="followBox tc"
    v-model="isFollow"
    position="bottom"
    :style="{ height: '140px' }"
    @click-overlay="followOverlay">
    <!-- start -->
    <div ref="qrcodeContainer" style="display: none"></div>
    <div class="qr tc" ref="qrCode"></div>
    <!-- end -->
    <p class="mt10">为了方便您查找订单，请扫码购买。</p>
    <div class="followBtn">
        <div class="gray"></div>
        <p @click="cancel">取消</p>
    </div>
</van-popup>

主要是两个div：第一个是通过canvas渲染的二维码，第二个是准备转成图片格式的二维码

2、methods（数据处理）

crateQrcode(){
    let qrcode = new QRCode(this.$refs.qrcodeContainer, {
        text: this.qrUrl,  
        width: 80,  
        height: 80,
        colorDark: '#000',  
        colorLight: '#fff'
    })
    let canvas = document.getElementsByTagName('canvas')[0];
    let img = this.convertCanvasToImage(canvas);
    this.$refs.qrCode.append(img);
},
// 从 canvas 提取图片 image
convertCanvasToImage(canvas) {  
    let image = new Image(); 
    image.src = canvas.toDataURL("image/png");  
    return image;  
},
cancel(){
    this.isFollow = false;
    this.$refs.qrCode.innerHTML = '';  //解决重复生成多个二维码
},
followOverlay(){
    this.$refs.qrCode.innerHTML = '';
},
toBuy() {
    // 是否已关注公众号
    let shareMemberId = this.$route.query.memberCode ? this.$route.query.memberCode : 0;
    getIsFollow(this.targetId, this.id, 1, shareMemberId).then( res => {
        this.sign = res.data.sign; // 0-已关注  1-未关注
        this.qrUrl = res.data.url;
        if(this.sign == 1){
            this.isFollow = true;
            this.$nextTick(() => {
                this.crateQrcode()
            })
        }else{
        	......
		}

3、效果图：