原理
分析之后發(fā)現只需要兩個頁面。
生成頁面 這個就是網站主頁面，有兩個功能，一個是上傳qq、微信、支付寶收款碼并將它們解析成鏈接，還有一個是將這幾個鏈接合起來，然后生成合并之后的二維碼。解析和生成都是用了jQuery的qrcode插件，為了美觀，用canvas繪制收款碼的樣式。
收款頁面 當移動設備掃描了之前生成的收款碼，這個頁面被打開并會獲取收款碼中傳入的三個參數（qq、微信、支付寶鏈接），然后根據瀏覽器UA判斷當前是什么軟件掃的二維碼，qq和微信不能直接喚起支付，這時顯示二維碼界面供用戶長按付款，支付寶可以直接進去轉賬頁面。
這樣的話這個網站就做好了，生成頁面借鑒了收款啦 和 優(yōu)啟夢收款碼，為了不太單調而且不把他們的功能生搬硬套的弄過來，想了一會就弄了個換色的功能(感覺沒什么用，完全是湊內容的哈哈)，如果需要其他樣式的話，可以去他們的網站生成。還有因為這三個收款碼鏈接加起來特別長，生成的二維碼比較密集（也就是丑），然后就通過suo.im新浪短網址將長網址縮短，這樣生成的二維碼就會簡單一點。

使用
下載源碼，上傳到自己的服務器或虛擬主機。
打開index.html，選擇引用圖片的方式，默認為引用淘寶圖片，速度快。如果不想使用淘寶圖片，可以使用引用本地圖片方式，文件中已注明。
在/js/index.js中更換自己的支付寶紅包碼和紅包口令，如不需要生成界面的紅包廣告則刪除相關代碼，文件中已標明。
如果遇到什么問題的話請反饋，雖然我也不一定能解決ヾ(????)?”

添加自定義新樣式
1、添加樣式背景圖
使用外部圖片鏈接方式，如淘寶鏈接： 上傳圖片到各大圖床，如淘寶圖床，然后獲取圖片鏈接，然后在index.html 頁面中 “swiper-wrapper” 類下添加代碼：
其中mould-name=”new”>中的new為自定義樣式名。
使用本地圖片方式： 將背景圖添加到 ./imgs/bgimgs/ 文件夾下，文件名以 “new.png” 為例，然后在 index.html 頁面中 “swiper-wrapper” 類下添加樣式：

其中的new也為樣式名。

2、打開根目錄下 config.json 文件，添加json數據，根節(jié)點名必須為樣式名，如 “new”，其他子節(jié)點參考下表：
參數名 類型 說明 參考
qrWidth 整數 二維碼寬度 300
qrHeight 整數 二維碼高度，建議和二維碼寬度相同 300
foreground 字符串 二維碼前景色，支持十六進制、rgb、rgba “#000”, “rgb(0, 0, 0)”, “rgba(0, 0, 0, 0.5)”
background 字符串 二維碼背景色，支持十六進制、rgb、rgba “#fff”, “rgb(255, 255, 255)”, “rgba(255, 255, 255, 0.5)”
imgWidth 整數 背景圖寬度 900（其他尺寸未兼容）
imgHeight 整數 背景圖高度 1200（其他尺寸未兼容）
font 字符串 字體和大小 “70px ‘黑體’”
fontColor 字符串 文字顏色（未填寫收款名則不生成） “#fff”, “rgb(255, 255, 255)”, “rgba(255, 255, 255, 0.5)”
recNameLeft 空串或整數 文字距離左側距離，建議為空串，此時文本將自適應居中顯示 “”, 100
recNameTop 整數 文字距離頂部距離 170
qrLeft 整數 二維碼距離左側距離 270
qrTop 整數 二維碼距離頂部距離 320
這樣就成功添加了一個新的樣式

3、小提示： 如果不想在背景中生成收款名，可以將fontColor屬性設為transparent。

下載地址