前言：需要實(shí)現(xiàn)一個(gè)給你，在微信小程序中生成訂單的二維碼，并合成包含二維碼、其他網(wǎng)絡(luò)圖片、及文字的自定義圖，保存到相冊(cè)中。

這里先記錄下二維碼的生成，下一篇再說自定義圖的實(shí)現(xiàn)

遇到的問題

原本是生成的二維碼為base64圖片，用drawImage繪制到canvas上，模擬器上沒有問題，可以正常顯示以及保存，但到了真機(jī)（android和IOS都不行）上無法顯示圖片

解決方法

使用組件，tki-qrcode
http://npm.taobao.org/package/tki-qrcode

// template 使用
<tki-qrcode :val="qrval" :size="qrsize" ref="qrcode"></tki-qrcode>

// script 使用
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
export default {
    props: {
        qrval: {// 要生成的二維碼值
            type: String
        }
    },
    data() {
        return {
            qrsize: 120, // 二維碼大小
        }
    },
    methods: {
        //生成二維碼
        creatQrcode() {
            this.$refs.qrcode._makeCode()
        }
    },
    components: {
        tkiQrcode
    }
}

這是我封裝自定義圖的組件中關(guān)于二維碼生成的部分，還是蠻簡單的，下次再講利用canvas生成自定義圖片并保存～～～