今兒在APP和H5中遇到付款的場景：
- 首先用戶
B成為商家，要賣“衣服”，並且提供了收款方式，比如銀行卡、微信和支付寶 - 用戶
A看見商家B的衣服後，下單要買“衣服” - 下單後，用戶
A根據用戶B提供的銀行卡、微信和支付寶賬號進行轉賬。
具體的交互就是：
- 選擇銀行卡時，用戶
A除了可以使用銀行APP或者銀行網站轉賬，也可以跳轉支付寶給銀行卡轉賬，如圖：
- 選擇支付寶時，可以保存收款二維碼，也可以直接轉賬給支付寶賬戶
- 選擇微信時，先保存收款二維碼，再打開微信
這裡都是在APP中通過點擊實現和支付寶和微信的交互，下面讓我們用a標籤來實現這個需求
1. 選擇支付寶，轉賬給支付寶賬戶
這個就比較簡單了：
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?appId=20000067&url=HTTPS://QR.ALIPAY.COM/XXXXXXXX"
>支付寶付款</a>
參數：
appId==20000067 // 應用ID - 默認
url=HTTPS://QR.ALIPAY.COM/XXXXXXXX // 支付寶收款二維碼地址
當點擊a標籤時，就會跳到支付寶的轉賬頁面：
2. 選擇銀行卡，打開支付寶轉賬給銀行卡
這個就稍微難點，我嘗試了兩種方法：
第一種方式
使用下面的鏈接：
alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&bankAccount=xxx&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx
參數：
appId=09999988 // 應用ID - 默認
actionType=toCard // 轉賬類型 toCard - 到銀行卡
sourceId=bill // ？
cardNo=6228480059016257871 // 銀行卡號
bankAccount=xxx // 銀行賬戶
money=0.01 // 轉賬金額
amount=0.01 // 轉賬額度
bankMark= ABC // 銀行代號
bankName=xxx // 銀行名稱
上面的鏈接，可以作為a標籤href的屬性值或生成二維碼：
但是呢，無論是作為a標籤的href屬性值還是生成二維碼掃描，都會被支付寶攔截：
後來發現去掉參數bankAccount就不會有警告了：
alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx
生成二維碼如下：
如果直接掃描這個二維碼是沒問題的：
但是下面兩種情況還是不可行的：
- 作為
a標籤的href屬性值 - 保存二維碼到相冊，通過支付寶掃一掃，從相冊選擇圖片(支付寶-相冊，在相冊中找不到這張圖片，但是從本地相冊中是可以看到這張圖片的~ _ ~)
也就是說在移動端打開支付寶轉賬到銀行卡使用下面的鏈接：
alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx
就只能通過直接掃二維碼才有用，不能直接使用a標籤，而且這也不符合我們的場景。
第二種方式
第二種方式其實是受第一種方式的啟發，第一種方式是在掃描二維碼的情況下可行，那我們讓支付寶識別這個二維碼就可以啦
第二種方式分三步走：
第一步：設置二維碼內容
這一步其實就是第一種方式：
const qrcode = 'alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx'
第二步：獲得二維碼地址
將qrcode生成二維碼，並上傳到服務器，獲得到圖片的地址，比如:
const url = 'http://image.baidu.com/qrcode.jpg'
第三步：使用a標籤
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=url"
>打開支付寶轉賬</a>
參數qrcode=url中的url就是第二步中的生成的url
結果如圖：
最後一個打開微信就簡單了
3. 打開微信
<a href="weixin://" style="background: #01d00e">打開微信</a>
4. 總結
- 轉給支付寶賬戶
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?appId=20000067&url=HTTPS://QR.ALIPAY.COM/XXXXXXXX"
>支付寶付款</a>
- 支付寶轉賬給銀行卡
- 第一步：設置二維碼內容
const qrcode = 'alipays://platformapi/startapp?appId=09999988&actionType=toCard&sourceId=bill&cardNo=6228480059016257871&money=0.01&amount=0.01&bankMark=ABC&bankName=xxx'
- 第二步：獲得二維碼地址
將qrcode生成二維碼，並上傳到服務器，獲得到圖片的地址，比如:
const url = 'http://image.baidu.com/qrcode.jpg'
- 第三步：使用
a標籤
<a
style="background: #01a6ea"
href="alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=url"
>打開支付寶轉賬</a>
- 打開微信
<a href="weixin://" style="background: #01d00e">打開微信</a>