萬能收錢碼-多合一收款二維碼原理及源碼-支持支付寶、微信、QQ

原創 admin  2018-12-04 14:43:23  閱讀 345 次 評論 1 條
摘要:

     主要參考了芝麻二維碼。無論是支付寶還是微信的收款碼,其本質上是一個包含了收款鏈接的二維碼。所以我們的思路是:檢測如果是支付寶瀏覽頁面,就給出支付寶的付款鏈接、如果是微信,就給出微信鏈接……    那么問題來了,如何進行判定呢?很好辦,根據 UA 就能進行判定了!不懂什么是 UA?請參照(mkblog.cn) 瀏覽器野史 – UserAgent列傳 這篇博文。這部分的代碼如下: if(navigator.userAg

     主要參考了芝麻二維碼無論是支付寶還是微信的收款碼,其本質上是一個包含了收款鏈接的二維碼。所以我們的思路是:檢測如果是支付寶瀏覽頁面,就給出支付寶的付款鏈接、如果是微信,就給出微信鏈接……   

那么問題來了,如何進行判定呢?

很好辦,根據 UA 就能進行判定了!不懂什么是 UA?請參照(mkblog.cn) 瀏覽器野史 – UserAgent列傳 這篇博文。

這部分的代碼如下:

if(navigator.userAgent.match(/Alipay/i)) {
    // 支付寶
} else if(navigator.userAgent.match(/MicroMessenger\//i)) {
    // 微信
} else if(navigator.userAgent.match(/QQ\//i)) {
    // QQ
} else {
    // 其它
}


        理論上來說,進行判定后直接給跳轉到對應的收款頁面就行了,然而實際測試發現在QQ和微信中并不能直接調用付款功能,只有支付寶能直接進行付款。

        這里就只能用一個折中的辦法:如果是QQ或微信掃的碼,就再放出一個二維碼的界面,讓用戶通過長按識別二維碼進入支付流程。

        最終完成的效果如下:


QQ截圖20181204145231.jpg 萬能收錢碼-多合一收款二維碼原理及源碼-支持支付寶、微信、QQ 站長交流


        你可以用 QQ 或是微信或是支付寶中的任意一個掃描這個二維碼進行測試(當然如果打賞一下小金戈就再好不過了,手打偷笑…… 
 )

        成品源碼下載(單文件純 html 實現,需上傳至網站空間使用):



注:

1.請將代碼中第 19、22、25行中的收款鏈接改為自己的。

2.代碼中第 108、117、126行中的文字可以自己修改成喜歡的。


請用專門的 Html 編輯器(如 sublime/notepad++)進行編輯,切勿直接用記事本編輯,否則可能出現中文亂碼!

知識拓展:

以下以微信為例,QQ、支付寶的獲取方法類似。

獲取到各自的收款二維碼截圖。

用二維碼識別工具(如 https://cli.im/deqr/) 上傳二維碼圖片并獲取到二維碼中的收款鏈接。(不知道為什么我操作過程中有些識別不出來,備用方法https://www.hotapp.cn/jiema

將獲取到的收款鏈接粘貼并替換源碼中的鏈接即可。

// 在以下雙引號中粘貼QQ錢包收款鏈接

qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=1070238&ac=123AA8FA99EAEECBA53D8A29BF8B06963AEA141B073F9DD9DF683C03991BFEC9&n=?????&f=wallet",


// 在以下雙引號中粘貼微信收款鏈接 (新版微信貌似地址開頭是wxp://,不影響直接替換下方地址即可)

wechatUrl: "  D",


// 在以下雙引號中粘貼支付寶收款鏈接

aliUrl: "HTTPS://QR.ALIPAY.COM/FKX02258IEDCF4CBEYRR82",


回復留言可見下載地址:

此處為隱藏內容,請評論后查看隱藏內容,謝謝!

本文地址:http://www.ulyets.tw/index.php/post/690.html
版權聲明:本文為原創文章,版權歸 admin 所有,歡迎分享本文,轉載請保留出處!

發表評論


表情

評論列表

  1. 訪客
    訪客  @回復

    感謝站長分享好資源