在小程序里面生成二维码

一般来说生成二维码，一般都会使用qrcode这个插件，但是这个插件在小程序里面不兼容的（小程序没有document），所以在网上找了一个weapp-qrcode插件 npm地址，以及upng这个插件（用来把字节流转化为base64）
下面简单的说下用法

npm install weapp-qrcode --save
npm install upng --save
我是使用mpvue写的，语法和vue差不多
<template>
    <div>
         <canvas style="width: 100px; height: 100px;" canvas-id="canvasId"></canvas>
         <img :src="src" alt="">
    </div>
</template>

<script>
import { code } from '../../utils/code'
export default {
    data() {
        return {
            src: '',
            // 画布的宽高要和object里面的宽高保持一致
            object: {
                text: 'https://uu.ghaoqi.com/v3/index.html#/cece2-start?id=2', // 二维码的内容
                width: 100, // 二维码的宽
                height: 100, // 二维码的高
                canvasId: 'canvasId' //canvas的ID（唯一标识）
            }
        }
    },
    mounted() {
    // 初始化的时候加载
        this.getCode(this.object)
    },
    methods: {
        getCode(object) {
            let that = this
            // 调用生成二维码的函数
            code(object).then(data => {
                that.src = data
            })
        }
    }
}
</script>

<style scoped>
img {
  width: 200rpx;
  height: 200rpx;
}
</style>
下面是公共方法

import drawQrcode from 'weapp-qrcode'
import upng from 'upng-js'

export const code = (object) => {
    // 方法都是通过canvasId关联在一起的
    return new promise((reslove,reject) => {
    const ctx = wx.createCanvasContext(object.canvasId)
        // 使用canvas画出二维码
        drawQrcode({
            width: object.width,
            height: object.height,
            canvasId: object.canvasId,
            text: object.text,
            callback: () => {
                // 把canvas上面的二维码导出通过微信api生成临时路径
                // 此处有坑，wx.canvasToTempFilePath要写在ctx.draw()这个方法里面的回调里面
                // 如果直接按照下面的方法不行的话 ，试着写在回调里面
                wx.canvasToTempFilePath({
                    canvasId: object.canvasId,
                    success(res) {
                        // 把临时路径转化成base64格式
                        wx.canvasGetImageData({
                            canvasId: object.canvasId,
                            x: 0,
                            y: 0,
                            width: object.width,
                            height: object.height,
                            success(res) {
                            // 处理数组，通过这个方法得到的数组，在调用微信apiarrayBufferToBase64
                            // 就可以转化为base64，即后台需要的数据，直接传过去就好了
                                let pngData = upng.encode([res.data.buffer], res.width, res.height)
                                let base64 = wx.arrayBufferToBase64(pngData)
                                resolve(`data:image/jpeg;base64,${base64}`)
                            }
                        })
                    }
                })
            }
        })
    })
    })
}

方法已经封装好，把需要依赖安装就可以项目在mpvue、或者wepy这样的框架里面运行