前言：

建議后端合成二維碼，直接返回圖片給前端（包括二維碼帶logo），如果后端沒(méi)有實(shí)現(xiàn)這個(gè)，只返回字符串給前端，那么就需要前端來(lái)用插件合成二維碼了。

前端合成二維碼，就要用到插件。不少H5的二維碼插件都用到DOM的，小程序中沒(méi)有DOM這個(gè)概念，所以h5的好多插件并不能直接用到小程序上，也就出現(xiàn)了h5插件到小程序的移植。

如果項(xiàng)目有多個(gè)平臺(tái)，那么就建議使用已經(jīng)移植到小程序上的插件，這樣能保證不同平臺(tái)生成的二維碼是相同的，不然就會(huì)出現(xiàn)不同平臺(tái)生成券碼不一致的問(wèn)題（雖說(shuō)不影響券碼的識(shí)別，但是總歸不太好）。

解決方案：

H5使用QRCode插件，小程序使用QRcode移植的weapp-qrcode-base64插件，這個(gè)本來(lái)針對(duì)微信小程序做的移植，經(jīng)驗(yàn)證，支付寶小程序也可以用。使用這兩個(gè)插件，生成是二維碼就是一致的了。

這個(gè)插件是不基于canvas的，具體用法這里就不說(shuō)了，開(kāi)源項(xiàng)目里邊都有詳細(xì)說(shuō)明。

后記：

這個(gè)插件還是挺不錯(cuò)的，可以設(shè)置二維碼的容錯(cuò)率以及碼的顏色，不足之處就是不能合成logo，需要前端后期將logo布局到合成的二維碼上方。

能夠直接合成logo的插件也嘗試過(guò)，但是在開(kāi)發(fā)及跨平臺(tái)移植過(guò)程中出現(xiàn)不少問(wèn)題，最后也就嘗試出來(lái)上邊這種方式，實(shí)現(xiàn)了一直的二維碼合成。

有興趣的同學(xué)可以研究下可以直接合成logo進(jìn)去的插件。